一、three.js是什么
在介绍three.js demo之前,我们先来了解一下three.js是什么。three.js是一个用于开发WebGL的JavaScript库,它可以让你轻松创建3D场景和应用。只需要引入库,即可通过JavaScript和一系列简洁而易懂的API来操作3D对象,实现3D渲染。
three.js代码库是自由软件和开源软件,使用MIT许可证发布。three.js库由Ricardo Cabello在2010年首次发布,以前被称为mrdoob,是一个著名的WebGL开发者和设计师。
二、three.js demo分类
根据不同的应用场景和功能需求,我们可以将three.js demo分为以下几类:
- 场景展示类demo:这类demo通过创建各种3D对象,将它们放置在场景中,形成一个3D场景展示,常见的有立体几何体、3D地球、太阳系等。
- 交互类demo:这类demo在场景展示的基础上,加入了交互功能,常见的有可以操作的立方体、物理引擎、人物模型等。
- 游戏类demo:这类demo在交互的基础上,添加了游戏元素,常见的有射击游戏、飞行游戏、跑酷游戏等。
三、three.js demo代码解析
以下我们以three.js官方提供的地球demo为例,来详细解析代码。
var camera, scene, renderer;
var geometry, material, mesh;
init();
animate();
function init() {
// Camera
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 1;
// Scene
scene = new THREE.Scene();
// Geometry
geometry = new THREE.SphereGeometry( 0.5, 32, 32 );
// Material (texture)
material = new THREE.MeshBasicMaterial();
material.map = new THREE.TextureLoader().load( 'textures/earth.jpg' );
// Mesh (geometry + material)
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
// Renderer
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// Events
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
mesh.rotation.x += 0.002;
mesh.rotation.y += 0.005;
renderer.render( scene, camera );
}
四、代码解析
1. 初始化
代码从函数init()开始执行,初始化了场景、相机、几何体、材质 和渲染器等元素。相机默认放在z轴为1的位置,使场景内的元素可以在屏幕上看到。
// Camera
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 1;
// Scene
scene = new THREE.Scene();
// Geometry
geometry = new THREE.SphereGeometry( 0.5, 32, 32 );
// Material (texture)
material = new THREE.MeshBasicMaterial();
material.map = new THREE.TextureLoader().load( 'textures/earth.jpg' );
// Mesh (geometry + material)
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
// Renderer
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
2. 地球材质
代码中为地球创建了一个MeshBasicMaterial材质,这种材质会为模型提供最基本的着色方法,只考虑光照对模型颜色的影响,性能较好。
material = new THREE.MeshBasicMaterial();
material.map = new THREE.TextureLoader().load( 'textures/earth.jpg' );
3. 动画循环
通过requestAnimationFrame函数来实现动画循环,首先调用animate()函数,然后在每个帧中将地球网格沿x轴和y轴旋转。
function animate() {
requestAnimationFrame( animate );
mesh.rotation.x += 0.002;
mesh.rotation.y += 0.005;
renderer.render( scene, camera );
}
五、总结
three.js是一个强大的WebGL库,通过代码实现了类似于Unity和Unreal Engine等3D引擎的功能。通过上面的地球demo,我们可以对three.js的渲染流程及应用有一个初步的了解。同时,基于three.js的开源社区,在GitHub上有海量的demo和插件,可以为开发者提供更多的可复用组件,加快开发效率。