-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
250 lines (218 loc) · 7.56 KB
/
index.html
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
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
<!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>VR看房</title>
<style>
* {
margin: 0;
padding: 0;
}
canvas {
display: block;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<script script type="module">
import * as THREE from './res/three.module.js';
// 定义全局变量
let scene, camera, geometry, mesh, renderer
let sixPlane = [] // 6个面
let spriteArrow = ""
let raycaster = new THREE.Raycaster()
const mouse = new THREE.Vector2() // 鼠标信息转换
function onMouseMove(event) {
// 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
}
window.addEventListener('mousemove', onMouseMove, false) // 获取移动事件
// 鼠标点击
function mouseClickEvent(ev) {
ev.preventDefault();
// 射线捕获
raycaster.setFromCamera(mouse, camera)
const intersects = raycaster.intersectObjects([spriteArrow]) // 获取到精灵图。
if (intersects.length > 0) { // 当鼠标与精灵图点击了，交汇了，触发改变事件
changeScene()
}
}
window.addEventListener('click', mouseClickEvent, false)
// 初始化渲染器
function initRenderer() {
renderer = new THREE.WebGLRenderer({ antialias: true }) // 使用WebGLRenderer渲染器
renderer.setSize(window.innerWidth, window.innerHeight) // 设置大小
renderer.setPixelRatio(window.devicePixelRatio) // 高清展示
document.body.appendChild(renderer.domElement) // 生成一个canvas
var lastx=0;
var lasty=0;
var dx=0;
var dy=0;
var vectx = new THREE.Vector3(1,0, 0);
var vecty = new THREE.Vector3(0,1, 0);
var istracking=false;
renderer.domElement.onmousedown = function(event){
istracking = true;
console.log("down");
};
renderer.domElement.onmousemove=function(event){
if(!istracking){
return;
}
dx = event.clientX-lastx;
dy = event.clientY-lasty;
lastx = event.clientX;
lasty = event.clientY;
if(Math.abs(dx)>100 || Math.abs(dy)>100){
return;
}
camera.rotateOnWorldAxis(vecty, THREE.Math.degToRad(0.1)*dx);
vectx.applyAxisAngle(vecty,THREE.Math.degToRad(0.1)*dx);
camera.rotateOnWorldAxis(vectx, THREE.Math.degToRad(0.1)*dy);
};
renderer.domElement.onmouseup = function(event){
istracking = false;
console.log("up");
};
}
// 初始化场景
function initScene() {
scene = new THREE.Scene() // 生成一个场景
const axesHelper = new THREE.AxesHelper(100) // 辅助的坐标系长度
scene.add(axesHelper) // 添加到场景里面
}
// 初始化相机
function initCamera() {
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000) // 透视相机
camera.position.set(0, 0, 0) // 设置相机的位置
}
// 初始化模型
function initMesh() {
// 利用精灵材质引入地面标记
new THREE.TextureLoader().load('img/icon.png', (texture) => {
const spriteMaterial = new THREE.SpriteMaterial({ // 定义了材质
map: texture
})
spriteArrow = new THREE.Sprite(spriteMaterial) // 加载材质
spriteArrow.scale.set(0.2, 0.2, 0.2) // 缩小图片标记
spriteArrow.position.set(0, -0.8, 1.9) // 设置地面标记位置
scene.add(spriteArrow) // 将材质放入场景里面
})
sixPlane = createPlane(0)
for (let i = 0; i < 6; i++) {
scene.add(sixPlane[i])
}
}
// 初始化动画
function animate() {
requestAnimationFrame(animate)
renderer.render(scene, camera) // 开始渲染
}
// 定义初始化方法
function init() {
initCamera()
initRenderer()
initScene()
initMesh()
animate()
}
init()
function createPlane(num) {
const BoxGeometry = []
// 前面
const geometryF = new THREE.PlaneGeometry(4, 4)
const materialF = new THREE.MeshBasicMaterial({
map: new THREE.TextureLoader().load('img/' + num + '_f.jpg'),
side: THREE.DoubleSide
})
const meshF = new THREE.Mesh(geometryF, materialF)
meshF.rotation.y = 180 * Math.PI / 180
meshF.position.z = 2
BoxGeometry.push(meshF)
// 后面
const geometryB = new THREE.PlaneGeometry(4, 4)
const materialB = new THREE.MeshBasicMaterial({
map: new THREE.TextureLoader().load('img/' + num + '_b.jpg'),
side: THREE.DoubleSide
})
const meshB = new THREE.Mesh(geometryB, materialB)
// meshB.rotation.y = 180 * Math.PI / 180
meshB.position.z = -2
BoxGeometry.push(meshB)
// 左侧
const geometryL = new THREE.PlaneGeometry(4, 4)
const materialL = new THREE.MeshBasicMaterial({
map: new THREE.TextureLoader().load('img/' + num + '_l.jpg'),
side: THREE.DoubleSide
})
const meshL = new THREE.Mesh(geometryL, materialL)
meshL.rotation.y = (-90) * Math.PI / 180
meshL.position.x = 2
BoxGeometry.push(meshL)
// 右侧
const geometryR = new THREE.PlaneGeometry(4, 4)
const materialR = new THREE.MeshBasicMaterial({
map: new THREE.TextureLoader().load('img/' + num + '_r.jpg'),
side: THREE.DoubleSide
})
const meshR = new THREE.Mesh(geometryR, materialR)
meshR.rotation.y = (90) * Math.PI / 180
meshR.position.x = -2
BoxGeometry.push(meshR)
// 上面
const geometryU = new THREE.PlaneGeometry(4, 4)
const materialU = new THREE.MeshBasicMaterial({
map: new THREE.TextureLoader().load('img/' + num + '_u.jpg'),
side: THREE.DoubleSide
})
const meshU = new THREE.Mesh(geometryU, materialU)
meshU.rotation.x = (90) * Math.PI / 180
meshU.rotation.z = (180) * Math.PI / 180
meshU.position.y = 2
BoxGeometry.push(meshU)
// 下面
const geometryD = new THREE.PlaneGeometry(4, 4)
const materialD = new THREE.MeshBasicMaterial({
map: new THREE.TextureLoader().load('img/' + num + '_d.jpg'),
side: THREE.DoubleSide
})
const meshD = new THREE.Mesh(geometryD, materialD)
meshD.rotation.x = (-90) * Math.PI / 180
meshD.rotation.z = (180) * Math.PI / 180
meshD.position.y = -2
BoxGeometry.push(meshD)
return BoxGeometry
}
function changeScene() {
// 创建六个面
const sixBox = createPlane(2)
const timer = setInterval(() => {
camera.fov -= 1 // 角度该小
camera.updateProjectionMatrix() // 更新投影矩阵
if (camera.fov == 20) {
clearInterval(timer)
camera.fov = 70
camera.updateProjectionMatrix()
// 删除之前的6个面
for (let i = 0; i < 6; i++) {
scene.remove(sixPlane[i])
}
// 新的面
sixPlane = sixBox
// 更新新的面
for (let i = 0; i < 6; i++) {
scene.add(sixPlane[i])
}
// 箭头的隐藏
spriteArrow.visible = false
}
}, 50)
}
</script>
</body>
</html>