Creating a scene
这一部分的这一部分的目的是对three.js进行详细介绍介绍。我们将从在scene中显示一个旋转几何体开始。页面底部提供了一个例子,以防你困惑时需要帮助。
Before we start
在用three.js之前,你需要一个地方来展示它。将下面的HTML保存为文件,并且保存three.js 到 js/ 目录下面。在浏览器中打开 html 文件。
<!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="js/three.js"></script>
<script>
// Our Javascript will go here.
</script>
</body>
</html>
这就是html文件的全部内容了。而以下的全部代码将会被放在<script>
标签中。
Creating the scene
想要用three.js显示一个物体,需要三个东西:scene,camera,renderer,即用camera来观察render在scene中的物体。
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 );
接下来花点时间来了解发生了什么。我们已经创建好了scene,camera,renderer。three.js中几种不同的camera,在这里使用的是PerspectiveCamera 。
PerspectiveCamera(fov, ar, near, far)
- 第一个参数:field of view,视野。
- 第二个参数:aspect ratio,长宽比。我们总是希望使用元素的宽度除以高度,否则获得的结果是 图像看起来很干燥 ,跟在宽屏电视机上播放旧电影时一样 。
- 第三个参数:near,近的剪裁平面。
- 第四个参数:far,远的剪裁平面。near和far代表的意思是在这两者范围之外的地方,物体将不会被渲染。我们现在不用考虑这件事情,但是以后也许你需要选取不同的值,以便提高应用的性能。
接下来是renderer,它就是魔法发生的地方。除了这儿上面代码中使用到的WebGLRenderer,three.js还有其他的renderer。其他版本是由于浏览器不支持webGL而导致的回退版本。
此外,我们还需要给renderer实例设置大小。比较好的做法是,把放置区域的大小赋值给render。在这个例子中,我们给其设置的是浏览器窗口的宽和高。对于性能要求比较高的应用,我们设置可以设置为window.innerWidth/2 和 window.innerHeight/2,使app render的大小只有一半。
如果你希望保持应用的大小,但是以较低的分辨率呈现,那么你可以通过将setSize的第三个参数设置为false来实现。例如,setSize(window.innerWidth/2, window.innerHeight/2, false) 将以半分辨率来渲染应用,而canvas将具有100%的宽度和高度。
最后一步,将renderer 元素加入到 HTML document中。renderer使用canvas来展示scene。
“一切都已准备好,但是你承诺的立方体在哪儿?”好吧,我们现在就来加上。
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;
为了创建一个cube,我们需要一个BoxGeometry。这是一个包含了几何体所有点、面的对象。在未来我们会仔细探讨他。
除了需要一个geometry,我们需要material来给cube上色。Three.js中有很多的material,但是我们现在仍坚持用MeshBasicMaterial。所有的material接受一个属性对象并使用它。为了使事情变得简单,我们只提供了颜色0x00ff00(16进制),也就是绿色。颜色产生的效果跟在css或者是photoshop中一样。
我们需要做的第三件事使Mesh。Mesh是一个对象,它接受geometry和material并将material作用于geometry。然后就可以将它放在scene中,并且可以自由移动。
当我们调用scene.add()时,默认情况,物体将被放在坐标(0,0,0)处。这会导致立方体和相机重叠在一起,为了避免这种情况,我们将相机的挪动了一个位置。
Rendering the scene
如果你已经拷贝了我们之前写的代码,你会发现并没有什么效果。这是因为我们事实上并没有渲染任何东西在页面上。所以,我们需要调用render或者animate loop。
function animate () {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
这会创建一个循环,这个循环使renderer每秒绘画60次。如果你是第一次在浏览器中写游戏,你可能会说“为什么我们不创建一个setInterval?”是的,可以使用setInterval。但是requestAnimationFrame具有很多的优势。其中最重要的优势应该是当用户切换到另外的浏览器选项卡时,它会暂停,因此不会浪费宝贵的处理能力和电池寿命。
Animating the cube
如果你已经准备好了上面所说的一切,你就可以看到一个绿色的盒子了。我们来把它旋转起来。
将下面的代码添加到animat方法中。
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
上面的代码每一帧都会执行(每秒60次),会给cube一个漂亮的旋转动画。基本上,应用运行时要旋转或者是改变任何东西,都必须通过animate loop来实现。你当然可以调用其他功能,但是你将会用几百行的代码来实现动画功能。
The result
恭喜!你已经完成了你的第一个three.js应用。这很简单,但也是我们必须开始的地方。
完整代码如下,试着运行一下它,以便更好的理解它的工作原理。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My first three.js app</title>
<script src="./js/three.js"></script>
<style>
body { margin: 0;}
canvas { width: 100%;height: 100%; }
</style>
</head>
<body>
<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: 0x00FF00});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
var animate = function () {
requestAnimationFrame(animate);
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
点击这里,跳转原文。