diff --git a/app/static/app/js/ModelView.jsx b/app/static/app/js/ModelView.jsx index 532e85ee..e5addf33 100644 --- a/app/static/app/js/ModelView.jsx +++ b/app/static/app/js/ModelView.jsx @@ -73,6 +73,8 @@ class ModelView extends React.Component { this.modelReference = null; this.toggleTexturedModel = this.toggleTexturedModel.bind(this); + + this.cameraMeshes = []; } assetsPath(){ @@ -187,6 +189,35 @@ class ModelView extends React.Component { viewer.fitToScreen(); }); }); + + viewer.renderer.domElement.addEventListener( 'mousedown', this.handleRenderClick ); + } + + componentWillUnmount(){ + viewer.renderer.domElement.removeEventListener( 'mousedown', this.handleRenderClick ); + } + + handleRenderClick = (evt) => { + const raycaster = new THREE.Raycaster(); + const rect = viewer.renderer.domElement.getBoundingClientRect(); + const [x, y] = [evt.clientX, evt.clientY]; + const array = [ + ( x - rect.left ) / rect.width, + ( y - rect.top ) / rect.height + ]; + const onClickPosition = new THREE.Vector2(...array); + const camera = viewer.scene.getActiveCamera(); + const mouse = new THREE.Vector3( + + ( onClickPosition.x * 2 ) - 1, + - ( onClickPosition.y * 2 ) + 1 ); + raycaster.setFromCamera( mouse, camera ); + const intersects = raycaster.intersectObjects( this.cameraMeshes ); + + if ( intersects.length > 0){ + //console.log(intersects); + const intersection = intersects[0]; + console.log(intersection); + } } loadCameras(){ @@ -229,7 +260,6 @@ class ModelView extends React.Component { // const cameraMeshes = new THREE.InstancedMesh( cameraObj.geometry, cameraObj.material, geojson.features.length ); // const dummy = new THREE.Object3D(); - window.meshes = []; let i = 0; geojson.features.forEach(feat => { @@ -244,22 +274,10 @@ class ModelView extends React.Component { viewer.scene.scene.add(cameraMesh); cameraMesh._feat = feat; - window.meshes.push(cameraMesh); + this.cameraMeshes.push(cameraMesh); i++; }); - - window.rotate = (arr) => { - window.meshes.forEach(m => { - const rotation = rotate(arr, m._feat.properties.rotation); - m.rotation.x = rotation.x; - m.rotation.y = rotation.y; - m.rotation.z = rotation.z; - - }) - } - - // viewer.scene.scene.add(cameraMeshes); }, undefined, console.error); }); } @@ -338,9 +356,10 @@ class ModelView extends React.Component { return (
{e.preventDefault();}}> -
{ this.container = domNode; }}>
+
{ this.container = domNode; }}>
diff --git a/app/static/app/js/components/ImagePopup.jsx b/app/static/app/js/components/ImagePopup.jsx index 61178577..1d1400a4 100644 --- a/app/static/app/js/components/ImagePopup.jsx +++ b/app/static/app/js/components/ImagePopup.jsx @@ -51,7 +51,7 @@ class ImagePopup extends React.Component { if (!expandThumb){ this.image.requestFullscreen(); - this.setState({ expandThumb: true}); + this.setState({ loading: true, expandThumb: true}); }else{ document.exitFullscreen(); this.setState({ expandThumb: false }); @@ -74,6 +74,7 @@ class ImagePopup extends React.Component { {error !== "" ?
{error}
: [
{ this.image = domNode;}}> + {loading && expandThumb ?
: ""}
,
diff --git a/app/static/app/js/css/ImagePopup.scss b/app/static/app/js/css/ImagePopup.scss index 8d0d581f..a6751332 100644 --- a/app/static/app/js/css/ImagePopup.scss +++ b/app/static/app/js/css/ImagePopup.scss @@ -10,6 +10,13 @@ &.fullscreen{ display: flex; align-items: center; + color: white; + i{ + font-size: 200%; + position: absolute; + left: 50%; + top: 45%; + } a{ cursor: zoom-out; }