Three.js環(huán)境搭建與開發(fā)初識(shí)(附詳細(xì)代碼)
更新時(shí)間：2026年03月21日 09:17:59 作者：前端王校長
Three.js作為基于WebGL的JavaScript 3D庫,憑借其易用性和強(qiáng)大的功能,已成為前端開發(fā)者實(shí)現(xiàn)3D場景的主流選擇,這篇文章主要介紹了Three.js環(huán)境搭建與開發(fā)的相關(guān)資料,需要的朋友可以參考下
概述
本文檔將詳細(xì)介紹如何搭建ThreeJS開發(fā)環(huán)境以及創(chuàng)建您的第一個(gè)ThreeJS應(yīng)用程序。通過本文檔，您將學(xué)會(huì)：
- 如何安裝和配置ThreeJS開發(fā)環(huán)境
- 如何創(chuàng)建一個(gè)簡單的3D立方體并讓它旋轉(zhuǎn)
- 如何將ThreeJS與Vue和React框架集成
第一部分：環(huán)境搭建與第一個(gè)應(yīng)用
1. 初始化項(xiàng)目
要?jiǎng)?chuàng)建一個(gè)ThreeJS項(xiàng)目，首先需要初始化一個(gè)新的npm項(xiàng)目并安裝必要的依賴：
npm create vite@latest my-threejs-app cd my-threejs-app npm install npm install three
這將創(chuàng)建一個(gè)基于Vite的新項(xiàng)目，并安裝ThreeJS作為依賴項(xiàng)。
2. 項(xiàng)目結(jié)構(gòu)
典型的ThreeJS項(xiàng)目結(jié)構(gòu)如下：
my-threejs-app/ ├── public/ │ └── css/ │ └── style.css ├── src/ │ └── main.js ├── index.html ├── package.json └── vite.config.js
3. HTML文件配置
在index.html中，我們需要設(shè)置基本的HTML結(jié)構(gòu)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" rel="external nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<link rel="stylesheet" href="css/style.css" rel="external nofollow" />
</head>
<body>
<div id="app"></div>
<script type="module" src="src/main-mk.js"></script>
</body>
</html>
注意：我們引入了CSS樣式表來確保Canvas元素正確顯示。
4. CSS樣式配置
在public/css/style.css中設(shè)置基本樣式：
*{
margin: 0;
padding: 0;
}
canvas{
display: block;
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
}
這些樣式確保Canvas元素占據(jù)整個(gè)瀏覽器窗口且沒有默認(rèn)的邊距。
5. 核心JavaScript代碼
這是ThreeJS應(yīng)用的核心代碼（在src/main-mk.js中）：
import * as THREE from 'three';
// 創(chuàng)建場景
const scene = new THREE.Scene();
// 修改場景背景色
scene.background = new THREE.Color(0xeeeeee);
// 創(chuàng)建透視相機(jī)
const camera = new THREE.PerspectiveCamera(
45, // 視角
window.innerWidth / window.innerHeight, // 寬高比
0.1, // 近平面
10000, // 遠(yuǎn)平面
)
// 創(chuàng)建WebGL渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 創(chuàng)建幾何體 - 盒子幾何體
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 創(chuàng)建材質(zhì) - 基礎(chǔ)網(wǎng)格材質(zhì)
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 創(chuàng)建網(wǎng)格對象
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 設(shè)置相機(jī)位置
camera.position.z = 5;
// 動(dòng)畫循環(huán)函數(shù)
function animate() {
requestAnimationFrame(animate);
// 讓立方體持續(xù)旋轉(zhuǎn)
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// 渲染場景
renderer.render(scene, camera);
}
// 啟動(dòng)動(dòng)畫循環(huán)
animate()
這段代碼包含了ThreeJS應(yīng)用的三個(gè)核心組件：
- 場景（Scene）：所有3D對象的容器
- 相機(jī)（Camera）：定義觀察者視角
- 渲染器（Renderer）：負(fù)責(zé)將場景和相機(jī)組合起來渲染為圖像
6. 項(xiàng)目的package.json配置
{
"name": "01-startapp",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"devDependencies": {
"vite": "^4.3.9"
},
"dependencies": {
"three": "^0.153.0"
}
}
第二部分：與Vue框架集成
1. Vue項(xiàng)目配置
當(dāng)將ThreeJS與Vue集成時(shí)，需要在Vue項(xiàng)目中安裝額外的依賴：
{
"name": "threejsvue",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"three": "^0.153.0",
"vue": "^3.2.47"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.1.0",
"vite": "^4.3.9"
}
}
2. 在Vue組件中使用ThreeJS
在Vue的App.vue文件中可以直接集成ThreeJS代碼：
<script setup>
// 導(dǎo)入threejs
import * as THREE from "three";
// 創(chuàng)建場景
const scene = new THREE.Scene();
// 創(chuàng)建相機(jī)
const camera = new THREE.PerspectiveCamera(
45, // 視角
window.innerWidth / window.innerHeight, // 寬高比
0.1, // 近平面
1000 // 遠(yuǎn)平面
);
// 創(chuàng)建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 創(chuàng)建幾何體
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 創(chuàng)建材質(zhì)
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 創(chuàng)建網(wǎng)格
const cube = new THREE.Mesh(geometry, material);
// 將網(wǎng)格添加到場景中
scene.add(cube);
// 設(shè)置相機(jī)位置
camera.position.z = 5;
camera.lookAt(0, 0, 0);
// 渲染函數(shù)
function animate() {
requestAnimationFrame(animate);
// 旋轉(zhuǎn)
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// 渲染
renderer.render(scene, camera);
}
animate();
</script>
<template>
<div></div>
</template>
<style>
* {
margin: 0;
padding: 0;
}
canvas {
display: block;
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
}
</style>
第三部分：與React框架集成
1. React項(xiàng)目配置
當(dāng)將ThreeJS與React集成時(shí)，需要在React項(xiàng)目中安裝相應(yīng)的依賴：
{
"name": "react3d",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"three": "^0.153.0"
},
"devDependencies": {
"@types/react": "^18.0.37",
"@types/react-dom": "^18.0.11",
"@vitejs/plugin-react": "^4.0.0",
"eslint": "^8.38.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.3.4",
"vite": "^4.3.9"
}
}
2. 在React組件中使用ThreeJS
在React的App.jsx文件中可以這樣集成ThreeJS：
import { useState,useEffect ,Component} from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
// 導(dǎo)入threejs
import * as THREE from "three";
import './App.css'
class App extends Component{
render(){
return <div></div>
}
componentDidMount(){
// 創(chuàng)建場景
const scene = new THREE.Scene();
// 創(chuàng)建相機(jī)
const camera = new THREE.PerspectiveCamera(
45, // 視角
window.innerWidth / window.innerHeight, // 寬高比
0.1, // 近平面
1000 // 遠(yuǎn)平面
);
// 創(chuàng)建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 創(chuàng)建幾何體
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 創(chuàng)建材質(zhì)
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 創(chuàng)建網(wǎng)格
const cube = new THREE.Mesh(geometry, material);
// 將網(wǎng)格添加到場景中
scene.add(cube);
// 設(shè)置相機(jī)位置
camera.position.z = 5;
camera.lookAt(0, 0, 0);
// 渲染函數(shù)
function animate() {
requestAnimationFrame(animate);
// 旋轉(zhuǎn)
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// 渲染
renderer.render(scene, camera);
}
animate();
}
}
export default App
總結(jié)
通過以上步驟，我們已經(jīng)成功搭建了ThreeJS開發(fā)環(huán)境，并創(chuàng)建了獨(dú)立運(yùn)行的ThreeJS應(yīng)用以及與Vue和React框架集成的應(yīng)用。ThreeJS的三個(gè)核心概念——場景、相機(jī)和渲染器是構(gòu)建任何3D應(yīng)用的基礎(chǔ)，理解它們的作用和關(guān)系對于后續(xù)學(xué)習(xí)非常重要。
無論是在純JavaScript項(xiàng)目還是在現(xiàn)代前端框架（Vue、React）中，ThreeJS的基本使用方法都是一致的，只是集成方式略有不同。掌握了這些基礎(chǔ)知識(shí)后，您可以進(jìn)一步探索ThreeJS的更多功能，如光照、材質(zhì)、紋理等高級(jí)特性。
到此這篇關(guān)于Three.js環(huán)境搭建與開發(fā)初識(shí)的文章就介紹到這了,更多相關(guān)Three.js環(huán)境搭建與開發(fā)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
filter是new一個(gè)新的array，這篇文章主要介紹了javascipt filter過濾介紹及使用,需要的朋友可以參考下2014-09-09
使用?JavaScript?Promise?讀取?Github?用戶數(shù)據(jù)
這篇文章主要介紹了使用JavaScript?Promise讀取Github用戶數(shù)據(jù)，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)樓層滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
用戶登錄時(shí),后端會(huì)返回一個(gè)token,并且保存到瀏覽器的localstorage中,可以根據(jù)localstorage中的token判斷用戶是否登錄,所以當(dāng)發(fā)送請求時(shí),都要攜帶token給后端進(jìn)行判斷,本文給大家介紹了Axios設(shè)置token請求頭的三種方式,需要的朋友可以參考下2024-02-02
Bootstrap頁面標(biāo)題Page Header的實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了Bootstrap頁面標(biāo)題Page Header的實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
基于BootStrap Metronic開發(fā)框架經(jīng)驗(yàn)小結(jié)【九】實(shí)現(xiàn)Web頁面內(nèi)容的打印預(yù)覽和保存操作
本篇文章主要介紹如何實(shí)現(xiàn)Web頁面內(nèi)容的打印預(yù)覽和保存操作的相關(guān)知識(shí)，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
下面小編就為大家?guī)硪黄猨s處理包含中文的字符串實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
今天小編就為大家分享一篇layui富文本編輯器前端無法取值的解決方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
整理Javascript數(shù)組學(xué)習(xí)筆記
整理Javascript數(shù)組學(xué)習(xí)筆記,之前一系列的文章是跟我學(xué)習(xí)Javascript，本文就是進(jìn)一步學(xué)習(xí)javascript數(shù)組，希望大家繼續(xù)關(guān)注2015-11-11
javascript如何操作HTML下拉列表標(biāo)簽
下拉列表在網(wǎng)站前端開發(fā)中經(jīng)常遇到，如何操作html下拉列表標(biāo)簽，本篇文章給大家詳解javascript如何操作html下拉列表標(biāo)簽，需要的朋友可以來參考下2015-08-08