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;}