three.js 轨道控制器查看物体
使用three.js
轨道控制器,查看 3D 物体
鼠标左键可以拖动查看立方体
浏览器自带方法requestAnimationFrame
,请求下一帧调用 render 方法,渲染
示例
示例代码
控制器是three.js
的插件,需要单独引入
ts
import { OrbitControls } from "three/addons/controls/OrbitControls"
js
// 创建轨道控制器
// 要控制的相机,canvas元素
const controls = new OrbitControls(camera, renderer.domElement)
const render = () => {
renderer.render(scene, camera)
// 浏览器自带方法,请求下一帧调用 render 方法,渲染
requestAnimationFrame(render)
}
// 开始时调用一次渲染,鼠标左键可以拖动查看立方体
render()
vue
<template>
<canvas ref="canvas" />
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue"
import {
Scene,
PerspectiveCamera,
BoxGeometry,
MeshBasicMaterial,
Mesh,
WebGLRenderer,
} from "three"
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
const canvas = ref()
onMounted(() => {
// 创建一个场景
const scene = new Scene()
// 创建一个相机(透视相机)
// 角度,宽高比, 进端, 远端
const camera = new PerspectiveCamera(
75,
parseInt(getComputedStyle(canvas.value).width) / window.innerHeight,
0.1,
1000
)
// 设置相机位置
camera.position.set(0, 0, 10)
// 添加到场景中
scene.add(camera)
// 创建几何体
const cubeGeometry = new BoxGeometry(1, 1, 1)
// 创建材质
const cubeMaterial = new MeshBasicMaterial({ color: 0xffc0cb })
// 根据几何体和材质创建物体
const cube = new Mesh(cubeGeometry, cubeMaterial)
// 将几何体添加到场景中
scene.add(cube)
// 初始化渲染器
const renderer = new WebGLRenderer({
// 将webGL渲染的canvas添加到dom上
canvas: canvas.value,
// 允许透明
alpha: true,
})
// 设置背景色
renderer.setClearColor(0x10b981, 0.1)
// 设置画布的宽高
renderer.setSize(
parseInt(getComputedStyle(canvas.value).width),
window.innerHeight
)
// 使用渲染器,通过场景,相机来渲染
// 这里只能渲染一次,后面相机在移动时每一帧都需要渲染一次
// renderer.render(scene, camera)
// #region snippet
// 创建轨道控制器
// 要控制的相机,canvas元素
const controls = new OrbitControls(camera, renderer.domElement)
const render = () => {
renderer.render(scene, camera)
// 浏览器自带方法,请求下一帧调用 render 方法,渲染
requestAnimationFrame(render)
}
// 开始时调用一次渲染,鼠标左键可以拖动查看立方体
render()
// #endregion snippet
})
</script>
<style lang="scss" scoped>
canvas {
width: 100%;
}
</style>
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90