ptcrealitylab · benptc · Nov 9, 2021 · Nov 9, 2021
diff --git a/tools/anchoredMesh/icon.gif b/tools/anchoredMesh/icon.gif
diff --git a/tools/anchoredMesh/index.html b/tools/anchoredMesh/index.html
@@ -0,0 +1,129 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>THREE.js Sphere</title>
+    <script src="objectDefaultFiles/object.js"></script>
+    <script src="objectDefaultFiles/pep.min.js"></script>
+    <script src="resources/threejs-src/2016/three.min.js"></script>
+</head>
+<body>
+<script>
+    var camera, scene, renderer;
+    var threejsContainerObj;
+    var realityInterface;
+    var mesh;
+    var isProjectionMatrixSet = false;
+    var rendererWidth = screen.height;
+    var rendererHeight = screen.width;
+    var aspectRatio = rendererWidth / rendererHeight;
+    var raycaster = new THREE.Raycaster();
+    var mouse = new THREE.Vector2();
+
+    window.addEventListener('load', function() {
+        // create a fullscreen webgl renderer for the threejs content and add to the dom
+        renderer = new THREE.WebGLRenderer( { alpha: true } );
+        renderer.setPixelRatio( window.devicePixelRatio );
+        renderer.setSize( rendererWidth, rendererHeight );
+        document.body.appendChild( renderer.domElement );
+
+        // create a threejs camera and scene
+        camera = new THREE.PerspectiveCamera( 70, aspectRatio, 1, 1000 );
+        scene = new THREE.Scene();
+
+        threejsContainerObj = new THREE.Object3D();
+        threejsContainerObj.matrixAutoUpdate = false;
+        scene.add(threejsContainerObj);
+
+        var ambLight = new THREE.AmbientLight(0x404040);
+        scene.add(ambLight);
+
+        createMesh();
+
+        // make the frame fullscreen within the reality editor,
+        // and subscribe to the modelview and projection matrices
+        realityInterface = new RealityInterface();
+
+        realityInterface.onRealityInterfaceLoaded(function() {
+
+            realityInterface.getScreenDimensions(function(width, height) {
+                document.body.width = width + 'px';
+                document.body.height = height + 'px';
+                rendererWidth = width;
+                rendererHeight = height;
+                renderer.setSize( rendererWidth, rendererHeight );
+                realityInterface.changeFrameSize(width, height);
+            });
+
+            realityInterface.setFullScreenOn();
+            realityInterface.setMoveDelay(400);
+            realityInterface.registerTouchDecider(touchDecider);
+
+            // IMPORTANT: no need to separately subscribe to groundplane and modelview
+            // replace addMatrixListener and addGroundPlaneMatrixListener with addAnchoredModelViewListener
+            realityInterface.subscribeToAnchoredModelView();
+            realityInterface.addAnchoredModelViewListener(renderScene);
+        });
+    });
+
+    function createMesh() {
+        let boxWidthMeters = 0.8;
+        let boxHeightMeters = 1.5;
+        let boxDepthMeters = 0.8;
+        let mToUnit = 1000;
+        let geometry = new THREE.BoxGeometry(boxWidthMeters * mToUnit, boxHeightMeters * mToUnit, boxDepthMeters * mToUnit);
+        const palette = ['#eb0e7e']; // '#ff0077', '#0077ff', '#ff00ff', '#ff7700', '#7700ff', '#ffff00'];
+        const sensorColor = palette[Math.floor(Math.random() * palette.length)];
+        let material = new THREE.MeshBasicMaterial({
+            color: sensorColor,
+            opacity: 0.3,
+            transparent: true,
+        });
+        mesh = new THREE.Mesh(geometry, material);
+        mesh.position.x = 0;
+        mesh.position.y = boxHeightMeters / 2 * mToUnit;
+        mesh.position.z = 0;
+        threejsContainerObj.add( mesh );
+    }
+
+    function touchDecider(eventData) {
+        //1. sets the mouse position with a coordinate system where the center
+        //   of the screen is the origin
+        mouse.x = ( eventData.x / window.innerWidth ) * 2 - 1;
+        mouse.y = - ( eventData.y / window.innerHeight ) * 2 + 1;
+
+        //2. set the picking ray from the camera position and mouse coordinates
+        raycaster.setFromCamera( mouse, camera );
+
+        //3. compute intersections
+        var intersects = raycaster.intersectObjects( scene.children, true );
+
+        return intersects.length > 0;
+    }
+
+    function setMatrixFromArray(matrix, array) {
+        matrix.set( array[0], array[4], array[8], array[12],
+            array[1], array[5], array[9], array[13],
+            array[2], array[6], array[10], array[14],
+            array[3], array[7], array[11], array[15]
+        );
+    }
+
+    function renderScene(anchoredModelViewMatrix, projectionMatrix) {
+        // only set the projection matrix for the camera 1 time, since it stays the same
+        if (!isProjectionMatrixSet && projectionMatrix.length > 0) {
+            setMatrixFromArray(camera.projectionMatrix, projectionMatrix);
+            isProjectionMatrixSet = true;
+        }
+
+        if (isProjectionMatrixSet) { // don't turn into else statement, both can happen
+            // update model view matrix
+            setMatrixFromArray(threejsContainerObj.matrix, anchoredModelViewMatrix);
+            // render the scene
+            threejsContainerObj.visible = true;
+            renderer.render( scene, camera );
+        }
+    }
+</script>
+</body>
+</html>
diff --git a/tools/anchoredMesh/resources/navigation-arrow.css b/tools/anchoredMesh/resources/navigation-arrow.css
@@ -0,0 +1,28 @@
+#navigationArrow {
+    /*border-bottom-style: solid;*/
+    /*border-bottom-width: 0;*/
+    /*border-left-style: solid;*/
+    /*border-left-width: 0;*/
+    border-right-style: solid;
+    border-right-width: 4px;
+    border-top-style: solid;
+    border-top-width: 4px;
+    box-sizing: border-box;
+    /*color: rgb(170, 170, 170);*/
+    color: cyan;
+    display: inline-block;
+    font-family: sans-serif;
+    font-style: italic;
+    height: 20px;
+    line-height: 18px;
+    margin-bottom: 10px;
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-top: 10px;
+    /*position: relative;*/
+    text-align: center;
+    transform: matrix(0.7071067811865476, -0.7071067811865475, 0.7071067811865475, 0.7071067811865476, 0, 0);
+    vertical-align: middle;
+    width: 20px;
+    position: absolute;
+}
diff --git a/tools/anchoredMesh/resources/navigation-arrow.js b/tools/anchoredMesh/resources/navigation-arrow.js
@@ -0,0 +1,197 @@
+(function(exports) {
+
+    var isPaused = false;
+    var container;
+    var containerWrapper;
+    var realityInterface;
+    var alwaysFullscreen;
+    var originalTouchDecider;
+    var isArrowShown = false;
+    var isWithinScreen = true;
+    var centerPosition = {
+        x: 0,
+        y: 0
+    };
+    var isMoving = false;
+    var prevMoveDelay;
+    var isTransitioningFullscreen = false;
+    var arrow;
+    var arrowSize = 20;
+    var margins = {
+        top: 20,
+        bottom: 20,
+        left: 20,
+        right: 82
+    };
+
+    function init(_container, _realityInterface, _alwaysFullscreen, _originalTouchDecider) {
+        container = _container;
+        realityInterface = _realityInterface;
+        alwaysFullscreen = _alwaysFullscreen;
+        originalTouchDecider = _originalTouchDecider;
+
+        realityInterface.subscribeToMatrix();
+        realityInterface.addMatrixListener(matrixCallback);
+        realityInterface.addScreenPositionListener(screenPositionCallback);
+        realityInterface.addIsMovingListener(isMovingCallback);
+
+        containerWrapper = document.createElement('div');
+        containerWrapper.style.width = '100%';
+        containerWrapper.style.height = '100%';
+        wrap(container, containerWrapper);
+
+        arrow = document.createElement('div');
+        arrow.id = 'navigationArrow';
+        document.body.appendChild(arrow);
+        arrow.style.display = 'none';
+    }
+
+    function pause() {
+        // if (isWithinScreen) {
+            hideArrowIfNeeded();
+        // }
+        isPaused = true;
+    }
+
+    function resume() {
+        isPaused = false;
+        if (!isWithinScreen) {
+            showArrowIfNeeded();
+        }
+    }
+
+    function wrap(el, wrapper) {
+        el.parentNode.insertBefore(wrapper, el);
+        wrapper.appendChild(el);
+    }
+
+    function screenPositionCallback(frameScreenPosition) {
+        centerPosition = frameScreenPosition.center;
+
+        var extraPadding = 20;
+        isWithinScreen = !(frameScreenPosition.lowerRight.x < 0 - extraPadding || frameScreenPosition.lowerRight.y < 0 - extraPadding ||
+                frameScreenPosition.upperLeft.x > screen.height + extraPadding || frameScreenPosition.upperLeft.y > screen.width + extraPadding );
+    }
+
+    function hideArrowIfNeeded() {
+        if (!isTransitioningFullscreen) {
+            if (isArrowShown) {
+                isTransitioningFullscreen = true;
+                containerWrapper.style.display = 'none';
+                arrow.style.display = 'none';
+                if (!alwaysFullscreen) {
+                    realityInterface.setFullScreenOff();
+                }
+                // become movable and listen for touches again
+                realityInterface.setMoveDelay(prevMoveDelay);
+                if (originalTouchDecider) {
+                    realityInterface.registerTouchDecider(originalTouchDecider);
+                } else {
+                    realityInterface.unregisterTouchDecider();
+                }
+                setTimeout(function() {
+                    containerWrapper.style.display = '';
+                    isTransitioningFullscreen = false;
+                    isArrowShown = false;
+                    if (visibilityListener) {
+                        visibilityListener(false);
+                    }
+                }, 100);
+            }
+        }
+    }
+
+    function showArrowIfNeeded() {
+        if (!isTransitioningFullscreen) {
+            if (!isArrowShown) {
+
+                isTransitioningFullscreen = true;
+                containerWrapper.style.display = 'none';
+                arrow.style.display = 'none';
+                realityInterface.setFullScreenOn();
+
+                // become immovable and ignore touches
+                prevMoveDelay = realityObject.moveDelay;
+                realityInterface.setMoveDelay(-1);
+                realityInterface.registerTouchDecider(function() {
+                    return false;
+                });
+
+                setTimeout(function() {
+                    arrow.style.display = 'inline';
+                    isTransitioningFullscreen = false;
+                    isArrowShown = true;
+                    if (visibilityListener) {
+                        visibilityListener(true);
+                    }
+                }, 100);
+
+            }
+        }
+    }
+
+    function matrixCallback(/*modelViewMatrix, projectionMatrix*/) {
+        if (isPaused) return;
+
+        if (isMoving || isWithinScreen) {
+            hideArrowIfNeeded();
+
+        } else {
+            updateArrow();
+            showArrowIfNeeded();
+        }
+    }
+
+    function updateArrow() {
+        var arrowX = centerPosition.x;
+        var arrowY = centerPosition.y;
+        var centerX = (screen.height / 2);
+        var centerY = (screen.width / 2);
+
+        var dx = arrowX - centerX;
+        var dy = arrowY - centerY;
+
+        var angleOffset = -1 * Math.PI / 4; // icon is naturally facing upper right... turn to point straight up
+        var arrowAngle = angleOffset + Math.atan2(dy, dx) + Math.PI/2;
+
+        var distance = Math.sqrt(dx*dx + dy*dy); //to put it as far away as the object, limited to within the screen
+        var newX = centerX + distance * Math.cos(arrowAngle+angleOffset);
+        var newY = centerY + distance * Math.sin(arrowAngle+angleOffset);
+
+        newX = Math.max(margins.left, Math.min(screen.height - 2*arrowSize - margins.right, newX));
+        newY = Math.max(margins.top, Math.min(screen.width - 2*arrowSize - margins.bottom, newY));
+
+        arrow.style.left = newX + 'px';
+        arrow.style.top = newY + 'px';
+        arrow.style.transform = 'rotate(' + arrowAngle + 'rad)';
+    }
+
+    function setMargins(top, bottom, left, right) {
+        margins.top = top;
+        margins.bottom = bottom;
+        margins.left = left;
+        margins.right = right;
+    }
+
+    function isMovingCallback(e) {
+        if (e) {
+            console.log('disable arrow mode until done moving... ');
+            isMoving = true;
+        } else {
+            console.log('enable arrow mode, not moving anymore');
+            isMoving = false;
+        }
+    }
+
+    var visibilityListener = null;
+    function registerArrowShownListener(callback) {
+        visibilityListener = callback;
+    }
+
+    exports.initNavigationArrow = init;
+    exports.pauseNavigationArrow = pause;
+    exports.resumeNavigationArrow = resume;
+    exports.setNavigationMargins = setMargins;
+    exports.registerArrowShownListener = registerArrowShownListener;
+
+})(window);