旋转的立方体
1、准备开发环境
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first Three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="/libs/three.r73.js"></script>
<script>
// Our Javascript will go here.
</script>
</body>
</html>
2、创建一个场景
在Three.js中，要渲染物体到网页中，我们需要3个组建：场景（scene）、相机（camera）和渲染器（renderer）。有了这三样东西，才能将物体渲染到网页中去。
拿电影来类比的话，场景对应于整个布景空间，相机是拍摄镜头，渲染器用来把拍摄好的场景转换成胶卷（对于网页来讲，是电脑屏幕）。 场景和相机代表了3D观察空间和数据模型，渲染器则包含了WebGL绘图上下文和着色器。
//场景 在Threejs中场景就只有一种，用THREE.Scene来表示，要构件一个场景也很简单，只要new一个对象就可以了
var scene = new THREE.Scene();
//渲染器
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
// 设置渲染器的大小为窗口的内宽度，也就是内容区的宽度
var renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
Three.js的架构支持多种camera，这里使用最常见的远景相机（PerspectiveCamera），也就是类似于人眼观察的方式。第一个属性75设置的是视角（field of view）。
近裁剪面（near clipping plane） 远裁剪面（far clipping plane）
3、渲染器
为了创建一个立方体，我们需要使用盒子模型（BoxGeometry），这是一个包含立方体所有顶点和填充面的对象。
Three.js支持多种材料，现在我们只使用 网孔基础材料（MeshBasicMaterial）。 所有材料都含有一个属性对象。这里简单起见，我们只提供了颜色值为0x00ff00，表示绿色。这和CSS和Photoshop中16进制颜色值一样。
我们需要一个网孔(Mesh)。网孔是用来承载几何模型的一个对象，还可以把材料应用到它上面，然后添加到场景中完成旋转动画。
默认情况下，当我们调用 scene.add() 时，对象将被添加到原点处，即坐标点(0,0,0)，这将导致相机和立方体发生空间重叠。为了避免这样，我们把相机（camera）的位置移出来一些。
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
4、添加物体到场景中
这将创建一个循环，以每秒60次的频率来绘制场景。熟悉requestAnimationFrame这个函数，它用来替代 setInterval， 这个新接口具备多个优点，比如浏览器Tab切换后停止渲染以节约资源、和屏幕刷新同步避免无效刷新、在不支持该接口的浏览器中能安全回退为setInterval。
function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
}
render();
5、创建动画
基本上，如果要改变立方体的运动，我们都是在render循环中处理。把如下代码加在 render 函数中 renderer.render 这行代码之前
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
恭喜你，你已经完成你自己的第一个Three.js程序
以下是全部代码（最好自己写一次）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MyFirstThreeD</title>
</head>
<body>
<script src="http://cdn.bootcss.com/three.js/r82/three.min.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 11397866 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
var render = function () {
requestAnimationFrame( render );
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
};
render();
</script>
</body>
</html>
网友评论