01. 创建一个立方体
1. 使用vite
创建一个项目(不使用任何框架)
text
npm init vite@latest app
1
2. 安装threejs
text
npm i three
1
3. 在 main.js
文件中编写如何代码
js
// 导入 threejs
import * as THREE from 'three'
// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(
45, // 视角
window.innerWidth / window.innerHeight, // 宽高比
0.1, // 近平面
1000 // 远平面
)
// 创建渲染器
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
// 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1)
// 创建材质
const material = new THREE.MeshBasicMaterial({
color: 0x00ff00
})
// 创建网格
const cube = new THREE.Mesh(geometry, material)
// 将网格添加到场景中
scene.add(cube)
// 设置相机位置
camera.position.z = 5;
camera.lookAt(0, 0, 0)
// 渲染函数
function animate() {
requestAnimationFrame(animate)
// 旋转
cube.rotation.x += 0.01
cube.rotation.y += 0.01
// 渲染
renderer.render(scene, camera)
}
animate()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
4. 运行项目
text
npm run dev
1