Three.js引用和環(huán)境搭建過程詳解
1.文件包下載和目錄簡介
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" 下載整個倉庫。請注意，這種方式下載的文件包將包含一些額外的文件，如示例和文檔。
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ò)展庫。
一般來說，你項目用到那個擴(kuò)展庫，就引入那個，用不到就不需要引入。
// 引入擴(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 目錄簡介
下載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)建一個透視相機(jī)
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)建了一個場景、一個透視相機(jī)和一個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è)置相機(jī)位置
camera.position.z = 5;
這段代碼創(chuàng)建了一個立方體幾何體、一個綠色的基本材質(zhì)，并將它們組合成一個立方體網(wǎng)格。然后，我們將立方體添加到場景中，并設(shè)置相機(jī)的位置。
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)的綠色立方體。
以上就是Three.js引用和環(huán)境搭建過程詳解的詳細(xì)內(nèi)容，更多關(guān)于Three.js引用環(huán)境搭建的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
axios進(jìn)度條onDownloadProgress函數(shù)total參數(shù)undefined解決分析
這篇文章主要介紹了axios進(jìn)度條onDownloadProgress函數(shù)total參數(shù)undefined解決分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要為大家介紹了JS對象創(chuàng)建與繼承的匯總梳理，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了微信小程序之前臺循環(huán)數(shù)據(jù)綁定的相關(guān)資料,這里提供實例幫助大家學(xué)習(xí)理解這部分內(nèi)容，需要的朋友可以參考下2017-08-08
這篇文章主要介紹了微信小程序 form組件詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要為大家介紹了Skypack布局前端基建過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要為大家介紹了JS前端設(shè)計模式之發(fā)布訂閱模式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要為大家介紹了JavaScript集成公式編輯器示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要為大家介紹了WebAssembly使用方法研究,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要分享的是如何利用js實現(xiàn)簡單開關(guān)燈代碼，下面文字圍繞js實現(xiàn)簡單開關(guān)燈的相關(guān)資料展開具體內(nèi)容,需要的朋友可以參考以下，希望對大家又所幫助2021-11-11
這篇文章主要介紹了JavaScript事件委托原理,?事件委托也稱為事件代理。就是利用事件冒泡，把子元素的事件都綁定到父元素上。如果子元素阻止了事件冒泡，那么委托就無法實現(xiàn),下面我們一起來學(xué)習(xí)文章的具體詳細(xì)內(nèi)容吧2021-12-12