Three.js中的动画实现02-[Three.js]-[Object3D属性.onAfterRender/.onBeforeRender]

Table Of Content

Object3D简介以及两个属性的介绍

一个示例

Object3D简介以及两个属性的介绍

这是Three.js中大部分对象的基类，提供了一系列的属性和方法来对三维空间中的物体进行操控。这里介绍该基类的两个属性。

.onAfterRender : function

一个可选的回调函数，在Object3D渲染之后直接执行。使用以下参数来调用此函数：renderer，scene，camera，geometry，material，group。

.onBeforeRender : function

一个可选的回调函数，在Object3D渲染之前直接执行。使用以下参数来调用此函数：renderer，scene，camera，geometry，material，group。

其实在前面讲requestAnimationFrame时，demo中就用到了.onBeforeRender这个属性。

原因是，我们写的是模块化，并不是所有逻辑都写在一个文件中，这样如果我们需要实现动画，就需要在渲染器更新函数中对我们创建的模型进行操作。如果按照这种想法，我们需要把在专门创作模型的js文件中定义的模型变量传入到渲染器更新函数所载的js文件，这个过程很繁琐，易出错。因此，Three.js为大多数3D模型提供了这样两个属性。只需要通过onject.onBeforeRender = function（para1，para2，...）｛｝这种形式，就可以定义，在何时渲染。

一个示例

效果

![](https://img2018.cnblogs.com/blog/1735896/202001/1735896-20200101234552641-303346906.gif)

关键代码

function draw(scene) {
//方体
var cubeGeometry = new THREE.BoxGeometry(20,20,20);
var cubeMaterial = new THREE.MeshLambertMaterial({
    color:0xffaaaa,
    wireframe:true
});
var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
cube.position.x = 0;  cube.position.y = 10;  cube.position.z = 80;
cube.castShadow  = true;
cube.onBeforeRender = function(){//关键
    this.rotation.x += 0.02;
    this.rotation.y += 0.02;
    this.rotation.z += 0.02;
}
scene.add(cube)
//球体
var sphereGeometry = new THREE.SphereGeometry(20,40,50);
var sphereMaterial = new THREE.MeshLambertMaterial({
    color:0x777777,
    wireframe: true
});
var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
sphere.castShadow  = true;
var step = 0;
sphere.onBeforeRender = function(){//关键
step += 0.04;
sphere.position.x = 20 + (10*(Math.cos(step)));
sphere.position.y = 20 + (10*Math.abs(Math.sin(step)));
}
scene.add(sphere)
//地面
var planeGeometry = new THREE.PlaneGeometry(300,300,20,20);
var planeMaterial = new THREE.MeshPhongMaterial({
    color:0x222222,
    side: THREE.Double
});
var plane = new THREE.Mesh(planeGeometry,planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 0;
plane.position.y = -5;
plane.position.z = 0
plane.receiveShadow   = true;
scene.add(plane)
//灯光
var spotlight = new THREE.SpotLight(0xffffff);
spotlight.position.set(-40,60,-10);
spotlight.castShadow = true
scene.add(spotlight);
}

值得注意的是球体的弹跳（bounce）的实现

x方向：

sphere.position.x = 20 + (10*(Math.cos(step)));

该方向上的增量变化是10~30

y方向：

sphere.position.y = 20 + (10*Math.abs(Math.sin(step)));

该方向上的增量是20~30

该demo的完整代码在这里：Link