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分為以下幾類：

1. 場景展示類demo：這類demo通過創建各種3D對象，將它們放置在場景中，形成一個3D場景展示，常見的有立體幾何體、3D地球、太陽系等。
2. 交互類demo：這類demo在場景展示的基礎上，加入了交互功能，常見的有可以操作的立方體、物理引擎、人物模型等。
3. 遊戲類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和插件，可以為開發者提供更多的可復用組件，加快開發效率。