ThreeJS 入門如何渲染出第一個3D圖形
什么是ThreeJS？
Three.js 是一個用于在Web瀏覽器上創(chuàng)建和顯示交互式 3D 圖形的 JavaScript 庫心软。簡化了在 Web 上創(chuàng)建基于 WebGL 的 3D 圖形的過程郁轻。WebGL 是一種在 Web 瀏覽器中實現(xiàn)硬件加速的 3D 圖形渲染的技術(shù)赖阻。Three.js 通過封裝復雜的WebGL API掂恕，提供了一個更簡單的接口蹭越，使得我們能夠輕松地在瀏覽器中創(chuàng)建 3D 場景障本、模型、動畫和交互效果响鹃。
渲染一個 3D 圖形需要哪些步驟彼绷？
要渲染第一個 3D 圖形，需要以下幾個步驟：
- 創(chuàng)建場景 scene茴迁，使用 THREE.Scene 進行創(chuàng)建寄悯。
- 創(chuàng)建相機 camera，使用 THREE.PerspectiveCamera 進行創(chuàng)建堕义。
- 創(chuàng)建渲染對象（以立方體為例）猜旬，并添加到場景 scene 中。
- 創(chuàng)建渲染器 renderer倦卖，并進行場景渲染洒擦，使用THREE.WebGLRenderer 進行創(chuàng)建。調(diào)用渲染器 render 函數(shù)將場景 scene 和相機 camera 作為參數(shù)進行渲染怕膛。
// 插入一個跳轉(zhuǎn)地址熟嫩，方便查看完整代碼
創(chuàng)建場景
在 Three.js 中，使用 THREE.Scene 來創(chuàng)建 scene（場景）褐捻，scene包含了所有 3D 對象掸茅、光源和相機的容器。它是構(gòu)建和組織 3D 場景的基礎(chǔ)柠逞。
場景（THREE.Scene）類代表了一個虛擬的 3D 空間昧狮，其中可以包含各種對象，例如幾何體板壮、模型逗鸣、燈光等。通過將對象添加到場景中，可以在渲染過程中將它們呈現(xiàn)到屏幕上撒璧。
創(chuàng)建一個簡單的場景：
import * as THREE from 'three';
const scene = new THREE.Scene();
實例化后的 scene 對象提供一些列的API來對其中的 3D 對象進行管理透葛，如： scene.add(object: Object3D) 、scene.remove(object: Object3D), scene.traverse(callback: Function) 卿樱。還提供對 scene 進行設(shè)置和操作的 API 本文暫時未使用到 scene 中其他的API僚害，后續(xù)單獨寫篇文章進行介紹。
創(chuàng)建相機
在 Three.js 中殿如，camera（相機）是用于定義場景中的視角和觀察位置的對象贡珊。相機確定了渲染器如何將場景中的 3D 對象投影到屏幕上，決定了觀察者在場景中看到的內(nèi)容涉馁。使用相機來控制觀察者在場景中的位置和視角门岔。在 openGL 中相機的位置固定在（0,0,0）位置，所有的相機移動實際都是對場景中的所有對象進行矩陣變換烤送。
Three.js 提供了多種類型的相機寒随，常用的是透視相機（THREE.PerspectiveCamera）和正交相機（THREE.OrthographicCamera）。
- 透視相機（THREE.PerspectiveCamera）使用透視投影帮坚，模擬了人眼的視覺效果妻往。它具有視場角（FOV）、縱橫比试和、近剪裁面和遠剪裁面等屬性讯泣。視場角決定了場景在相機前方可見的范圍，縱橫比定義了視圖的寬高比阅悍，近剪裁面和遠剪裁面則定義了相機的可見范圍好渠。
- 正交相機（THREE.OrthographicCamera）使用正交投影，產(chǎn)生了一個沒有透視效果的平行投影节视。它具有左拳锚、右、上寻行、下霍掺、近、遠等屬性拌蜘，用于定義可見區(qū)域的范圍杆烁。
本文使用透視相機創(chuàng)建一個實例：
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
參數(shù)主要如下，THREE.PerspectiveCamera(fov, aspect, near, far)
- fov: 視場角拦坠，表示相機的視角張度连躏，單位是度。
- aspect: 縱橫比贞滨，表示渲染區(qū)域的寬高比。
- near： 近剪裁面的距離，表示相機能夠看到的最近距離晓铆，在近剪裁面之前的3D對象會被裁剪掉勺良。
- far： 遠剪裁面，表示相機能夠看到的最遠距離骄噪。在此之后的對象也會被裁剪掉尚困。
不用擔心，后續(xù)會專門寫篇文章進行詳細介紹兩相機之間的區(qū)別链蕊，什么是近剪裁面事甜、遠剪裁面以及其距離怎么算的。
創(chuàng)建渲染對象（立方體為）
創(chuàng)建一個正立方體：
// 創(chuàng)建綠色的立方體
// 創(chuàng)建立方體幾何體
const geometry = new THREE.BoxGeometry(1,1,1);
// 實例化基礎(chǔ)的材質(zhì)滔韵，顏色設(shè)置為綠色逻谦， rgb 每兩個十六進制單位分別表示一個基礎(chǔ)元色。
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 生成一個立方體網(wǎng)格對象陪蜻，傳入幾何體對象和顏色材質(zhì)對象
const cube = new THREE.Mesh(geometry, material);
// 將立方體網(wǎng)格對象添加到場景中
scene.add(cube);
這里涉及到三個新的基類分別是 THREE.BoxGeometry 邦马、 THREE.MeshBasicMaterial 、 THREE.Mesh
- THREE.BoxGeometry 立方幾何體宴卖，用于創(chuàng)建長方體或者立方體滋将。 ThreeJS 提供 8 種 Shape 類用于創(chuàng)建基本幾何體和自定義形狀。還提供一些可以擴展的基類症昏，我們可以在這個基類的基礎(chǔ)上進行其他封裝随闽。openGL 提供的圖元實際很基礎(chǔ)（點，線肝谭，線環(huán)掘宪，線帶，三角形分苇，三角扇添诉，三角帶，四邊形）医寿，ThreeJS 進行的大量封裝使得我們更好進行形狀生成栏赴。（_）以后再開篇進行詳細介紹。
- MeshBasicMaterial 基礎(chǔ)材質(zhì)靖秩，不受光照影響须眷，只顯示顏色。ThreeJS 一共提供了 7 種常用材質(zhì)對象以及特殊的幾種材質(zhì)比如：粒子材質(zhì)等沟突。
- Mesh 網(wǎng)格對象花颗，用于將幾何體與材質(zhì)結(jié)合起來。ThreeJS 提供 6 種網(wǎng)格對象支持不同的使用場景惠拭。
創(chuàng)建渲染器將 scene 渲染出來
創(chuàng)建一個 WebGLRenderer 渲染器渲染scene：
// 創(chuàng)建一個 webgl 渲染器
const renderer = new THREE.WebGLRenderer();
// 設(shè)置渲染器的 size
renderer.setSize(window.innerWidth, window.innerHeight);
// 綁定輸出位置
document.body.appendChild(renderer.domElement);
// 將 scene 渲染出來
renderer.render(scene, camera);
渲染器是 ThreeJS 的核心組件扩劝，將 scene 場景中的三維對象渲染到屏幕上庸论。ThreeJS 提供了三類常用的渲染器 WebGLRenderer 、 CanvasRenderer棒呛、SVGRenderer聂示。預計未來可能會支持 WebGPURenderer 現(xiàn)在 Chrome 已經(jīng)支持 WebGPU 了并且性能比 Webgl 更好一些（反正隔壁 babyIcon 已經(jīng)支持了v）。
渲染器主要行為大體如下:
- 創(chuàng)建渲染上下文
- 設(shè)置渲染參數(shù)
- 渲染 scene
- 輸出渲染結(jié)果到載體（通常都是canvas）
至此已經(jīng)能渲染一個立方體了簇秒，接下來補充一丟丟代碼讓立方體渲染起來鱼喉。
const rotateBox = () => {
// 創(chuàng)建 scene 場景
const scene = new THREE.Scene();
// 創(chuàng)建相機
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
// 設(shè)置相機的z位置為5 ，位置：（0趋观，0扛禽，5)
camera.position.z = 5;
// 創(chuàng)建綠色立方體
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ffa1 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 創(chuàng)建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 讓立方體渲染起來
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
};
完整代碼（我在 react 中運行），方便對每篇文章的 demo 進行管理以及ui交互皱坛。代碼也可以復制到到 HTML 中執(zhí)行額外添加一行 threejs庫的引入即可：
import React, { useEffect } from 'react';
import * as THREE from 'three';
export default function OneDay() {
const rotateBox = () => {
// 創(chuàng)建 scene 場景
const scene = new THREE.Scene();
// 創(chuàng)建相機
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
// 設(shè)置相機的z位置為5 编曼，位置：（0，0麸恍，5)
camera.position.z = 5;
// 創(chuàng)建綠色立方體
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ffa1 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 創(chuàng)建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 讓立方體渲染起來
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
};
useEffect(() => {
rotateBox();
}, []);
return <div id="container"></div>
}
立個 flag 后續(xù)持續(xù)學習更新 threejs 系列文章（每周一篇）灵巧，歡迎大家關(guān)注監(jiān)督 -
本文由mdnice多平臺發(fā)布
