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