创建一个场景
这一节的目的是为three.js做简单的介绍。我们会创建一个旋转立方体场景。一个工作例子在页面的底部被提供防止你陷入困境和需要帮助。
在我们开始之前,你需要去展示。保存下面的HTML,three.js然后在浏览器打开。
<!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>
这是全部。然后下面所有的代码都写在<script>。
创建场景
使用three.js我们需要: 场景(scene) 相机(camera)渲染器(renderer),我们使用相机渲染场景。
在three.js有不同的相机,这里我们用的是透视相机。
第一个参数属性是视图域。FOV(field of view)是被看见的场景的范围。数值是度数。
第二个参数是长宽比。你总需要。
下面2个参数是 近裁剪面,远裁剪面。距离相机太近或者太远的不会被渲染。
你不必担心这个问题。
渲染器,这是魔法发生的地方。除了我们在这里使用的WebGLRenderer。
除了创建渲染实例,我也需要设置大小在app上渲染的大小。
使用可以填充我们app的高度和宽度是个好主意。这里是浏览器的高度和宽度。
对于性能密集型程序,我们也可以 setSize 更小的值,如 window.innerWidth/2 window.innerHeight/2 ,可以使渲染一半。
如果你要一个较低的分辨率,你可以设置 setSize为false updateStyle(第三个参数)。
例如:setSize(window.innerWidth/2,window.innerHeight/2,false)会渲染你的app在一半的resolution,当你的canvas有100%的高宽的时候。
最后我们把渲染标签添加到 HTML 文档。这是<canvas>标签 用来渲染展示给我们。
下面添加立方体。
创建一个立方体,我需要一个BoxGeometry。这是一个对象包含 所有的点(顶点)和面(面)对象。我们将会进一步探讨这个问题。
除了几何体,我们需要材质你懂的(玩过unity吗就那个东西)可以给cube的面涂色。
Three.js自带几种材质,但是我们会坚持MeshBasicMaterial。
所有的材质都有一个属性对象。
为了让所有的简单化,我们仅仅提供一个绿色颜色属性。
我们还需要一个网格,
网格是一个对象,它需要一个几何体,并将一个材料应用到它,然后我们可以插入到我们的场景中,并自由移动。
默认情况下,当我们调用scene.add(),这件事我们添加将添加到坐标(0,0,0)。这将导致相机和立方体彼此重合,因为相机和立方体是重合的,坐标一样。为了避免这种情况,我们只需稍微移动一下摄像机,改变摄像机(camera)的坐标。
渲染场景
上面还没有渲染我们看不到。
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
这会创建一个循环,用渲染器使渲染场景每秒60次。
你会说为什么我们不使用setInterval,但是 requestanimationframe具有很多优点,到你在浏览器另外一个浏览器选项卡,它会停止。不浪费处理能力和电池寿命。
让立方体动起来。
如果你把上面的代码放进去你会看到一个绿色框框。但是我们可以让它转起来。
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
这会在每frame中运行(60次每秒)。
ok了