搭建 Three.js + TypeScript + Webpack 项目需要完成以下几个步骤：

1. 安装 Node.js 和 npm

在开始之前，需要确保已经安装了 Node.js 和 npm。可以在终端中运行以下命令来检查是否已经安装：Copy

node -v
npm -v

2. 初始化项目

在命令行中进入项目的根目录，然后运行以下命令来初始化项目：Copy

npm init -y

这个命令会创建一个 package.json 文件，用于管理项目的依赖和配置信息。

3. 安装依赖

在命令行中运行以下命令，安装 Three.js、TypeScript、Webpack 和相关的 loader：Copy

npm install --save-dev three typescript webpack webpack-cli ts-loader

其中，--save-dev 参数表示这些库是开发依赖，不会被部署到生产环境中。

4. 创建 TypeScript 配置文件

在项目的根目录下创建一个 tsconfig.json 文件，并添加以下内容：jsonCopy

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true
  }
}

这个文件用于配置 TypeScript 编译器的选项，例如编译的目标版本、模块系统和生成的源映射等。

5. 创建 Webpack 配置文件

在项目的根目录下创建一个 webpack.config.js 文件，并添加以下内容：jsonCopy

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  devtool: 'inline-source-map'
};

这个文件用于配置 Webpack 的选项，例如入口文件、输出文件、模块规则和解析扩展名等。其中，ts-loader 是用于编译 TypeScript 代码的 loader。

6. 创建源代码文件

在项目的 src 目录下创建一个 index.ts 文件，并添加以下内容：reasonmlCopy

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;

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

这个文件用于编写 Three.js 场景的代码。在这个示例中，我们创建了一个场景、相机和渲染器，以及一个绿色的立方体，并将其添加到场景中。然后，我们使用 requestAnimationFrame 方法来实现动态渲染。

7. 运行项目

在命令行中运行以下命令，启动项目：Copy

npx webpack --watch

这个命令会使用 Webpack 编译和打包源代码，并将结果输出到 dist 目录下。--watch 参数表示监视源代码文件的变化，并自动重新编译和打包。

8. 在浏览器中查看结果

在浏览器中打开 dist/index.html 文件，即可查看 Three.js 场景的效果。

通过以上步骤，我们就可以搭建一个基于 Three.js、TypeScript 和 Webpack 的项目，并开始编写 Three.js 场景的代码了。