Three.js基础学习
在Three.js中,要渲染物体到网页中,需要3个基本对象:
- 场景(scene)
- 相机(camera)
- 渲染器(renderer)
场景对应于整个布景空间,相机是拍摄镜头,渲染器用来把拍摄好的场景转换成胶卷。
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 );
1、场景(scene)
var scene = new THREE.Scene();
场景对应于整个布景空间,在Threejs中场景就只有一种,用THREE.Scene来表示。
2、相机(camera)
在Threejs中最常用的相机有两种
- 正投影相机THREE.OrthographicCamera
- 透视投影相机THREE.PerspectiveCamera
(1) 正投影相机THREE.OrthographicCamera
var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );
scene.add( camera );
函数构造:OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number )
参考
正交投影相机示意图如下:
(2) 透视投影相机THREE.PerspectiveCamera
var camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );
scene.add( camera );
函数构造:PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
参考
透视投影相机示意图如下:
3、 渲染器(renderer)
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
除了创建renderer实例,还需要设置渲染空间的尺寸,一般使用目标屏幕的宽高(window.innerWidth和window.innerHeight),也可以给定一个尺寸。
渲染器renderer的domElement元素,表示渲染器中的画布,所有的渲染都是画在domElement上的,所以这里的appendChild表示将这个domElement挂接在body下面,这样渲染的结果就能够在页面中显示了。
4、 添加对象
现在的场景中是空的,我们向场景中加入最简单的立方体。
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material= new THREE.MeshBasicMaterial( { color: 0x4ca7c1 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
创建几何体,创建材质,利用几何体和材质创建对象,将对象加入场景scene中。
默认情况下,当我们调用scene.add()的时候,物体将会被添加到坐标为(0,0,0)的位置。但这可能会使得摄像机的位置和立方体相互重叠(摄像机位于立方体中)。为了防止这种情况的发生,需要将摄像机稍微向外移动一些。
5、 渲染场景
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
在这里我们创建了一个循环——这使得渲染器能够在每次屏幕刷新时对场景进行绘制(在大多数屏幕上,刷新率一般是60次/秒)。
requestAnimationFrame函数就是让浏览器去执行一次参数中的函数,这样通过上面render中调用requestAnimationFrame()函数,requestAnimationFrame()函数又让rander()再执行一次,就形成了我们通常所说的游戏循环了。
6、使立方体动起来
在animate()函数中添加
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
这一段代码将在每一帧时被渲染时调用(正常情况下是60次/秒),这就让立方体有了一个看起来很不错的旋转动画。
除了改变立方体的旋转角度、位置,也可以通过改变相机位置角度达到同样动起来的效果。
完整代码(附详细备注):
<html>
<head>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="build/three.js"></script>
<script>
// 场景(scene)
var scene = new THREE.Scene();
// 相机(camera)
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
// 渲染器(renderer)
var renderer = new THREE.WebGLRenderer(); // 创建renderer实例
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: 0x4ca7c1 } ); //创建材质
var cube = new THREE.Mesh( geometry, material ); // 用几何体和材质创建对象
scene.add( cube ); // 对象加入场景scene中
camera.position.z = 5;
// 渲染场景
var animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
</script>
</body>
</html>
在浏览器中的效果: