Skip to content

Commit e77238c

Browse files
author
naraesk
authored
Merge pull request #48 from AaronSil/feature/flyTo
Final changes
2 parents 45afb65 + cdd2914 commit e77238c

5 files changed

Lines changed: 577 additions & 64 deletions

File tree

‎ui/aframe.html‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,13 +81,14 @@
8181
<script type="text/javascript" src="scripts/AframeCanvasManipulator.js"></script>
8282
<script type="text/javascript" src="scripts/Application.js"></script>
8383
<script type="text/javascript" src="scripts/AframeActionController.js"></script>
84-
<script type="text/javascript" src="scripts/aframe-orbit-camera-component.js"></script>
84+
<!--<script type="text/javascript" src="scripts/aframe-orbit-camera-component.js"></script>-->
85+
<script type="text/javascript" src="scripts/camera-beta.js"></script>
8586

8687

8788
<link rel="stylesheet" href="Style.css" type="text/css" />
8889

8990
<!--setup-->
90-
<script type="text/javascript" src="setups/test/aframe.js"></script>
91+
<script type="text/javascript" src="setups/test/flyTo.js"></script>
9192

9293
</head>
9394
<body>
@@ -96,6 +97,8 @@
9697
$(function(){
9798
$("#canvas").load(encodeURI(modelUrl + "/model.html"));
9899
});
100+
101+
var globalCamera;
99102
</script>
100103
</div>
101104

‎ui/data/City bank aframe/model/model.html‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -26,22 +26,6 @@
2626
mouse-cursor=""
2727
>
2828
</a-entity>
29-
<!--<orbit-camera
30-
id="camera"
31-
fov="80"
32-
zoom="1"
33-
position="44.0 20.0 44.0"
34-
target="15.0 1.5 15.0"
35-
enableDamping="true"
36-
dampingFactor="0.25"
37-
rotateSpeed="0.25"
38-
panSpeed="0.25"
39-
invertZoom="true"
40-
logPosition="false"
41-
minDistance="0"
42-
maxDistance="1000"
43-
mouse-cursor="">
44-
</orbit-camera>-->
4529
<a-box id="ID_bdd240c8fe7174e6ac1cfdd5282de76eb7ad6815"
4630
position="19.0 1.5 23.0"
4731
width="32.0"

‎ui/scripts/AframeCanvasManipulator.js‎

