Three.js引用和環(huán)境搭建過(guò)程詳解
1.文件包下載和目錄簡(jiǎn)介
1.1 文件包下載
a. 官方網(wǎng)站下載: 訪問(wèn) Three.js 的官方網(wǎng)站(threejs.org/)并點(diǎn)擊 "Download" 按鈕,下載最新版本的文件包。
b. GitHub倉(cāng)庫(kù)下載: 訪問(wèn) Three.js 的 GitHub 倉(cāng)庫(kù)(github.com/mrdoob/thre…)并點(diǎn)擊 "Code" 按鈕,選擇 "Download ZIP" 下載整個(gè)倉(cāng)庫(kù)。請(qǐng)注意,這種方式下載的文件包將包含一些額外的文件,如示例和文檔。
c. 使用npm安裝: 如果您更喜歡使用npm進(jìn)行包管理,可以通過(guò)執(zhí)行以下命令安裝Three.js:
npm install three
npm安裝后,如何引入three.js:
執(zhí)行import * as THREE from 'three';
,ES6語(yǔ)法引入three.js核心。
// 引入three.js import * as THREE from 'three';
npm安裝后,如何引入three.js其他擴(kuò)展庫(kù):
除了three.js核心庫(kù)以外,在threejs文件包中examples/jsm目錄下,你還可以看到各種不同功能的擴(kuò)展庫(kù)。
一般來(lái)說(shuō),你項(xiàng)目用到那個(gè)擴(kuò)展庫(kù),就引入那個(gè),用不到就不需要引入。
// 引入擴(kuò)展庫(kù)OrbitControls.js import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; // 引入擴(kuò)展庫(kù)GLTFLoader.js import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; // 擴(kuò)展庫(kù)引入——舊版本,比如122, 新版本路徑addons替換了examples/jsm import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
1.2 Three.js 目錄簡(jiǎn)介
下載three.js文件包解壓后,你可以看到如下目錄(不同版本會(huì)略有差異)。
對(duì)于開(kāi)發(fā)者而言,大家經(jīng)常接觸的是文檔docs和案例examples兩個(gè)文件夾,平時(shí)查看文檔,可以打開(kāi)文檔docs里面html文件,案例examples里面提供了海量threejs功能案例。
three.js-master └───build——src目錄下各個(gè)代碼模塊打包后的結(jié)果 │───three.js——開(kāi)發(fā)的時(shí)候.html文件中要引入的threejs引擎庫(kù),和引入jquery一樣,可以輔助瀏覽器調(diào)試 │───three.min.js——three.js壓縮后的結(jié)構(gòu)文件體積更小,可以部署項(xiàng)目的時(shí)候在.html中引入。 │ └───docs——Three.js API文檔文件 │───index.html——打開(kāi)該文件可以實(shí)現(xiàn)離線查看threejs API文檔 │ └───editor——Three.js的可視化編輯器,可以編輯3D場(chǎng)景 │───index.html——打開(kāi)應(yīng)用程序 │ └───docs——Three.js API文檔文件 │───index.html——打開(kāi)該文件可以實(shí)現(xiàn)離線查看threejs API文檔 │ └───examples——里面有大量的threejs案例,平時(shí)可以通過(guò)代碼編輯全局查找某個(gè)API、方法或?qū)傩詠?lái)定位到一個(gè)案例 │ └───src——Three.js引擎的各個(gè)模塊,可以通過(guò)閱讀源碼深度理解threejs引擎 │───index.html——打開(kāi)該文件可以實(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庫(kù),并通過(guò)main.js
文件鏈接了我們即將編寫(xiě)的腳本。
2.2 創(chuàng)建一個(gè)JavaScript文件
接下來(lái),創(chuàng)建一個(gè)名為main.js
的JavaScript文件。在這個(gè)文件中,我們將編寫(xiě)Three.js代碼來(lái)創(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)聽(tīng)器 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)聽(tīng)器,用于處理窗口尺寸變化,以確保渲染的場(chǎng)景始終適應(yīng)瀏覽器窗口大小。
2.2.2 添加一個(gè)立方體
接下來(lái),我們將在場(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à)循環(huán)
為了讓立方體動(dòng)起來(lái),我們需要?jiǎng)?chuàng)建一個(gè)動(dòng)畫(huà)循環(huán)。將以下代碼添加到main.js
文件:
// 動(dòng)畫(huà)循環(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); } // 開(kāi)始動(dòng)畫(huà)循環(huán) animate();
這段代碼定義了一個(gè)名為animate
的函數(shù),它使用requestAnimationFrame
來(lái)實(shí)現(xiàn)動(dòng)畫(huà)循環(huán)。在每次循環(huán)中,我們旋轉(zhuǎn)立方體,并使用渲染器渲染場(chǎng)景。
最后,在支持WebGL的瀏覽器中打開(kāi)。你將看到一個(gè)旋轉(zhuǎn)的綠色立方體。
以上就是Three.js引用和環(huán)境搭建過(guò)程詳解的詳細(xì)內(nèi)容,更多關(guān)于Three.js引用環(huán)境搭建的資料請(qǐng)關(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微信小程序之前臺(tái)循環(huán)數(shù)據(jù)綁定
這篇文章主要介紹了微信小程序之前臺(tái)循環(huán)數(shù)據(jù)綁定的相關(guān)資料,這里提供實(shí)例幫助大家學(xué)習(xí)理解這部分內(nèi)容,需要的朋友可以參考下2017-08-08Skypack布局前端基建實(shí)現(xiàn)過(guò)程詳解
這篇文章主要為大家介紹了Skypack布局前端基建過(guò)程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07JS前端設(shè)計(jì)模式之發(fā)布訂閱模式詳解
這篇文章主要為大家介紹了JS前端設(shè)計(jì)模式之發(fā)布訂閱模式詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08利用js實(shí)現(xiàn)簡(jiǎn)單開(kāi)關(guān)燈代碼
這篇文章主要分享的是如何利用js實(shí)現(xiàn)簡(jiǎn)單開(kāi)關(guān)燈代碼,下面文字圍繞js實(shí)現(xiàn)簡(jiǎn)單開(kāi)關(guān)燈的相關(guān)資料展開(kāi)具體內(nèi)容,需要的朋友可以參考以下,希望對(duì)大家又所幫助2021-11-11