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

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