Three.js引用和環(huán)境搭建過程詳解

更新時(shí)間：2023年05月11日 14:10:45 作者：士必弘毅

這篇文章主要為大家介紹了Three.js引用和環(huán)境搭建過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

1.文件包下載和目錄簡(jiǎn)介

1.1 文件包下載

a. 官方網(wǎng)站下載： 訪問 Three.js 的官方網(wǎng)站（threejs.org/）并點(diǎn)擊 "Download" 按鈕，下載最新版本的文件包。

b. GitHub倉庫下載： 訪問 Three.js 的 GitHub 倉庫（github.com/mrdoob/thre…）并點(diǎn)擊 "Code" 按鈕，選擇 "Download ZIP" 下載整個(gè)倉庫。請(qǐng)注意，這種方式下載的文件包將包含一些額外的文件，如示例和文檔。

c. 使用npm安裝： 如果您更喜歡使用npm進(jìn)行包管理，可以通過執(zhí)行以下命令安裝Three.js：

npm install three

npm安裝后，如何引入three.js：

執(zhí)行import * as THREE from 'three';,ES6語法引入three.js核心。

// 引入three.js
import * as THREE from 'three';

npm安裝后，如何引入three.js其他擴(kuò)展庫：

除了three.js核心庫以外，在threejs文件包中examples/jsm目錄下，你還可以看到各種不同功能的擴(kuò)展庫。

一般來說，你項(xiàng)目用到那個(gè)擴(kuò)展庫，就引入那個(gè)，用不到就不需要引入。

// 引入擴(kuò)展庫OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 引入擴(kuò)展庫GLTFLoader.js
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
// 擴(kuò)展庫引入——舊版本，比如122, 新版本路徑addons替換了examples/jsm
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

1.2 Three.js 目錄簡(jiǎn)介

下載three.js文件包解壓后，你可以看到如下目錄(不同版本會(huì)略有差異)。

對(duì)于開發(fā)者而言，大家經(jīng)常接觸的是文檔docs和案例examples兩個(gè)文件夾，平時(shí)查看文檔，可以打開文檔docs里面html文件，案例examples里面提供了海量threejs功能案例。

three.js-master
└───build——src目錄下各個(gè)代碼模塊打包后的結(jié)果
    │───three.js——開發(fā)的時(shí)候.html文件中要引入的threejs引擎庫，和引入jquery一樣，可以輔助瀏覽器調(diào)試
    │───three.min.js——three.js壓縮后的結(jié)構(gòu)文件體積更小，可以部署項(xiàng)目的時(shí)候在.html中引入。
    │
└───docs——Three.js API文檔文件
    │───index.html——打開該文件可以實(shí)現(xiàn)離線查看threejs API文檔
    │
└───editor——Three.js的可視化編輯器，可以編輯3D場(chǎng)景
    │───index.html——打開應(yīng)用程序
    │
└───docs——Three.js API文檔文件
    │───index.html——打開該文件可以實(shí)現(xiàn)離線查看threejs API文檔
    │
└───examples——里面有大量的threejs案例，平時(shí)可以通過代碼編輯全局查找某個(gè)API、方法或?qū)傩詠矶ㄎ坏揭粋€(gè)案例
    │
└───src——Three.js引擎的各個(gè)模塊，可以通過閱讀源碼深度理解threejs引擎
    │───index.html——打開該文件可以實(shí)現(xiàn)離線查看threejs API文檔
    │
└───utils——一些輔助工具
    │───\utils\exporters\blender——blender導(dǎo)出threejs文件的插件

2. 環(huán)境搭建

2.1 創(chuàng)建一個(gè)HTML文件

首先，創(chuàng)建一個(gè)名為index.html的HTML文件。然后，在文件中添加以下基本HTML結(jié)構(gòu)：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Three.js環(huán)境搭建</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 src="main.js"></script>
</body>
</html>

在這個(gè)HTML文件中，我們加載了Three.js庫，并通過main.js文件鏈接了我們即將編寫的腳本。

2.2 創(chuàng)建一個(gè)JavaScript文件

接下來，創(chuàng)建一個(gè)名為main.js的JavaScript文件。在這個(gè)文件中，我們將編寫Three.js代碼來創(chuàng)建一個(gè)基本的3D場(chǎng)景。

2.2.1 初始化Three.js

在main.js文件中，添加以下代碼以初始化Three.js：

// 創(chuàng)建一個(gè)場(chǎng)景
const scene = new THREE.Scene();
// 創(chuàng)建一個(gè)透視相機(jī)
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 創(chuàng)建一個(gè)WebGL渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 添加窗口尺寸調(diào)整事件監(jiān)聽器
window.addEventListener('resize', function() {
  const width = window.innerWidth;
  const height = window.innerHeight;
  renderer.setSize(width, height);
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
});

這段代碼創(chuàng)建了一個(gè)場(chǎng)景、一個(gè)透視相機(jī)和一個(gè)WebGL渲染器。同時(shí)，我們還添加了一個(gè)事件監(jiān)聽器，用于處理窗口尺寸變化，以確保渲染的場(chǎng)景始終適應(yīng)瀏覽器窗口大小。

2.2.2 添加一個(gè)立方體

接下來，我們將在場(chǎng)景中添加一個(gè)簡(jiǎn)單的立方體。將以下代碼添加到main.js文件：

// 創(chuàng)建一個(gè)立方體幾何體
const geometry = new THREE.BoxGeometry();
// 創(chuàng)建一個(gè)基本材質(zhì)
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 創(chuàng)建一個(gè)立方體網(wǎng)格（Mesh）
const cube = new THREE.Mesh(geometry, material);
// 將立方體添加到場(chǎng)景中
scene.add(cube);
// 設(shè)置相機(jī)位置
camera.position.z = 5;

這段代碼創(chuàng)建了一個(gè)立方體幾何體、一個(gè)綠色的基本材質(zhì)，并將它們組合成一個(gè)立方體網(wǎng)格。然后，我們將立方體添加到場(chǎng)景中，并設(shè)置相機(jī)的位置。

2.2.3 動(dòng)畫循環(huán)

為了讓立方體動(dòng)起來，我們需要?jiǎng)?chuàng)建一個(gè)動(dòng)畫循環(huán)。將以下代碼添加到main.js文件：

// 動(dòng)畫循環(huán)函數(shù)
function animate() {
  requestAnimationFrame(animate);
  // 旋轉(zhuǎn)立方體
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  // 渲染場(chǎng)景
  renderer.render(scene, camera);
}
// 開始動(dòng)畫循環(huán)
animate();

這段代碼定義了一個(gè)名為animate的函數(shù)，它使用requestAnimationFrame來實(shí)現(xiàn)動(dòng)畫循環(huán)。在每次循環(huán)中，我們旋轉(zhuǎn)立方體，并使用渲染器渲染場(chǎng)景。

最后，在支持WebGL的瀏覽器中打開。你將看到一個(gè)旋轉(zhuǎn)的綠色立方體。