three.js demo详解

一、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和插件，可以为开发者提供更多的可复用组件，加快开发效率。

原创文章，作者：FYFIN，如若转载，请注明出处：https://www.506064.com/n/333160.html