Skip to content

Commit 7a86e1c

Browse files
hlghlg
committed
separate js, selection on single elements
1 parent 2457d01 commit 7a86e1c

3 files changed

Lines changed: 172 additions & 142 deletions

File tree

‎Client/ThreeJsViewer.js‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
function ThreeJsViewer(){
2+
3+
this.SELECTED_COLOR = 0xffff00;
4+
this.UNSELECTED_COLOR = 0xFF0000;
5+
this.meshes = {};
6+
7+
this.init = function(modelUrl) {
8+
9+
this.projector = new THREE.Projector();
10+
this.size = {width: window.innerWidth - 1, height: window.innerHeight - 1}
11+
12+
this.renderer = new THREE.WebGLRenderer();
13+
this.renderer.sortObjects = false;
14+
this.renderer.setSize( this.size.width, this.size.height);
15+
16+
this.camera = new THREE.TrackballCamera({
17+
18+
fov: 50,
19+
aspect: this.size.width / this.size.height,
20+
near: 1,
21+
far: 100000,
22+
23+
rotateSpeed: 1.0,
24+
zoomSpeed: 1.2,
25+
panSpeed: 0.2,
26+
27+
noZoom: false,
28+
noPan: false,
29+
30+
staticMoving: false,
31+
dynamicDampingFactor: 0.3,
32+
33+
minDistance: 0.1,
34+
maxDistance: 100000,
35+
36+
keys: [ 65, 83, 68 ], // [ rotateKey, zoomKey, panKey ],
37+
38+
domElement: this.renderer.domElement
39+
40+
});
41+
this.camera.up = new THREE.Vector3(0, 0, 1);
42+
this.camera.position = new THREE.Vector3(1, 1, 1);
43+
this.camera.target.position = new THREE.Vector3(0, 0, 0);
44+
this.camera.screen.width = this.size.width;
45+
this.camera.screen.height = this.size.height;
46+
47+
this.scene = new THREE.Scene();
48+
49+
var light1 = new THREE.DirectionalLight(0xffffff, 2);
50+
light1.position.x = .5;
51+
light1.position.y = 1;
52+
light1.position.z = 2;
53+
light1.position.normalize();
54+
this.scene.addLight(light1);
55+
56+
var light2 = new THREE.DirectionalLight(0x555555, 1);
57+
light2.position.x = - 2;
58+
light2.position.y = - 1;
59+
light2.position.z = - .5;
60+
light2.position.normalize();
61+
this.scene.addLight(light2);
62+
63+
64+
var geometryLoader = new THREE.JSONLoader(true);
65+
this.root = new THREE.Object3D();
66+
this.scene.addObject(this.root);
67+
68+
var callback = function(partId) { return function(geometry) {
69+
var material = new THREE.MeshPhongMaterial({ color: this.UNSELECTED_COLOR });
70+
var mesh = new THREE.Mesh(geometry, material);
71+
mesh.doubleSided = false;
72+
this.root.addChild(mesh);
73+
this.meshes[mesh.geometry.id] = partId;
74+
}.bind(this); }.bind(this);
75+
76+
var texture_path = geometryLoader.extractUrlbase(modelUrl);
77+
var worker = new Worker(modelUrl);
78+
worker.onmessage = function ( event ) {
79+
$.each(event.data, function(index, modelPart){
80+
geometryLoader.createModel( modelPart.geometry, callback(modelPart.id), texture_path );
81+
});
82+
var bb = this.computeBoundingBox();
83+
var ext = {x: bb.x[1] - bb.x[0], y: bb.y[1] - bb.y[0], z: bb.z[1] - bb.z[0]};
84+
// center mesh
85+
this.root.position.x = ext.x * -.5 - bb.x[0];
86+
this.root.position.y = ext.y * -.5 - bb.y[0];
87+
this.root.position.z = ext.z * -.5 - bb.z[0];
88+
89+
var maxExtent = Math.max.apply(Math, [ext.x, ext.y, ext.z]);
90+
this.camera.position = new THREE.Vector3(maxExtent, maxExtent, maxExtent);
91+
92+
// TODO: adjust clipping
93+
geometryLoader.onLoadComplete();
94+
}.bind(this);
95+
geometryLoader.onLoadStart();
96+
worker.postMessage( new Date().getTime() );
97+
98+
this.renderer.domElement.addEventListener('mousedown', this.onMouseDown.bind(this), false);
99+
document.body.appendChild(this.renderer.domElement);
100+
this.onclick = function(){};
101+
};
102+
103+
this.computeBoundingBox = function(){
104+
this.root.children[0].geometry.computeBoundingBox();
105+
var initialBB = this.root.children[0].geometry.boundingBox;
106+
var bb = {x: [initialBB.x[0], initialBB.x[1]], y: [initialBB.y[0], initialBB.y[1]], z: [initialBB.z[0], initialBB.z[1]]};
107+
THREE.SceneUtils.traverseHierarchy(this.root, function(object){
108+
object.geometry.computeBoundingBox();
109+
$.each(['x', 'y', 'z'], function(index, dimension){
110+
bb[dimension][0] = Math.min(bb[dimension][0], object.geometry.boundingBox[dimension][0]);
111+
bb[dimension][1] = Math.max(bb[dimension][1], object.geometry.boundingBox[dimension][1]);
112+
});
113+
114+
});
115+
return bb;
116+
};
117+
118+
this.onMouseDown = function(event) {
119+
event.preventDefault();
120+
121+
var mouse = new THREE.Vector3(0, 0, 0);
122+
mouse.x = ( event.clientX / this.size.width ) * 2 - 1;
123+
mouse.y = - ( event.clientY / this.size.height ) * 2 + 1;
124+
125+
this.projector.unprojectVector(mouse, this.camera);
126+
127+
var ray = new THREE.Ray(this.camera.position, mouse.subSelf(this.camera.position).normalize());
128+
129+
var intersects = ray.intersectScene(this.scene);
130+
if (intersects.length > 0) {
131+
if (this.selected != intersects[0].object) {
132+
if (this.selected) this.selected.materials[0].color.setHex(this.UNSELECTED_COLOR);
133+
this.selected = intersects[0].object;
134+
this.selected.materials[0].color.setHex(this.SELECTED_COLOR);
135+
}
136+
} else {
137+
if (this.selected) this.selected.materials[0].color.setHex(this.UNSELECTED_COLOR);
138+
this.selected = null;
139+
}
140+
this.onClick(this.selected ? this.meshes[this.selected.geometry.id] : 'nothing');
141+
};
142+
143+
this.animate = function() {
144+
// Include examples/js/RequestAnimationFrame.js for cross-browser compatibility.
145+
requestAnimationFrame(this.animate.bind(this));
146+
this.render();
147+
};
148+
149+
this.render = function() {
150+
this.renderer.render(this.scene,this.camera);
151+
};
152+
}

