2. 用Webpack+Ts 开发three.js 项目three.js本身就是用Ts写的，Ts可以为three.js

three.js本身就是用Ts写的，Ts可以为three.js 项目提前做好规则约束，使项目的开发更加顺畅。

1. 前期准备

1.1.创建一个目录，初始化 npm

1.2 安装依赖文件

1.2.1 webpack 相关的依赖

npm install webpack webpack-cli webpack-dev-server --save-dev --registry=https://registry.npm.taobao.org

1.2.2 Ts 相关的依赖

npm install typescript ts-loader --save-dev --registry=https://registry.npm.taobao.org

1.2.3 three.js 相关的依赖

npm install three @types/three --save --registry=https://registry.npm.taobao.org

1.3 调整 `package.json` 文件

"private": true确保安装包是私有的，并且移除 main 入口。这可以防止意外发布你的代码。
添加scripts命令"start": "webpack serve --open"

 {
  "name": "three-test",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^9.4.1",
    "typescript": "^4.9.3",
    "webpack": "^5.75.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
  },
  "dependencies": {
    "@types/three": "^0.146.0",
    "three": "^0.146.0"
  }
}

2. 建立项目文件

2.1 目录结构

three-test
|- dist
	|- 01-helloWorld.html
|- src
	|- helloWorld.ts
|- package.json
|- package-lock.json
|- tsconfig.json
|- webpack.config.js

2.2 dist/01-helloWorld.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>helloWorld</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script src="helloWorld.js"></script>
  </body>
</html>

2.3 src/helloWorld.ts

const str:string='Hello World'
console.log(str)

2.4 tsconfig.json

{
    "compilerOptions": {
      "sourceMap": true,
      "target": "es6",
      "module": "es6"
    }
  }

2.5 webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    helloWorld: './src/helloWorld.ts',
  },
  devtool: 'inline-source-map',
  devServer: {
    static: './dist',
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"]
  },
  module: {
    rules: [
      { test: /\.tsx?$/, loader: "ts-loader" }
    ]
  }
};

3. 运行项目

npm run start

在01-helloWorld.html中打印出“Hello World”，说明前边的配置没有问题

4. 添加一个新页面

在dist 中再建立一个页面 02-box.html，用来显示一个绘制的立方体。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>box</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <canvas id="canvas"></canvas>
  <script src="box.js"></script>
</body>

</html>

在src 中建立一个box.ts 文件，用于绘制立方体：

import {
    BoxGeometry,Mesh,MeshNormalMaterial,PerspectiveCamera,Scene,WebGLRenderer,
  } from 'three'
  
  const scene = new Scene()
  const camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 )
  
  const canvas = <HTMLCanvasElement>document.getElementById('canvas');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  const renderer = new WebGLRenderer({canvas});
  
  const geometry = new BoxGeometry();
  const material = new MeshNormalMaterial();
  const cube = new 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();

在webpack.config.js 中添加彩色立方体页面02-box.html所对应的入口

module.exports = {
  ……
  entry: {
    helloWorld: './src/helloWorld.ts',
    box: './src/box.ts',
  },
  ……
};

重新启动服务后，打开box.html 页面，便可以看见旋转的立方体。

2. 用Webpack+Ts 开发three.js 项目