【three.js】搭建环境

news2025/1/7 15:56:47

一、安装Node.js和npm

下载与安装：

访问Node.js官方网站（nodejs.org），根据你的操作系统下载并安装最新稳定版（LTS版本）的Node.js。安装过程中，npm（Node包管理器）会随Node.js一起安装。

二、初始化项目

创建项目文件夹：

在你的文件系统中创建一个新的文件夹，用于存放你的Three.js项目。

打开命令行：

打开命令行界面（例如Windows的cmd、PowerShell，macOS的Terminal，或Linux的终端），并导航到你刚刚创建的项目文件夹。

初始化项目：

在命令行中运行npm init -y（或npm init并按提示填写信息）来初始化npm项目，这将生成一个package.json文件，用于管理项目的依赖和配置。

三、安装Three.js

通过npm安装：

在命令行中运行npm install three命令来安装Three.js库及其依赖。

四、配置项目结构

创建src文件夹：

在项目文件夹中创建一个名为src的文件夹，用于存放源代码文件。

创建HTML和JS文件：

在src文件夹中创建一个名为index.html的文件，作为项目的入口文件。

在src文件夹中创建一个名为main.js的文件，用于编写Three.js的脚本代码。

配置HTML文件：

在index.html文件中，添加基本的HTML结构，并引入main.js文件。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js Project</title>
</head>
<body>
    <script type="module" src="./main.js"></script>
</body>
</html>

编写Three.js代码：

在main.js文件中，编写Three.js的初始化代码，包括创建场景、相机、渲染器，以及添加3D对象等。例如：

import * as THREE from 'three';

// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建渲染器
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);

// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();