175 6191 5976

添加官方微信

领创时代关于网站建设、青岛画册设计、青岛网站设计的观点和相关新闻 将我们的想法与焦点与你共享

使用WebGL 3D和three.js创建加载页面(三)

2019-07-21 来源:小领

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

 

版权声明:转载此文章须经 领创时代 同意,并请附上 领创时代 及本页链接http://www.leadnov.com/newsItem.aspx?id=217
创造品牌视觉体验 X 创新IT技术赋能企业
领创帮助您创新品牌战略,让品牌成为最具价值的资产。
中国·山东 青岛市市北区郑州路43号橡胶谷A栋
热线:175 6191 5976
微信:leadnov
Copyright © 2018-2020 leadnov.com 版权所有
鲁公网安备37020302372323
ICP证: 鲁ICP备18056479号

关注领创公众平台

添加官方微信

175 6191 5976