Three.js windows 环境搭建

要在Windows环境下搭建three.js开发环境，你需要遵循以下步骤。这里我将分别提供环境搭建、示例代码和一些常见错误及其解决方案。

1. 环境搭建

步骤 1: 安装Node.js

首先，确保你的Windows机器上安装了Node.js。你可以从Node.js官网下载并安装。

步骤 2: 创建项目文件夹

在Windows资源管理器中，创建一个新的文件夹用于你的three.js项目。

步骤 3: 初始化npm项目

打开命令提示符（CMD）或PowerShell，切换到你的项目文件夹，然后运行：

npm init -y

这将创建一个package.json文件。

{
  "dependencies": {
    "three": "^0.173.0",
    "vite": "^6.2.0"
  },
  "name": "lordli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html"
  },
  "devDependencies": {
    "parcel": "^2.13.3"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "commonjs"
}

步骤 4: 安装three.js

在项目文件夹中，运行以下命令来安装three.js：

 

npm install three

 npm install --save-dev parcel

5、配置项目结构

    创建src文件夹：

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

    创建HTML和JS文件：

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

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

    配置HTML文件：

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

6.编写main.js代码：

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.set(0, 0, 10);
scene.add(camera);


const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });

const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

scene.add(cube);


const renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

renderer.render(scene, camera);

 npm i --save-dev @types/three

效果：