什么是ThreeJS？

Three.js 是一個用于在Web瀏覽器上創(chuàng)建和顯示交互式 3D 圖形的 JavaScript 庫。簡化了在 Web 上創(chuàng)建基于 WebGL 的 3D 圖形的過程。WebGL 是一種在 Web 瀏覽器中實現(xiàn)硬件加速的 3D 圖形渲染的技術。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)建。調用渲染器 render 函數將場景 scene 和相機 camera 作為參數進行渲染。

// 插入一個跳轉地址，方便查看完整代碼

創(chuàng)建場景

在 Three.js 中，使用 THREE.Scene 來創(chuàng)建 scene（場景），scene包含了所有 3D 對象、光源和相機的容器。它是構建和組織 3D 場景的基礎。

場景（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 進行設置和操作的 API 本文暫時未使用到 scene 中其他的API，后續(xù)單獨寫篇文章進行介紹。

創(chuàng)建相機

在 Three.js 中，camera（相機）是用于定義場景中的視角和觀察位置的對象。相機確定了渲染器如何將場景中的 3D 對象投影到屏幕上，決定了觀察者在場景中看到的內容。使用相機來控制觀察者在場景中的位置和視角。在 openGL 中相機的位置固定在（0,0,0）位置，所有的相機移動實際都是對場景中的所有對象進行矩陣變換。
Three.js 提供了多種類型的相機，常用的是透視相機（THREE.PerspectiveCamera）和正交相機（THREE.OrthographicCamera）。

• 透視相機（THREE.PerspectiveCamera）使用透視投影，模擬了人眼的視覺效果。它具有視場角（FOV）、縱橫比、近剪裁面和遠剪裁面等屬性。視場角決定了場景在相機前方可見的范圍，縱橫比定義了視圖的寬高比，近剪裁面和遠剪裁面則定義了相機的可見范圍。
• 正交相機（THREE.OrthographicCamera）使用正交投影，產生了一個沒有透視效果的平行投影。它具有左、右、上、下、近、遠等屬性，用于定義可見區(qū)域的范圍。

本文使用透視相機創(chuàng)建一個實例：

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

參數主要如下，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);
// 實例化基礎的材質，顏色設置為綠色， rgb 每兩個十六進制單位分別表示一個基礎元色。
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 生成一個立方體網格對象，傳入幾何體對象和顏色材質對象
const cube = new THREE.Mesh(geometry, material);
// 將立方體網格對象添加到場景中
scene.add(cube);

這里涉及到三個新的基類分別是 THREE.BoxGeometry 、 THREE.MeshBasicMaterial 、 THREE.Mesh

• THREE.BoxGeometry 立方幾何體，用于創(chuàng)建長方體或者立方體。 ThreeJS 提供 8 種 Shape 類用于創(chuàng)建基本幾何體和自定義形狀。還提供一些可以擴展的基類，我們可以在這個基類的基礎上進行其他封裝。openGL 提供的圖元實際很基礎（點，線，線環(huán)，線帶，三角形，三角扇，三角帶，四邊形），ThreeJS 進行的大量封裝使得我們更好進行形狀生成。（^_^）以后再開篇進行詳細介紹。
• MeshBasicMaterial 基礎材質，不受光照影響，只顯示顏色。ThreeJS 一共提供了 7 種常用材質對象以及特殊的幾種材質比如：粒子材質等。
• Mesh 網格對象，用于將幾何體與材質結合起來。ThreeJS 提供 6 種網格對象支持不同的使用場景。

創(chuàng)建渲染器將 scene 渲染出來

創(chuàng)建一個 WebGLRenderer 渲染器渲染scene：

// 創(chuàng)建一個 webgl 渲染器
const renderer = new THREE.WebGLRenderer();
// 設置渲染器的 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 已經支持 WebGPU 了并且性能比 Webgl 更好一些（反正隔壁 babyIcon 已經支持了^v^）。
渲染器主要行為大體如下:

• 創(chuàng)建渲染上下文
• 設置渲染參數
• 渲染 scene
• 輸出渲染結果到載體（通常都是canvas）

至此已經能渲染一個立方體了，接下來補充一丟丟代碼讓立方體渲染起來。

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
    );
    // 設置相機的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
    );
    // 設置相機的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>
}

以上就是ThreeJS 入門如何渲染出第一個3D圖形的詳細內容，更多關于ThreeJS渲染3D圖形的資料請關注腳本之家其它相關文章！

最新評論