‎Client/floor.js‎

Lines changed: 5 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Client/index_sprint.html‎

Lines changed: 15 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -3,152 +3,29 @@
33
<title>BIM Web Client</title>
44
<script src="jquery-1.6.1.min.js"></script>
55
<script>
6-
var console = {log: function(msg) {
7-
}, error: function(msg) {
8-
}};
6+
if (console == undefined) {
7+
var console = {
8+
log: function(msg) {},
9+
error: function(msg) {}
10+
};
11+
}
912
</script>
1013
<script src="Three.js"></script>
1114
<script src="extras/io/JSONLoader.js"></script>
1215
<script src="examples/js/RequestAnimationFrame.js"></script>
16+
<script src="ThreeJsViewer.js"></script>
1317
<script>
14-
var camera, scene, renderer, geometry, material, mesh, projector, selected;
15-
var SELECTED_COLOR = 0xffff00;
16-
var UNSELECTED_COLOR = 0xFF0000;
17-
1818
$(document).ready(function() {
19-
init();
20-
animate();
19+
var viewer = new ThreeJsViewer();
20+
viewer.init('floor.js');
21+
viewer.onClick = function(id){
22+
$('#selection').html(id);
23+
};
24+
viewer.animate();
2125
});
22-
23-
function init() {
24-
25-
projector = new THREE.Projector();
26-
27-
var radius = 6371;
28-
renderer = new THREE.WebGLRenderer();
29-
renderer.sortObjects = false;
30-
31-
var width = window.innerWidth;
32-
var height = window.innerHeight;
33-
renderer.setSize(width, height);
34-
35-
camera = new THREE.TrackballCamera({
36-
37-
fov: 50,
38-
aspect: window.innerWidth / window.innerHeight,
39-
near: 1,
40-
far: 100000,
41-
42-
rotateSpeed: 1.0,
43-
zoomSpeed: 1.2,
44-
panSpeed: 0.2,
45-
46-
noZoom: false,
47-
noPan: false,
48-
49-
staticMoving: false,
50-
dynamicDampingFactor: 0.3,
51-
52-
minDistance: 0.1,
53-
maxDistance: 100000,
54-
55-
keys: [ 65, 83, 68 ], // [ rotateKey, zoomKey, panKey ],
56-
57-
domElement: renderer.domElement
58-
59-
});
60-
61-
camera.up = new THREE.Vector3(0, 0, 1);
62-
camera.position = new THREE.Vector3(1, 1, 1);
63-
camera.target.position = new THREE.Vector3(0, 0, 0);
64-
65-
scene = new THREE.Scene();
66-
67-
var light1 = new THREE.DirectionalLight(0xffffff, 2);
68-
light1.position.x = .5;
69-
light1.position.y = 1;
70-
light1.position.z = 2;
71-
light1.position.normalize();
72-
scene.addLight(light1);
73-
74-
var light2 = new THREE.DirectionalLight(0x555555, 1);
75-
light2.position.x = - 2;
76-
light2.position.y = - 1;
77-
light2.position.z = - .5;
78-
light2.position.normalize();
79-
scene.addLight(light2);
80-
81-
material = new THREE.MeshPhongMaterial({ color: UNSELECTED_COLOR });
82-
83-
var loader = new THREE.JSONLoader(true);
84-
loader.load({ model: "house.js", callback: function(geometry) {
85-
mesh = new THREE.Mesh(geometry, material);
86-
mesh.doubleSided = false;
87-
88-
geometry.computeBoundingBox();
89-
90-
var bb = geometry.boundingBox;
91-
var ext = {x: bb.x[1] - bb.x[0], y: bb.y[1] - bb.y[0], z: bb.z[1] - bb.z[0]};
92-
93-
// center mesh
94-
mesh.position.x = ext.x * -.5 - bb.x[0];
95-
mesh.position.y = ext.y * -.5 - bb.y[0];
96-
mesh.position.z = ext.z * -.5 - bb.z[0];
97-
98-
var maxExtent = Math.max.apply(Math, [ext.x, ext.y, ext.z]);
99-
camera.position = new THREE.Vector3(maxExtent, maxExtent, maxExtent);
100-
101-
// TODO: adjust clipping
102-
103-
scene.addObject(mesh);
104-
105-
} });
106-
107-
camera.updateProjectionMatrix();
108-
camera.screen.width = width;
109-
camera.screen.height = height;
110-
111-
document.body.appendChild(renderer.domElement);
112-
renderer.domElement.addEventListener('mousedown', onMouseDown, false);
113-
114-
}
115-
116-
117-
function onMouseDown(event) {
118-
event.preventDefault();
119-
120-
var mouse = new THREE.Vector3(0, 0, 0.5);
121-
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
122-
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
123-
124-
projector.unprojectVector(mouse, camera);
125-
126-
var ray = new THREE.Ray(camera.position, mouse.subSelf(camera.position).normalize());
127-
128-
var intersects = ray.intersectScene(scene);
129-
if (intersects.length > 0) {
130-
if (selected != intersects[0].object) {
131-
if (selected) selected.materials[0].color.setHex(UNSELECTED_COLOR);
132-
selected = intersects[0].object;
133-
selected.materials[0].color.setHex(SELECTED_COLOR);
134-
}
135-
} else {
136-
if (selected) selected.materials[0].color.setHex(UNSELECTED_COLOR);
137-
selected = null;
138-
}
139-
}
140-
141-
function animate() {
142-
// Include examples/js/RequestAnimationFrame.js for cross-browser compatibility.
143-
requestAnimationFrame(animate);
144-
render();
145-
}
146-
147-
function render() {
148-
renderer.render(scene, camera);
149-
}
15026
</script>
15127
</head>
152-
<body style="background-color: #CCEEEE;">
28+
<body style="background-color: #CCEEEE; padding: 0; margin: 0;">
29+
<p style="position: absolute; top: 10px; left: 10px; background-color: white; border: 1px solid black; padding: 5px;">selected: <span id="selection">nothing</span></p>
15330
</body>
15431
</html>

0 commit comments

Comments
 (0)