-
Notifications
You must be signed in to change notification settings - Fork 2
/
lookglass.html
138 lines (124 loc) · 4.48 KB
/
lookglass.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
<html>
<head>
<title>
holoplay.js tutorial
</title>
</head>
<body>
<!-- reference your own local copy of three.js -->
<script src="build/three.min.js"></script>
<script src="build/js/OrbitControls.js"></script>
<script src="build/js/TransformControls.js"></script>
<script type="module">
const source = window.localStorage.getItem('jsonobj');
const jsonobjs = JSON.parse(source);
if (jsonobjs.length <= 0) {
alert('No data found, Please add data');
window.close();
}
// reference your own local copy of holoplay.js
import * as HoloPlay from './dist/holoplay.module.js';
var camera;
// just a basic three.js scene, nothing special
const scene = new THREE.Scene();
// adding some lights to the scene
const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 1);
directionalLight.position.set(0, 1, 2);
scene.add(directionalLight);
const ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.4);
scene.add(ambientLight);
// adding three cubes to the scene in different locations
for (let i = 0; i < jsonobjs.length; i++) {
const obj = jsonobjs[i];
if(obj.type == "cube")
addCube(obj.position,obj.color);
else if(obj.type == "cylinder")
addCylinder(obj.position,obj.color);
else if(obj.type == "sphere")
addSphere(obj.position,obj.color);
}
// the holoplay renderer should act as your THREE.WebGLRenderer
const renderer = new HoloPlay.Renderer();
// the holoplay camera should be used like a THREE.PerspectiveCamera
console.log(renderer.domElement.width, renderer.domElement.height);
const aspect = renderer.domElement.width / renderer.domElement.height;
camera = new HoloPlay.Camera(50, aspect, 0.01, 30000);
camera.position.set( 1000, 500, 1000 );
camera.lookAt( 0, 0, 0 );
const orbit = new THREE.OrbitControls( camera, renderer.domElement );
orbit.update();
orbit.addEventListener( 'change', render );
const control = new THREE.TransformControls( camera, renderer.domElement );
control.addEventListener( 'change', render );
control.addEventListener( 'dragging-changed', function ( event ) {
orbit.enabled = ! event.value;
} );
// add the renderer's canvas to your web page (it will size to fill the page)
document.body.appendChild(renderer.domElement);
// the update function gets called every frame, thanks to requestAnimationFrame()
function update(time) {
requestAnimationFrame(update);
// render() draws the scene, just like THREE.WebGLRenderer.render()
renderer.render(scene, camera);
}
requestAnimationFrame(update);
function render() {
renderer.render( scene, camera );
}
function addCube(pos,color)
{
const geometry = new THREE.BoxBufferGeometry( 10, 10, 10 );
const material = new THREE.MeshLambertMaterial({color:0xffffff});//.MeshLambertMaterial( { map: texture, transparent: true } );
const mesh = new THREE.Mesh( geometry, material );
mesh.typename = "cube";
if(pos!=null)
{
mesh.position.x = pos.x;
mesh.position.y = pos.y;
mesh.position.z = pos.z;
}
if(color!=null)
{
mesh.material.color.setHex('0x'+color);
}
scene.add(mesh);
}
function addSphere(pos,color)
{
const geometry = new THREE.SphereBufferGeometry( 10, 10, 10 );
const material = new THREE.MeshLambertMaterial({color:0xffffff});//new THREE.MeshLambertMaterial( { map: texture, transparent: true } );
const mesh = new THREE.Mesh( geometry, material );
mesh.typename = "sphere";
if(pos!=null)
{
mesh.position.x = pos.x;
mesh.position.y = pos.y;
mesh.position.z = pos.z;
}
if(color!=null)
{
mesh.material.color.setHex('0x'+color);
}
scene.add(mesh);
}
function addCylinder(pos,color)
{
const geometry = new THREE.CylinderBufferGeometry( 5, 5, 10, 32);
const material = new THREE.MeshLambertMaterial({color:0xffffff});//new THREE.MeshLambertMaterial( { map: texture, transparent: true } );
const mesh = new THREE.Mesh( geometry, material );
mesh.typename = "cylinder";
if(pos!=null)
{
mesh.position.x = pos.x;
mesh.position.y = pos.y;
mesh.position.z = pos.z;
}
if(color!=null)
{
mesh.material.color.setHex('0x'+color);
}
scene.add(mesh);
}
</script>
</body>
</html>