我們之前說(shuō)webgl的時(shí)候，是以夯實(shí)基礎(chǔ)為目的。
而現(xiàn)在的three，我會(huì)逐步往實(shí)戰(zhàn)靠攏。
現(xiàn)在，webpack 依舊是主流的模塊打包工具，這在大部分公司的項(xiàng)目開發(fā)中是必不可少的。
ts和three 是絕配，three本身就是用ts寫的，ts可以為three 項(xiàng)目提前做好規(guī)則約束，使項(xiàng)目的開發(fā)更加順暢。
因此，我接下來(lái)會(huì)跟大說(shuō)一下如何用webpack+ts 寫three。
對(duì)于主流的前端框架vue、react，前期還不是特別需要，我會(huì)放到后面說(shuō)。
我當(dāng)前選擇的webpack 是最新版本的webpack 5，具體指南可參考官網(wǎng)。
1.創(chuàng)建一個(gè)目錄，初始化 npm
mkdir 01-startcd 01-startnpm init -y
2.調(diào)整 package.json 文件，以便確保我們安裝包是 private(私有的)，并且移除 main 入口。這可以防止意外發(fā)布你的代碼。
{ “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 相關(guān)的依賴
npm install webpack webpack-cli webpack-dev-server –save-dev
- ts 相關(guān)的依賴
npm install typescript ts-loader –save-dev
- three 相關(guān)的依賴
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.建立項(xiàng)目文件。
- 目錄結(jié)構(gòu)
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.運(yùn)行項(xiàng)目，若在01-helloWorld.html中打印出“Hello World”，就說(shuō)明配置沒(méi)有問(wèn)題。
npm run start
6.多頁(yè)面。
在dist 中再建立一個(gè)頁(yè)面 02-box.html，用來(lái)顯示我們入門時(shí)繪制的立方體。
box body { margin: 0; overflow: hidden; }
在src 中建立一個(gè)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 中添加彩色立方體頁(yè)面所對(duì)應(yīng)的入口
module.exports = { …… entry: { helloWorld: ‘./src/helloWorld.ts’, box: ‘./src/box.ts’, }, ……};
啟服務(wù)后，打開box.html 頁(yè)面，便可以看見旋轉(zhuǎn)的立方體。
