Three.js - 打開Web 3D世界的大門

文章目錄

- 前言
- 一、Three.js 的起源與背景
- 二、Three.js 的特點
- 三、Three.js 的核心組件詳解
- 四、實際應用案例
- 結語

前言

Three.js 是一個基于JavaScript的庫，它極大地簡化了使用WebGL創建3D圖形的過程。通過封裝復雜的WebGL API，Three.js為開發者提供了一個更加友好和高效的開發環境，使得即使是對3D編程不太熟悉的開發者也能夠快速上手，并創造出令人印象深刻的交互式3D內容。

一、Three.js 的起源與背景

Three.js 是由一位西班牙的開發者 Ricardo Cabello（又名 Mr.doob）于2010年發起的項目。其初衷是為了簡化WebGL（Web Graphics Library）的使用難度，因為直接使用WebGL進行3D渲染需要大量的代碼編寫，并且API相對復雜。Three.js通過封裝WebGL的功能，提供了一個更加友好、易于使用的接口，使得更多的開發者可以快速上手并創造出令人驚艷的3D內容。

二、Three.js 的特點

易用性：Three.js 提供了豐富的文檔和支持，擁有龐大的社區，對于初學者來說是一個很好的入門選擇。
跨平臺兼容性：由于它是基于WebGL構建的，因此可以在任何支持HTML5和WebGL的瀏覽器上運行，無需安裝額外的插件。
廣泛的適用性：無論是游戲開發、虛擬現實應用還是數據可視化，Three.js都能提供強有力的支持。
性能優化：隨著版本迭代，Three.js不斷改進性能，確保即使是在處理復雜場景時也能保持流暢。

三、Three.js 的核心組件詳解

場景（Scene）

場景是所有3D對象、光源和其他元素的容器。在Three.js中，我們首先需要創建一個場景對象，然后將其他組件添加到這個場景中。

const scene = new THREE.Scene();

相機（Camera）

相機決定了用戶從哪個視角觀看場景。Three.js提供了多種類型的相機，如透視相機（PerspectiveCamera），它模仿人眼的視覺效果，適合大多數應用場景；還有正交相機（OrthographicCamera），它用于創建技術圖紙或UI元素等不需要透視效果的內容。

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

渲染器（Renderer）

渲染器負責將場景中的內容繪制到HTML頁面上的canvas元素中。Three.js支持多種渲染器，但最常用的是WebGLRenderer，因為它提供了最好的性能和兼容性。

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

物體（Object）

物體是由幾何形狀（Geometry）和材質（Material）組成的3D模型。Three.js內置了許多常見的幾何形狀，比如球體、立方體、圓柱體等，并且可以通過自定義幾何體來實現更復雜的設計。

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

動畫與交互

Three.js不僅限于靜態圖像，還支持動畫和用戶交互。你可以使用requestAnimationFrame循環更新場景，或者監聽鼠標事件來響應用戶的操作。

function animate() {requestAnimationFrame(animate);// 更新物體的位置或旋轉等屬性cube.rotation.x += 0.01;cube.rotation.y += 0.01;renderer.render(scene, camera);
}
animate();

四、實際應用案例

案例1：旋轉的立方體

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Simple FPS Game</title><style>body {margin: 0;}canvas {display: block;}</style>
</head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script><script>// 創建場景var scene = new THREE.Scene();// 創建相機var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.z = 5;// 創建渲染器var renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 創建一個立方體幾何體var geometry = new THREE.BoxGeometry();// 創建一個材質var material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });// 創建一個網格（幾何體 + 材質）var cube = new THREE.Mesh(geometry, material);scene.add(cube);// 渲染函數function animate() {requestAnimationFrame(animate);// 旋轉立方體cube.rotation.x += 0.01;cube.rotation.y += 0.01;renderer.render(scene, camera);}// 開始動畫循環animate();// 處理窗口大小調整window.addEventListener('resize', function () {var width = window.innerWidth;var height = window.innerHeight;renderer.setSize(width, height);camera.aspect = width / height;camera.updateProjectionMatrix();});</script>
</body></html>

案例2：軌道運動動畫

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Simple FPS Game</title><style>body {margin: 0;}canvas {display: block;}</style>
</head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script><script>// 初始化場景、相機和渲染器var scene = new THREE.Scene();var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);var renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 創建球體并設置初始位置function createOrbitingSphere(radius, distance, speed) {var geometry = new THREE.SphereGeometry(radius, 32, 32);var material = new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff });var sphere = new THREE.Mesh(geometry, material);sphere.position.x = distance;sphere.distance = distance;sphere.angle = 0;sphere.speed = speed;scene.add(sphere);return sphere;}var spheres = [];for (var i = 0; i < 10; i++) {spheres.push(createOrbitingSphere(0.5 + Math.random(), 5 + i * 2, 0.005 + Math.random() * 0.01));}camera.position.z = 20;function animate() {requestAnimationFrame(animate);spheres.forEach(function (sphere) {sphere.angle += sphere.speed;sphere.position.x = Math.cos(sphere.angle) * sphere.distance;sphere.position.y = Math.sin(sphere.angle) * sphere.distance;});renderer.render(scene, camera);}animate();// 窗口調整事件處理window.addEventListener('resize', function () {var width = window.innerWidth;var height = window.innerHeight;renderer.setSize(width, height);camera.aspect = width / height;camera.updateProjectionMatrix();});</script>
</body></html>

案例3：隨機生成的粒子系統

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Simple FPS Game</title><style>body {margin: 0;}canvas {display: block;}</style>
</head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script><script>var scene = new THREE.Scene();var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);var renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);camera.position.z = 50;var particlesCount = 5000;var particlesGeometry = new THREE.BufferGeometry();var particlesPositions = new Float32Array(particlesCount * 3);for (var i = 0; i < particlesCount * 3; i++) {particlesPositions[i] = (Math.random() - 0.5) * 100;}particlesGeometry.setAttribute('position', new THREE.BufferAttribute(particlesPositions, 3));var particlesMaterial = new THREE.PointsMaterial({ color: 0x00ff00 });var particles = new THREE.Points(particlesGeometry, particlesMaterial);scene.add(particles);function animateParticles() {var positions = particles.geometry.attributes.position.array;for (var i = 0; i < positions.length; i += 3) {positions[i + 1] -= 0.1;if (positions[i + 1] < -50) {positions[i + 1] = 50;}}particles.geometry.attributes.position.needsUpdate = true;}function animate() {requestAnimationFrame(animate);animateParticles();renderer.render(scene, camera);}animate();// 窗口調整事件處理window.addEventListener('resize', function () {var width = window.innerWidth;var height = window.innerHeight;renderer.setSize(width, height);camera.aspect = width / height;camera.updateProjectionMatrix();});</script>
</body></html>