而现在的three，我会逐步往实战靠拢。
现在，webpack 依旧是主流的模块打包工具，这在大部分公司的项目开发中是必不可少的。
ts和three 是绝配，three本身就是用ts写的，ts可以为three 项目提前做好规则约束，使项目的开发更加顺畅。
因此，我接下来会跟大说一下如何用webpack+ts 写three。
对于主流的前端框架vue、react，前期还不是特别需要，我会放到后面说。
我当前选择的webpack 是最新版本的webpack 5，具体指南可参考官网。
1.创建一个目录，初始化 npm
mkdir 01-startcd 01-startnpm init -y
2.调整 package.json 文件，以便确保我们安装包是 private(私有的)，并且移除 main 入口。这可以防止意外发布你的代码。
{ “name”: “webpack-demo”, “version”: “1.0.0”, “description”: “”,- “main”: “index.js”,+ “private”: true, “scripts”: { “test”: “echo “Error: no test specified” && exit 1″ }, “keywords”: [], “author”: “”, “license”: “MIT”, “devDependencies”: { “webpack”: “^5.38.1”, “webpack-cli”: “^4.7.2”, } }
3.安装依赖文件
- webpack 相关的依赖
npm install webpack webpack-cli webpack-dev-server –save-dev
- ts 相关的依赖
npm install typescript ts-loader –save-dev
- three 相关的依赖
npm install three @types/three –save
package.json 如下：
{ “name”: “three-lesson-02”, “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.2.8”, “typescript”: “^4.6.2”, “webpack”: “^5.70.0”, “webpack-cli”: “^4.9.2”, “webpack-dev-server”: “^4.7.4” }, “dependencies”: { “@types/three”: “^0.138.0”, “three”: “^0.138.3” }}
4.建立项目文件。
- 目录结构
01-start|- dist |- 01-helloWorld.html|- src |- helloWorld.ts|- package.json|- package-lock.json|- tsconfig.json|- webpack.config.js
- dist/01-helloWorld.html
helloWorld body { margin: 0; overflow: hidden; }
- src/helloWorld.ts
const str:string=’Hello World’console.log(str)
- 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” } ] }};
- tsconfig.json
{ “compilerOptions”: { “sourceMap”: true, “target”: “es6”, “module”: “es6” }}
5.运行项目，若在01-helloWorld.html中打印出“Hello World”，就说明配置没有问题。
npm run start
6.多页面。
在dist 中再建立一个页面 02-box.html，用来显示我们入门时绘制的立方体。
box body { margin: 0; overflow: hidden; }
在src 中建立一个box.js 文件，用于绘制立方体：
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 = 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 中添加彩色立方体页面所对应的入口
module.exports = { …… entry: { helloWorld: ‘./src/helloWorld.ts’, box: ‘./src/box.ts’, }, ……};
启服务后，打开box.html 页面，便可以看见旋转的立方体。
