Skip to content

Commit 4da1966

Browse files
hlghlg
committed
factored out some viewer methods + small ajax app to select revisions
1 parent 0cd6d7b commit 4da1966

2 files changed

Lines changed: 135 additions & 12 deletions

File tree

‎Client/ThreeJsViewer.js‎

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ function ThreeJsViewer(){
44
this.UNSELECTED_COLOR = 0xFF0000;
55
this.meshes = {};
66

7-
this.init = function(modelUrl) {
7+
this.init = function(container) {
88

99
this.projector = new THREE.Projector();
10-
this.size = {width: window.innerWidth - 1, height: window.innerHeight - 1}
10+
this.size = {width: container.width(), height: container.height()};
1111

1212
this.renderer = new THREE.WebGLRenderer();
1313
this.renderer.sortObjects = false;
@@ -45,6 +45,8 @@ function ThreeJsViewer(){
4545
this.camera.screen.height = this.size.height;
4646

4747
this.scene = new THREE.Scene();
48+
this.root = new THREE.Object3D();
49+
this.scene.addObject(this.root);
4850

4951
var light1 = new THREE.DirectionalLight(0xffffff, 2);
5052
light1.position.x = .5;
@@ -60,10 +62,14 @@ function ThreeJsViewer(){
6062
light2.position.normalize();
6163
this.scene.addLight(light2);
6264

65+
container.click(this.onMouseDown.bind(this));
66+
container.append(this.renderer.domElement);
67+
this.container = container;
68+
this.onclick = function(){};
69+
};
6370

71+
this.loadModel = function(modelUrl){
6472
var geometryLoader = new THREE.JSONLoader(true);
65-
this.root = new THREE.Object3D();
66-
this.scene.addObject(this.root);
6773

6874
var callback = function(partId) { return function(geometry) {
6975
var material = new THREE.MeshPhongMaterial({ color: this.UNSELECTED_COLOR });
@@ -94,12 +100,13 @@ function ThreeJsViewer(){
94100
}.bind(this);
95101
geometryLoader.onLoadStart();
96102
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+
};
104+
this.clearModel = function(){
105+
this.scene.removeChild(this.root);
106+
this.root = new THREE.Object3D();
107+
this.scene.addObject(this.root);
108+
this.meshes = {};
109+
};
103110
this.computeBoundingBox = function(){
104111
this.root.children[0].geometry.computeBoundingBox();
105112
var initialBB = this.root.children[0].geometry.boundingBox;
@@ -119,8 +126,8 @@ function ThreeJsViewer(){
119126
event.preventDefault();
120127

121128
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;
129+
mouse.x = (event.pageX - this.container.offset().left) / this.size.width * 2 - 1; // ( event.clientX / this.size.width ) * 2 - 1;
130+
mouse.y = - (event.pageY - this.container.offset().top) / this.size.height * 2 + 1; // - ( event.clientY / this.size.height ) * 2 + 1;
124131

125132
this.projector.unprojectVector(mouse, this.camera);
126133

‎Client/index_served.html‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
<html>
2+
<head>
3+
<title>BIM Web Client</title>
4+
<style type="text/css">
5+
body {
6+
background-color: #CCEEEE;
7+
padding: 0; margin: 0;
8+
}
9+
#viewerContainer {
10+
height: 450px;
11+
width: 600px;
12+
}
13+
.boxed {
14+
background-color: white;
15+
border: 1px solid black;
16+
padding: 5px;
17+
}
18+
p, div {
19+
margin: 10px;
20+
}
21+
form {
22+
display: inline;
23+
}
24+
</style>
25+
<script src="jquery-1.6.1.min.js"></script>
26+
<script>
27+
if (console == undefined) {
28+
var console = {
29+
log: function(msg) {
30+
},
31+
error: function(msg) {
32+
}
33+
};
34+
}
35+
</script>
36+
<script src="Three.js"></script>
37+
<script src="RequestAnimationFrame.js"></script>
38+
<script src="ThreeJsViewer.js"></script>
39+
<script>
40+
function revisionUpdate(poid) {
41+
$('#roids').empty();
42+
$.ajax({url: '/rest/getAllRevisionsOfProject', data: 'poid='+poid, success: function(data){
43+
var select = $('#roids');
44+
$(data).find('sRevision').each(function(){
45+
var revision = $(this);
46+
var value = revision.find('oid').text();
47+
var label = revision.find('id').text();
48+
$('<option />').val(value).text(label).appendTo(select);
49+
})
50+
}});
51+
}
52+
function projectUpdate() {
53+
$('#revision').show();
54+
$('#poids').empty();
55+
$.ajax({url: '/rest/getAllProjects', success: function(data) {
56+
var select = $('#poids');
57+
$(data).find('sProject').each(function(){
58+
var project = $(this);
59+
var value = project.find('oid').text();
60+
var label = project.find('name').text();
61+
$('<option />').val(value).text(label).appendTo(select);
62+
});
63+
revisionUpdate(select.val());
64+
}});
65+
}
66+
var viewer
67+
$(document).ready(function() {
68+
viewer = new ThreeJsViewer();
69+
viewer.init($('#viewerContainer'));
70+
viewer.onClick = function(id) {
71+
$('#selection').html(id);
72+
};
73+
viewer.animate();
74+
$('#login').submit(function() {
75+
$.ajax({
76+
url: '/rest/login',
77+
data: $('#login').serialize(),
78+
success: projectUpdate
79+
});
80+
return false;
81+
});
82+
$('#poids').change(function() {
83+
revisionUpdate($(this).val());
84+
});
85+
$('#revision').submit(function(){
86+
$.ajax({
87+
url: '/rest/download',
88+
data: 'roid='+$(this.roids).val()+'&resultType=THREEJS',
89+
success: function(data) {
90+
viewer.clearModel();
91+
viewer.loadModel('/download?longActionId=' + data);
92+
}
93+
});
94+
return false;
95+
});
96+
});
97+
</script>
98+
</head>
99+
<body>
100+
<div>
101+
<form id="login" class="boxed" style="margin-right: 20px;">
102+
User <input name="username" type="text" />
103+
PW <input name="password" type="password" />
104+
<input type="submit" value="Login"/>
105+
</form>
106+
<form id="revision" class="boxed" style="display: none;">
107+
<select id="poids"></select>
108+
<select id="roids"></select>
109+
<input type="submit" value="Show" />
110+
</form>
111+
</div>
112+
<div id="viewerContainer"></div>
113+
<p class="boxed">
114+
selected: <span id="selection">nothing</span></p>
115+
</body>
116+
</html>

0 commit comments

Comments
 (0)