前面两节讲得都是在舞台上创建角色,这一节我们就让角色动起来。
three.js 中一般是用requestAnimationFrame();来做动画,当然也可以用setInterval定时器,这里不建议使用。
因为动画的核心就只有这个函数,然后如何做成何种动画,就靠自己去构思,去尝试了。
话不多说,上代码:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<title>three.js</title>
<script src=”js/three.js”></script>
</head>
<body>
</body>
</html>
<script>
// 创建场景
var scene = new THREE.Scene();
// 创建相机 90 -> 视角;相机拍摄面 -> 一般为长宽比;0.1 -> 近裁剪面; 1000 -> 远裁剪面
var camera = new THREE.PerspectiveCamera(90, window.innerWidth/window.innerHeight, 0.1, 1000);
// 渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
// 设置背景颜色
renderer.setClearColor(‘#5AC7FF‘);
document.body.appendChild(renderer.domElement);
// 创建物体 CubeGeometry 代表立体图形 1,3,2 分别代表长宽高
var geometry = new THREE.CubeGeometry(1,3,2,2,2,5);
//网孔基础材料(MeshBasicMaterial)为其填充颜色
var material = new THREE.MeshBasicMaterial({color: “#990033“});
//网孔(Mesh):网孔是用来承载几何模型的一个对象,还可以把材料应用到它上面
var cube = new THREE.Mesh(geometry, material);
//将物体添加到场景
scene.add(cube);
camera.position.z = 5;
renderer.render(scene, camera);
//渲染循环(render loop)
function render() {
// requestAnimationFrame 相当于setInterval
requestAnimationFrame(render);
// cube.rotation.x += 0.1;
cube.rotation.y += 0.05;
// cube.rotation.z += 0.1;
renderer.render(scene, camera);
}
render();
</script>
这样,就可以在屏幕中间,看到一个自转的立方体。
说起自转,下节就讲讲如何在屏幕中间,做一个自转的地球。