快捷導(dǎo)航

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

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

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

1.文件包下載和目錄簡介

1.1 文件包下載

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

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

c. 使用npm安裝： 如果您更喜歡使用npm進行包管理，可以通過執(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其他擴展庫：

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

一般來說，你項目用到那個擴展庫，就引入那個，用不到就不需要引入。

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

1.2 Three.js 目錄簡介

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

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

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

2. 環(huán)境搭建

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

首先，創(chuàng)建一個名為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>

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

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

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

2.2.1 初始化Three.js

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

// 創(chuàng)建一個場景
const scene = new THREE.Scene();
// 創(chuàng)建一個透視相機
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 創(chuàng)建一個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)建了一個場景、一個透視相機和一個WebGL渲染器。同時，我們還添加了一個事件監(jiān)聽器，用于處理窗口尺寸變化，以確保渲染的場景始終適應(yīng)瀏覽器窗口大小。

2.2.2 添加一個立方體

接下來，我們將在場景中添加一個簡單的立方體。將以下代碼添加到main.js文件：

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

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

2.2.3 動畫循環(huán)

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

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

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

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