Threejs入门6-animation(动画)

1.简介

要想一个物体动起来？满足什么条件呢？

物体移动的同时定时重绘页面。

a.定时重绘：setTimeout或者requestAnimationFrame

requestAnimationFrame：与setTimeout相比，requestAnimationFrame最大的优势是由系统来决定回调函数的执行时机。具体一点讲，如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次，如果刷新率是75Hz，那么这个时间间隔就变成了1000/75=13.3ms，换句话说就是，requestAnimationFrame的步伐跟着系统的刷新步伐走。它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次，这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题。

b.物体移动

重绘的同时移动物体的位置

c.相机移动

相机移动也会达到物体成像移动，物体移动的位置恰好和相机移动的位置相反方向移动。

2.画面

物体移动：

相机移动：

3.代码

(1).新建annimation.html

(2).新建annimation.js

var camera, scene, renderer;
var geometry, material, mesh;

/**
 * @description 初始化渲染场景
 */
function initRenderer () {
    renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );
}
/**
 * @description 初始化相机
 */
function initCamera () {
    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
    camera.position.x = 0;
    camera.position.y = 0;
    camera.position.z = 1;
    camera.up.x = 0;
    camera.up.y = 1;
    camera.up.z = 0;
    camera.lookAt(0, 0, 0);
}
/**
 * @description 初始化场景
 */
function initScene () {
    scene = new THREE.Scene();
}
/**
 * @description 初始化添加物体
 */
function initObject () {
    geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
    material = new THREE.MeshNormalMaterial();

	mesh = new THREE.Mesh( geometry, material );
	scene.add( mesh );
}
/**
 * @description 渲染
 */
function render () {
    animate();
}
function init() {
    initRenderer()
    initCamera ();
	initScene();
    initObject();
    render();
}

function animate() {
    //移动物体x、y
    // mesh.rotation.x += 0.01;
    // mesh.rotation.y += 0.02;
    //移动相机x、y、z
    camera.position.x += 0.01;
    camera.position.y += 0.01;
    camera.position.z += 0.01;
    renderer.render( scene, camera )
    requestAnimationFrame( animate );
}

window.onload = init;

4.代码解析

function animate() {
    //移动物体x、y
    // mesh.rotation.x += 0.01;
    // mesh.rotation.y += 0.02;
    //移动相机x、y、z
    camera.position.x += 0.01;
    camera.position.y += 0.01;
    camera.position.z += 0.01;
    renderer.render( scene, camera )
    requestAnimationFrame( animate );
}

a. 通过移动物体的位置 mesh.rotation.x += 0.01; mesh.rotation.y += 0.02;不停的重新绘制页面，达到物体移动效果。

b. 通过设置相机的位置,  camera.position.x += 0.01;camera.position.y += 0.01;camera.position.z += 0.01;达到物体成像反方向移动效果