1. 安裝 Node.js 和 npm
首先，需要在您的計(jì)算機(jī)上安裝 Node.js 和 npm。Node.js 是一個(gè) JavaScript 運(yùn)行環(huán)境，而 npm 是一個(gè) JavaScript 包管理器。npm 會隨 Node.js 一起安裝，因此只需要安裝 Node.js 即可。從 Node.js 的官方網(wǎng)站(https://nodejs.org)下載并安裝適合您操作系統(tǒng)的版本。
2. 創(chuàng)建一個(gè)新的項(xiàng)目
在您希望創(chuàng)建項(xiàng)目的目錄下，手動創(chuàng)建一個(gè)文件夾，在終端(命令提示符)中輸入：cd 空格 把文件夾拖進(jìn)去，回車，這里假設(shè)項(xiàng)目名稱為 "threejs-project"，進(jìn)入新創(chuàng)建的項(xiàng)目文件夾：
cd threejs-project
3. 初始化 npm
在項(xiàng)目文件夾中，使用以下命令來初始化 npm。這將創(chuàng)建一個(gè)新的 package.json 文件，這個(gè)文件描述了項(xiàng)目的一些基本信息以及依賴關(guān)系：
npm init -y
-y 參數(shù)意味著接受所有默認(rèn)選項(xiàng)。
4. 安裝 three.js
使用以下命令來安裝 three.js：
npm install three
這將把 three.js 安裝到項(xiàng)目的 node_modules 文件夾中，并將其添加到 package.json 文件的依賴項(xiàng)中。
5. 創(chuàng)建 index.html 文件
在項(xiàng)目文件夾中，創(chuàng)建一個(gè)名為 index.html 的新文件。這將是您的項(xiàng)目的主頁。以下是一個(gè)基本的 HTML 模板：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js project</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="app.js"></script>
</body>
</html>
6. 創(chuàng)建 app.js 文件
在項(xiàng)目文件夾中，創(chuàng)建一個(gè)名為 app.js 的新文件。這將是您的項(xiàng)目的主 JavaScript 文件。您可以在這個(gè)文件中編寫您的 three.js 代碼。下面是一個(gè)簡單的示例：
import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
const animate = function () {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
7. 運(yùn)行項(xiàng)目
你需要一個(gè) JavaScript 打包工具，如 webpack 或 Parcel，以正確處理這些模塊的導(dǎo)入。這些工具可以解析 Node.js 風(fēng)格的 import 語句，并生成適合在瀏覽器中運(yùn)行的文件。
Parcel用法更簡單一點(diǎn)，安裝過程如下：
-
安裝 Parcel：在終端中運(yùn)行以下命令：
npm install -D parcel-bundler -
更新
package.json文件以使用 Parcel 來啟動你的項(xiàng)目。在 "scripts" 部分添加一個(gè) "start" 腳本："scripts": { "start": "parcel index.html" }, -
現(xiàn)在你可以通過運(yùn)行以下命令來啟動你的項(xiàng)目：
npm start
Parcel 會自動解析你的 import 語句并啟動一個(gè)開發(fā)服務(wù)器。
恭喜！您現(xiàn)在已經(jīng)設(shè)置好了一個(gè)基本的 three.js 項(xiàng)目。以上的示例代碼創(chuàng)建了一個(gè)旋轉(zhuǎn)的綠色立方體。
