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