应用WebGL 三d和three.js建立载入网页页面(三)

13.加上颗粒物环

接下去,将一些自然环境颗粒加上在场景中。这种将与您稍后加上的市场前景视頻循环系统非常好地结合,而且是互动式的。加上一个简易的 for 循环系统来储存您将用以建立好几个颗粒的编码。

 for (i=0;i =num;i++){
   // particle code will go here
 }
14.建立颗粒网格图

最先要做的是建立颗粒目标。您可使用球体,小精灵或一切您要想的物件来保证这一点。如今,试着制作简易的球体。 

在for循环系统中加上下列编码。

 // create new mesh
 var geometry = new THREE.SphereBufferGeometry( .1,6,6  );
 var material = new THREE.MeshPhysicalMaterial( { envMap:envMap, metalness:1.0 } ) ;
 var particle = new THREE.Mesh( geometry, material );
15.设定任意部位和间距

颗粒将紧紧围绕管理中心物件运作,并应任意精准定位,便于他们非常好地添充室内空间并具备有机化学外型。加上下列编码以设定不规律部位,随后为每一个颗粒特定一个稳定间距。

 // set random position
 particle.position.set(Math.random()*100.0 - 
 50.0,0.0 ,Math.random()* - 10.0 );
 // calc distnace as constant and assign 
 to object
 var a = new THREE.Vector3( 0, 0, 0 );
 var b = particle.position;
 var d = a.distanceTo( b );
 particle.distance = d;
16.设定路轨视角

要使路轨迅速地制作动漫,请加上路轨的视角参量,并将他们储存为颗粒的特性。加上下列编码以界定这种任意內容视角。

 // define 2 random but constant angles 
 in radians
 particle.radians = Math.random()*360 * Math.
 PI/180; // initial angle
 particle.radians2 = Math.random()*360 * Math.
 PI/180; // initial angle
17.将颗粒加上在场景和结合中

最终,将颗粒加上在场景和前边界定的目标数字能量数组中。这将使之后更非常容易迭代更新全部颗粒。

 // add object to scene
 scene.add( particle ); 
 // add to collection
 objects.push( particle ); 
18.向颗粒加上动漫

接下去,您必须升级颗粒目标的部位和转动。这种路轨与情景管理中心维持稳定间距。将下列编码加上到animate涵数中。

 for (i=0;i =num;i++){
   var o = objects[i];
   o.rotation.y+=.01;
   if( i % 2 == 0) { 
   o.radians+=.005; o.radians2+=.005;
   } else {
   o.radians-=.005; o.radians2-=.005;
   }
   o.position.x = (Math.cos(o.radians) * 
 o.distance);
   o.position.z = (Math.sin(o.radians) * 
 o.distance);
   o.position.y = (Math.sin(o.radians2) * 
 o.distance*.5);
 }
19.加上题目

接下去,在显示屏中间加上一个题目 - 一个详细介绍您知名品牌的名字。题目的英文字母间隔得出了非常好的影片实际效果。应用您喜爱的一切字体样式/款式,但请查询影片题目参照以获得设计灵感。

最先为题目加上DOM原素。在关掉文章正文标识以前的脚本制作标识以后加上此內容。

 h1 Relative Studios /h1 

将题目的下列款式加上到文档顶端的款式标识中。

 h1 { color:white; position:absolute; top:50%;
 z-index:100; width:100%; text-align: center; 
 transform: translate(0,-100%); font-family: 
 Raleway , sans-serif; font-weight: 100; 
 letter-spacing: 40px; text-transform: 
 uppercase; font-size: 16px; }
20.加上视頻循环系统

为登录建立深层的一个好方式是加上一个短视频循环系统。您可使用烟雾,尘土或颗粒物。这种能够线上普遍得到,或是是很多视頻和影片制作包的一一部分。在H1标识后加上下列视頻标识。一定要注意,您要将其设定为 降噪 并全自动播发。这也将容许视頻在移动终端内以及线上播发。

 video id= videoBacker loop src= assets/
 snow.mp4 autoplay muted /video 

要设定视頻的款式,请将下列CSS加上到网页页面顶端的款式中。

 #videoBacker {  background-size: cover; 
 object-fit: cover; z-index: 9; opacity:.3; 
 position: absolute; top:0px; left:0px; 
 width:100vw; height: 100vh; transition: 1s 
 opacity ease-in-out;
21.加上letter-boxing

要真实为您的总体目标网页页面加上影片设计风格,请在网页页面中加上一些邮箱。

最先加上div原素。

 div > 
 div > 

随后升级款式以加上这2个黑条的款式。您还可以依据自身的口感和要求调节这种样式。

 .bar-top { background-color: black; 
 height:100px; position: absolute; top:0; 
 left:0;z-index: 100; width:100vw;}
 .bar-bottom { background-color: black; 
 height:100px; position: absolute; bottom:0; 
 left:0; z-index: 100; width:100vw;}

 

著作权申明:转截此篇章须经 领创时期 愿意,并请另附 领创时期 及本页连接newsItem.aspx?id=217


扫描二维码分享到微信