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 class=’bar-top’></div>
<div class=’bar-bottom’></div>
然后更新样式以添加这两个黑条的样式。您也可以根据自己的口味和需求调整这些款式。
.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;}