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