175 6191 5976

添加官方微信

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

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

2019-07-20 来源:小领

05.添加一个动画循环

动画循环,有时称为“渲染循环”,理想情况下每秒调用60次。胶片以每秒24帧(FPS)的速度运行,这足以让眼睛看到不间断运动。在计算机动画中,我们的目标是至少30 FPS,但理想情况下是60FPS。即使定期丢弃帧,这也可确保非常流畅的视觉效果。

我们将此动画循环绑定到requestAnimationFrame函数,该函数执行两项操作。首先,它确保浏览器准备好渲染下一帧。这也意味着当用户不再查看该浏览器选项卡时,动画可以暂停渲染,

添加此代码以在动画循环中渲染场景:

        var animate = function () {
               requestAnimationFrame( animate );
               renderer.render(scene, camera);
        };
                 
        // start animation loop
        animate();

06.加载地面纹理

接下来,您将为场景创建一个基础。首先,您需要加载要使用的图像。可以通过拍摄自己的照片并在Photoshop CC中仔细裁剪调整边缘来创建地面和墙面等纹理。确保他们可以很好地平铺。要快速入门,网上也有很棒的图书馆,请参阅我们最好的免费纹理。你可以选择任何可以拼贴的东西。这意味着如果将它们并排放置,边缘将无缝地混合在一起。你可以选择像瓷砖或石头这样的东西。请注意,您使用纹理包装选项为此重复包装。此示例使用12x12重复。测试场景后,调整此值以适合您的图像。

        // load a ground texture
        var texture = new THREE.TextureLoader().
        load(“assets/stone.jpg”);
        texture.wrapS = texture.wrapT = THREE.
        RepeatWrapping;
        texture.repeat.set (12,12);

07.创建一种地面材料

Three.js包含多种材料类型供您使用。材料被认为是覆盖3D物体的皮肤。您可以使用对光线或phong或lambert着色器材料没有反应的基本材料。您也可以使用自己的自定义着色器材质。为此,请使用物理材料。它具有非常逼真的外观,对光线反应很好。使用您加载的纹理作为漫反射贴图,如果没有特定的纹理,也可以使用bumpMap。

        // create ground material
        material = new THREE.MeshPhysicalMaterial({map:texture,bumpMap:texture});

08.创建一个地面网格

当我们将材质(蒙皮)与定义3D对象形状的几何体组合在一起时,我们会创建一个网格。在地面上,你需要一个简单的计划。材质着色器和纹理将创建复杂表面细节的错觉。

添加以下代码以创建地面网格,旋转到一个很好的角度并将其定位到相机下方。请务必在此之后运行代码以查看其外观。调整拨入所需的任何代码。

        // create ground mesh
        var geometry = new THREE.PlaneBufferGeometry
        ( 100,100 );
        var ground = new THREE.Mesh( geometry, 
        material );
        ground.rotation.z = Math.PI/180 * -45;
        ground.rotation.x = Math.PI/180 * -90;
        ground.position.y=-2.0;
        scene.add(ground);

09.加载目标

接下来,您将添加一个焦点感兴趣的中央3D对象。这是场景中的明星,因此请选择您喜欢的纹理来覆盖它。注意:您将使此对象具有高反射性,因此您在此处加载的纹理比地面更精细。 

        // load object texture
        var texture = new THREE.TextureLoader().
        load(“assets/rock_01_diffusion.jpg”);

10.创建环境地图

接下来,在对象周围创建一个将在其表面上反射的环境。如果您愿意,也可以将其作为scene.background属性添加到场景中。要加载环境,请使用CubeTextureLoader。您使用的图像应该是六个图像,它们会在立方体内部进行蒙皮,以形成无缝图像,称为立方体贴图。

        var envMap = new THREE.CubeTextureLoader()
        .setPath( ‘assets/)
        .load( [ ‘px.jpg’, ‘nx.jpg’, ‘py.jpg’, ‘ny.
        jpg’, ‘pz.jpg’, ‘nz.jpg’ ] );

11.加入四面体

Three.js带有许多默认几何图形,可用于场景。其中一个较酷的是四面体。它采用半径和“细节”参数来定义对象的面数。

使用以下代码将1添加到场景中。

        // create Tetrahedron
        var geometry = new THREE.
        TetrahedronBufferGeometry(2,0);
        var material = new THREE.MeshPhysicalMaterial
        ( { map:texture,   envMap:envMap, 
        metalness:1.0,roughness:0.0 });
        t = new THREE.Mesh( geometry, material );
        t.rotation.x=Math.PI/180*-10;
        scene.add( t );

12.添加旋转和摄像头目标

要确保相机始终在查看主要对象,请使用camera.lookAt功能。您也可以向对象添加一些环境旋转。  

更新您的动画功能代码,使其如下所示。

        requestAnimationFrame( animate );
        t.rotation.y -= 0.005;
        camera.lookAt(t.position);
        renderer.render(scene, camera);
版权声明:转载此文章须经 领创时代 同意,并请附上 领创时代 及本页链接http://www.leadnov.com/newsItem.aspx?id=216
创造品牌视觉体验 X 创新IT技术赋能企业
领创帮助您创新品牌战略,让品牌成为最具价值的资产。
中国·山东 青岛市市北区郑州路43号橡胶谷A栋
热线:175 6191 5976
微信:leadnov
Copyright © 2018-2020 leadnov All Rights Reserved
鲁ICP备18056479号-1站点地图

关注领创公众平台

添加官方微信

175 6191 5976