-
Notifications
You must be signed in to change notification settings - Fork 2
/
vr.html
273 lines (206 loc) · 11 KB
/
vr.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
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一个小房间</title>
<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
<script>
/*AFRAME 的大致结构:<a-scene> 是最外层的标签。
<a-scnen>可以有(唯一)一个子标签<a-assets>用来存放各种模型和图片的来源,例如url地址,都可以直接在<a-scene>里引用。
<a-entity>是最常用的子标签,代表一个实体,可以自定义。*/
var SCALE=0.05;
var scene = document.createElement('a-scene');//全局变量
var asset = document.createElement('a-assets');//全局变量
var camera= document.createElement('a-camera');
var ground = document.createElement('a-cylinder');
var sky=document.createElement('a-sky');
sky.setAttribute('src','https://cdn.aframe.io/a-painter/images/sky.jpg');
camera.setAttribute('position','10 0.5 10');
var WALL_COLOR="#1a45aa";
var WALL_WIDTH=0.1;
var WALL_HEIGHT=15;
var WINDOW_WIDTH=0.12;
var WINDOW_DEPTH=2.5;
var WINDOW_HEIGHT=3;
var SURFACEPLANE_DEPTH=3.5;
var SURFACEPLANE_HEIGHT=2.5;
var DOOR_WIDTH=0.12;
var DOOR_DEPTH=2.5;
var DOOR_HEIGHT=4;
//添加obj模型,模型先上传到https://glitch.com/edit/TODO:模型的比例问题需要具体调整,直接用会太大
function addModel(obj_id, mtl_id, obj_src, mtl_src,position) {
var entity = document.createElement('a-entity');
var scale = '0.002 0.002 0.002';//调整三个维度上的比例
// var position = '0 0.5 0';
var obj_item = document.createElement('a-assets-item');
var mtl_item = document.createElement('a-assets-item');
obj_item.setAttribute('id', obj_id);
obj_item.setAttribute('src', obj_src);
mtl_item.setAttribute('id', mtl_id);
mtl_item.setAttribute('src', mtl_src);
asset.appendChild(obj_item);
asset.appendChild(mtl_item);
entity.setAttribute('obj-model', 'obj: #' + obj_id + '; mtl: #' + mtl_id);
entity.setAttribute('scale', scale);
entity.setAttribute('position', position);
scene.appendChild(entity);
}
/* 创建一个墙壁 TODO:如何按照所给的平面设计图来绘制墙壁、如何在墙上开门和窗、如何在墙上悬挂挂饰
* 墙的属性:长宽高、角度、材质、颜色。材质src放在a-assets标签里
* rotation:x是竖直旋转,y是水平旋转,z是左右旋转
* position:坐标
* 通过二维坐标来绘制墙面
*/
function createWall(x1,y1,x2,y2,url) {
var position=(x1+x2)/2 +' 0.5 '+(y1+y2)/2; //取中心点
var depth=Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2)); //勾股定理求得墙的长度
var rotation='0 '+Math.atan((x1-x2)/(y1-y2))/Math.PI*180+' 0'; //计算墙的角度
var wall = document.createElement('a-box');
// wall.setAttribute('color', WALL_COLOR);
wall.setAttribute('width', WALL_WIDTH);
wall.setAttribute('depth', depth);
wall.setAttribute('height',WALL_HEIGHT );
wall.setAttribute('position', position);
wall.setAttribute('rotation', rotation);
wall.setAttribute('src',url);
scene.appendChild(wall);
console.log('墙的壁纸'+url);
}
function createDoor(x1,y1,x2,y2,url) {
var position=(x1+x2)/2 +' 2.53 '+(y1+y2)/2; //取中心点
var depth=Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2)); //勾股定理求得门的长度
var rotation='0 '+Math.atan((x1-x2)/(y1-y2))/Math.PI*180+' 0'; //计算门的角度
var door = document.createElement('a-box');
door.setAttribute('width', DOOR_WIDTH);
door.setAttribute('depth', DOOR_DEPTH);
door.setAttribute('height',DOOR_HEIGHT );
door.setAttribute('position', position);
door.setAttribute('rotation', rotation);
door.setAttribute('src',url);
scene.appendChild(door);
}
function createWindow(x1,y1,x2,y2,url) {
var position=(x1+x2)/2 +' 4 '+(y1+y2)/2; //取中心点
var depth=Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2)); //勾股定理求得窗的长度
var rotation='0 '+Math.atan((x1-x2)/(y1-y2))/Math.PI*180+' 0'; //计算窗的角度
var wind=document.createElement('a-box');
wind.setAttribute('width',WINDOW_WIDTH);
wind.setAttribute('depth',WINDOW_DEPTH);
wind.setAttribute('height',WINDOW_HEIGHT);
wind.setAttribute('position',position);
wind.setAttribute('rotation',rotation);
wind.setAttribute('src',url);
scene.appendChild(wind);
}
function createSurfaceplane(x1,y1,x2,y2,x3,y3,url,height) {
var position=x3 +' '+height+' '+y3; //取中心点
var depth=Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2)); //勾股定理求得窗的长度
var rotation='0 '+Math.atan((x1-x2)/(y1-y2))/Math.PI*180+' 0'; //计算窗的角度
var wind=document.createElement('a-box');
wind.setAttribute('width',WINDOW_WIDTH);
wind.setAttribute('depth',SURFACEPLANE_DEPTH);
wind.setAttribute('height',SURFACEPLANE_HEIGHT);
wind.setAttribute('position',position);
wind.setAttribute('rotation',rotation);
wind.setAttribute('src',url);
scene.appendChild(wind);
}
function addAllModel() {
for(var i=0;i<sessionStorage.length;i++){
var mykey=sessionStorage.key(i);
var temp=sessionStorage.getItem(mykey);
var obj=JSON.parse(temp);
console.log("第二次vr测试&&&&&&&&");
console.log(temp);
console.log(obj.type+" "+obj.position);
switch (obj.type){
case 'surfaceplane':
createSurfaceplane(obj.x1*SCALE,obj.y1*SCALE,obj.x2*SCALE,obj.y2*SCALE,obj.x3*SCALE,obj.y3*SCALE,obj.src,obj.height*SCALE+1.8);
break;
case 'floor':
ground.setAttribute('src',obj.src);
break;
case 'Window':
createWindow(obj.x1*SCALE,obj.y1*SCALE,obj.x2*SCALE,obj.y2*SCALE,obj.src);
console.log('新窗!!!!');
break;
case 'Door':
createDoor(obj.x1*SCALE,obj.y1*SCALE,obj.x2*SCALE,obj.y2*SCALE,obj.src);
console.log('新门!!!!');
break;
case 'wall':
createWall(obj.x1*SCALE,obj.y1*SCALE,obj.x2*SCALE,obj.y2*SCALE,obj.src);
console.log('这是新墙!!!!!!!!!');
break;
case 'desk':
addModel('desk-obj','desk-mtl','obj-modules/desk/desk.obj','obj-modules/desk/desk.mtl',obj.position);
console.log('desk success');
break;
case 'sofa':
addModel('sofa-obj','sofa-mtl','obj-modules/sofa/sofa.obj','obj-modules/sofa/sofa.mtl',obj.position);
console.log('sofa success');
break;
case 'bed':
addModel('bed-obj','bed-mtl','obj-modules/bed/bed.obj','obj-modules/bed/bed.mtl',obj.position);
console.log('bed success');
break;
case 'chair':
addModel('chair-obj','chair-mtl','obj-modules/chair/chair.obj','obj-modules/chair/chair.mtl',obj.position);
console.log('chair success');
break;
case 'elec':
addModel('tv-obj','tv-mtl','obj-modules/tv/tv.obj','obj-modules/tv/tv.mtl',obj.position);
console.log('新电视!!!!');
break;
case 'refrigerator':
addModel('fridge-obj','fridge-mtl','obj-modules/fridge/fridge.obj','obj-modules/fridge/fridge.mtl',obj.position);
console.log('新冰箱!!!!!!!');
break;
case 'airld':
addModel('airld-obj','airld-mtl','obj-modules/airld/airld.obj','obj-modules/airld/airld.mtl',obj.position);
console.log('新落地空调!!!!');
break;
case 'airbg':
addModel('airbg-obj','airbg-mtl','obj-modules/airbg/airbg.obj','obj-modules/airbg/airbg.mtl',obj.position);
console.log('新空调壁挂!!!!');
break;
case 'lamp':
addModel('lamp-obj','lamp-mtl','obj-modules/lamp/lamp.obj','obj-modules/lamp/lamp.mtl',obj.position);
console.log('新台灯!!!!!');
break;
default:break;
}
}
}
window.onload = function () {
document.querySelector('body').appendChild(scene);
scene.appendChild(asset);
scene.appendChild(sky);
scene.appendChild(camera);
for(var i=0;i<sessionStorage.length;i++){
var str=sessionStorage.key(i);
console.log(str+" "+sessionStorage.getItem(str));
}
// buildBase();
addAllModel();
//
// createWall(-2,2,2,2);
// createWall(5,5,-5,5);
// createWall(2,2,5,5);
// createWall(-2,2,-5,5);
//随便设置个地板
ground.setAttribute('id', 'ground');
ground.setAttribute('src', 'https://cdn.aframe.io/a-painter/images/floor.jpg');
ground.setAttribute('radius', 100);
ground.setAttribute('height', 1);
//随便加个床试试
// addModel('bed-obj', 'bed-mtl', 'https://cdn.glitch.com/53d621be-988d-48f1-b92d-41134d57ed96%2Fbed.obj?1503576879736', 'https://cdn.glitch.com/53d621be-988d-48f1-b92d-41134d57ed96%2Fbed.mtl?1503576877095');
// addModel('sofa-obj','sofa-mtl','obj-modules/sofa/sofa.obj','obj-modules/sofa/sofa.mtl');
scene.appendChild(ground);
console.log("I have been here");//测试
}
</script>
</head>
<body>
</body>
</html>