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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
| <template>
<div ref="container">
<!-- <canvas ref="canvas"></canvas> -->
<button @click="test('0°')">回正</button>
<button @click="test('R45°')">R45°</button>
<button @click="test('L45°')">L45°</button>
<button @click="test('R90°')">R90°</button>
<button @click="test('L90°')">L90°</button>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
const container = ref();
let camera: any;
let controls: any;
let cube: any;
const init = () => {
// 初始化场景
const scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
camera.position.z = 5;
renderer.setSize(window.innerWidth, window.innerHeight);
container.value.appendChild(renderer.domElement);
controls = new OrbitControls(camera, renderer.domElement);
controls.enableRotate = false;
controls.enableZoom = false;
// 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
controls.addEventListener('change', function () {
renderer.render(scene, camera); // 执行渲染操作
}); // 监听鼠标、键盘事件
// const gridHelper = new THREE.GridHelper(300, 25, 0x004444, 0x004444);
// scene.add(gridHelper);
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 初始化控制参数
const state = {
isLongPressing: false,
longPressThreshold: 100, // 长按阈值，单位为毫秒
pressStartTime: 0,
previousMousePosition: {
x: 0,
y: 0,
},
longPressTimer: undefined, // 用于存储定时器的ID
};
// 鼠标按下事件
const handleMouseDown = (event: MouseEvent) => {
if (event.button === 0) {
// 检查左键
state.pressStartTime = Date.now();
state.isLongPressing = false;
state.previousMousePosition.x = event.clientX;
state.previousMousePosition.y = event.clientY;
state.longPressTimer = setTimeout(checkLongPress, state.longPressThreshold) as unknown as any;
}
};
// 鼠标松开事件
const handleMouseUp = () => {
state.isLongPressing = false;
clearTimeout(state.longPressTimer);
};
// 检查长按
function checkLongPress() {
const currentTime = Date.now();
if (currentTime - state.pressStartTime >= state.longPressThreshold) {
// 左键长按的处理代码
state.isLongPressing = true;
console.log('左键长按');
}
}
// 鼠标移动事件
const handleMouseMove = (event: MouseEvent) => {
if (state.isLongPressing) {
// 在长按状态下的鼠标移动处理代码
const deltaMove = {
x: event.pageX - state.previousMousePosition.x,
y: event.pageY - state.previousMousePosition.y,
};
// 获取关联的 DOM 元素
const element = renderer.domElement;
cube.rotation.x += (2 * Math.PI * deltaMove.y) / element.clientHeight;
cube.rotation.y += (2 * Math.PI * deltaMove.x) / element.clientWidth;
// 更新鼠标位置
state.previousMousePosition = {
x: event.pageX,
y: event.pageY,
};
}
};
// 滚轮事件
const handleWheel = (event: WheelEvent) => {
// 根据滚轮滚动的差值进行缩放
const scaleFactor = event.deltaY > 0 ? 0.9 : 1.1;
cube.scale.multiplyScalar(scaleFactor);
};
// 渲染循环
const animate = () => {
requestAnimationFrame(animate);
renderer.render(scene, camera);
};
// 初始化相机位置
camera.position.z = 5;
// 启动渲染循环
animate();
document.addEventListener('mousedown', handleMouseDown);
document.addEventListener('mouseup', handleMouseUp);
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('wheel', handleWheel);
};
const test = (degToRad: string) => {
console.log(controls);
switch (degToRad) {
// 0°旋转的情况
case '0°':
// 设置左右两个相机的旋转
cube.rotation.set(0, THREE.MathUtils.degToRad(0), 0);
break;
// +45°旋转的情况
case 'R45°':
cube.rotation.set(0, THREE.MathUtils.degToRad(45), 0);
break;
// -45°旋转的情况
case 'L45°':
cube.rotation.set(0, -THREE.MathUtils.degToRad(45), 0);
break;
// +90°旋转的情况
case 'R90°':
cube.rotation.set(0, THREE.MathUtils.degToRad(90), 0);
break;
// -90°旋转的情况
case 'L90°':
cube.rotation.set(0, -THREE.MathUtils.degToRad(90), 0);
break;
}
// 设置轨道控制器的目标点（target）为初始位置
controls.target.set(0, 0, 0);
// 设置相机的位置为默认位置
camera.position.set(0, 0, 5); // 你可能需要根据实际情况调整 Z 轴的值
// 使相机重新对准目标点
controls.update();
console.log(controls);
};
// 注册事件监听器
onMounted(() => {
init();
});
</script>
|