Lines changed: 19 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -9,26 +9,29 @@ var canvasManipulator = (function () {
99
};
1010

1111
var scene = {};
12-
var threeJSScene = {};
1312

14-
var camera;
15-
var initialCameraView;
16-
17-
var testEntity;
13+
var initialCameraView = {};
1814

1915
function initialize() {
2016

2117
scene = document.querySelector("a-scene");
22-
threeJSScene = scene.object3D;
23-
camera = document.getElementById("camera");
2418

19+
initialCameraView.target = globalCamera.target;
20+
initialCameraView.position = globalCamera.object.position;
21+
initialCameraView.spherical = globalCamera.spherical;
2522
}
2623

2724
function reset() {
25+
let offset = new THREE.Vector3();
26+
offset.subVectors(initialCameraView.target, globalCamera.target).multiplyScalar(globalCamera.data.panSpeed);
27+
globalCamera.panOffset.add(offset);
28+
29+
globalCamera.sphericalDelta.phi = 0.25 * (initialCameraView.spherical.phi - globalCamera.spherical.phi);
30+
globalCamera.sphericalDelta.theta = 0.25 * (initialCameraView.spherical.theta - globalCamera.spherical.theta);
2831

32+
globalCamera.scale = initialCameraView.spherical.radius/globalCamera.spherical.radius;
2933
}
3034

31-
// working - save old transparency in case it is not 0?
3235
function changeTransparencyOfEntities(entities, value) {
3336
entities.forEach(function (entity2) {
3437
// getting the entity again here, because without it the check if originalTransparency is defined fails sometimes
@@ -50,7 +53,6 @@ var canvasManipulator = (function () {
5053
});
5154
}
5255

53-
// working
5456
function resetTransparencyOfEntities(entities) {
5557
entities.forEach(function (entity) {
5658
let component = document.getElementById(entity.id);
@@ -65,13 +67,8 @@ var canvasManipulator = (function () {
6567
});
6668
}
6769

68-
69-
// working
7070
function changeColorOfEntities(entities, color) {
7171
entities.forEach(function (entity) {
72-
// in x3dom this function would get entities of the model to change the color of the related object
73-
// for reference in canvasHoverController.js: var entity = model.getEntityById(multipartEvent.partID);
74-
// this entity gets handed over to the ActionController.js as part of an ApplicationEvent
7572
if (!(entity == undefined)) {
7673
var component = document.getElementById(entity.id);
7774
}
@@ -88,7 +85,6 @@ var canvasManipulator = (function () {
8885
);
8986
}
9087

91-
// working
9288
function resetColorOfEntities(entities) {
9389
entities.forEach(function (entity) {
9490
let component = document.getElementById(entity.id);
@@ -112,7 +108,6 @@ var canvasManipulator = (function () {
112108
object.setAttribute("color", color);
113109
}
114110

115-
// working
116111
function hideEntities(entities) {
117112
entities.forEach(function (entity) {
118113
let component = document.getElementById(entity.id);
@@ -124,7 +119,6 @@ var canvasManipulator = (function () {
124119
});
125120
}
126121

127-
// working
128122
function showEntities(entities) {
129123
entities.forEach(function (entity) {
130124
let component = document.getElementById(entity.id);
@@ -175,11 +169,11 @@ var canvasManipulator = (function () {
175169
});
176170
}
177171

178-
// after clicking an entity fit the camera to show this entity (angle stays the same)
179-
// not working
180172
function flyToEntity(entity) {
181-
/*document.querySelector("#camera").object3D.position = {x: 1, y: 2, z: 3};
182-
console.debug(document.querySelector("#camera").object3D.position);*/
173+
setCenterOfRotation(entity);
174+
let object = document.getElementById(entity.id);
175+
let boundingSphereRadius = object.object3DMap.mesh.geometry.boundingSphere.radius;
176+
globalCamera.scale = boundingSphereRadius/globalCamera.spherical.radius;
183177
}
184178

185179
function addElement(element) {
@@ -192,29 +186,10 @@ var canvasManipulator = (function () {
192186
}
193187

194188

195-
// not working yet
196-
// gets called from Mark- and SelectController if specified in the config
197-
function setCenterOfRotation(entity, setFocus) {
198-
var centerOfPart = getCenterOfEntity(entity);
199-
200-
viewpoint.setCenterOfRotation(centerOfPart);
201-
202-
if (setFocus) {
203-
var mat = viewarea.getViewMatrix().inverse();
204-
205-
var from = mat.e3();
206-
var at = viewarea._pick;
207-
var up = mat.e1();
208-
209-
var norm = mat.e0().cross(up).normalize();
210-
// get distance between look-at point and viewing plane
211-
var dist = norm.dot(viewarea._pick.subtract(from));
212-
213-
from = at.addScaled(norm, -dist);
214-
mat = x3dom.fields.SFMatrix4f.lookAt(from, at, up);
215-
216-
viewarea.animateTo(mat.inverse(), viewpoint);
217-
}
189+
function setCenterOfRotation(entity) {
190+
let offset = new THREE.Vector3();
191+
offset.subVectors(getCenterOfEntity(entity), globalCamera.target).multiplyScalar(globalCamera.data.panSpeed);
192+
globalCamera.panOffset.add(offset);
218193
}
219194

220195
function getCenterOfEntity(entity) {
@@ -270,7 +245,6 @@ var canvasManipulator = (function () {
270245
addElement: addElement,
271246
removeElement: removeElement,
272247

273-
274248
setCenterOfRotation: setCenterOfRotation,
275249
getCenterOfEntity: getCenterOfEntity,
276250

‎ui/scripts/CanvasResetView/CanvasResetViewController.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ var canvasResetViewController = (function() {
4040

4141

4242
function reset(){
43-
document.getElementById("x3dElement").runtime.showAll("negZ");
43+
canvasManipulator.reset();
4444
}
4545

4646

0 commit comments

Comments
 (0)