第一章 threejs是什么？
three是javascript编写的webgl第三方库。
three 提供了非常多的3d显示和编辑功能。
three是一款运行在浏览器中的3d引擎，你可以使用three创建各种三维场景，并对其进行编辑。
three官网：https://threejs.org/ github：https://github.com/mrdoob/three.js
three的优缺点
优点：
- 对webgl进行了深度封装，可以提高常见项目的开发速度。
- 入门简单
- 具备较好的生态环境，文档详细，持续更新，在国内的使用者很多，就业需求也很大。
缺点：
- 在Node.js 中引用困难。在 Node.js v12 中， three.js 的核心库可使用 require(‘three’) 来作为 CommonJS module 进行导入。然而，大多数在 examples/jsm 中的示例组件并不能够这样。
- 个别功能封装过紧，限制了其灵活性。
three适合做什么
three 适合三维项目的开发和展示，比如VR、AR、三维产品展示、三维家居设计……
three 也可以做游戏开发，只是相较于Babylon，缺少了物理引擎。
旋转的立方体
1.建立一个HTML文件，引入three 。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>牛刀小试p</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script src="https://unpkg.com/three/build/three.js"></script>
<script>
// Our Javascript will go here.
</script>
</body>
</html>2.创建一个场景。
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 );我们现在建立了场景、相机和渲染器，对于其中参数的意思，可以去官网查阅文档。
3.创建立方体。
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshNormalMaterial();
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;4.在连续渲染方法里旋转立方体。
animate()
function animate() {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
};<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/three/build/three.js"></script>
</head>
<body>
<canvas></canvas>
<script>
console.log(THREE)
// 场景
const scene = new THREE.Scene();
// 相机
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
// 渲染器
const renderer = new THREE.WebGLRenderer();
// 设置canvas的尺寸 window.innerWidth： 宽度
// window.innerHeight ：高度
renderer.setSize( window.innerWidth, window.innerHeight );
// 把canvas插入到body中
document.body.appendChild( renderer.domElement );
// 创建几几何体对象
const geometry = new THREE.BoxGeometry();
// 创建材质
const material = new THREE.MeshNormalMaterial();
// 利用几何体和材质合成一个立方体对象三堆对象
const cube = new THREE.Mesh(geometry, material);
// 把创建的立方体放到场景中进行渲染
scene.add(cube);
// 设置相机的位置
camera.position.z = 5;
// 创建动画
animate()
function animate() {
requestAnimationFrame( animate );
// 设置几何体的旋转参数
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// 渲染
renderer.render( scene, camera );
};
</script>
</body>
</html>
第三章 用webpack+ts开发three项目。
ts和three 是绝配，three本身就是用ts写的，ts可以为three 项目提前做好规则约束，使项目的开发更加顺畅。
- 初始化npm
mkdir 01-start
cd 01-start
npm init -y2.调整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",
}
}- 安装依赖文件
webpack相关的
ts相关的：
three相关的依赖：
npm install webpack webpack-cli webpack-dev-server --save-dev
npm install typescript ts-loader --save-dev
npm install three @types/three --savepackage.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"
}
}- 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- 目录结构
01-start
|- dist
|- 01-helloWorld.html
|- src
|- helloWorld.ts
|- package.json
|- package-lock.json
|- tsconfig.json
|- webpack.config.js- 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>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 中添加彩色立方体页面所对应的入口
module.exports = {
……
entry: {
box: './src/box.ts',
},
……
};