1

web/public/static/css/main.css

@@ -7060,13 +7060,14 @@ a.hasHover.tag-link:hover {
 
 
 
-#hot{ 
+#hot, #menudiv{ 
 	padding: 0;
 	position: absolute;
 	width: 100%;
 	height: 100%;
     pointer-events:none; 
 	z-index: 101; 
+    left:0;top:0;
 }
 #hot>div{
     position: absolute;
@@ -7083,3 +7084,10 @@ a.hasHover.tag-link:hover {
     transform:translate(20px, -50%);
 }    
 
+
+
+#menudiv>div>div{  
+    width:1px; height:1px;
+    background:#fff;
+    position: absolute;
+}

web/public/static/js/main_2020_show.js

@@ -35,6 +35,72 @@ g_tourAudio.oncanplaythrough = function() {
   
  
  
+ 
+ 
+
+var menuDiv = {
+   
+    visiblePano: '1c8790272448494b8a3d4148d27af14c',
+    
+    visi : false
+} 
+ 
+
+var initMenu = function(){
+    getCSS3DObject()
+     
+    var renderer2 = new THREE.CSS3DRenderer();
+    renderer2.setSize( window.innerWidth, window.innerHeight );
+    renderer2.domElement.id =  'menudiv' 
+    $("#gui-parent")[0].appendChild(renderer2.domElement)
+    menuDiv.renderer2 = renderer2
+    
+    var element = document.createElement( 'div' );
+    element.id = 'menu'
+    var scene2 = new THREE.Scene();
+    var object = new THREE.CSS3DObject( element );
+   
+    object.position.set(21.54208735633664, 1.1215120888242198, -1.84625904360641)
+    object.rotation.set(-1.9353890374834315,  -0.3429842325538349, -2.429687526335148)
+    object.scale.set(1.297070488891195, 0.735567159698789, 1)
+    
+    
+    scene2.add( object );
+    
+    menuDiv.scene2 = scene2
+    menuDiv.object = object
+    
+} 
+
+var updateMenuPos = function(){
+    return
+    
+    
+    
+    if(!menuDiv.visi){
+        menuDiv.$div.css("display","none"); 
+        return
+    }
+    var pos = math.getPos2d(menuDiv.position, player.camera, $("#player")[0])
+    if(pos.inSight && pos.trueSide){
+        menuDiv.$div.css( { "left" : `${pos.pos.x}px`,  "top": `${pos.pos.y}px ` });
+        menuDiv.$div.css("display","block"); 
+    }else{
+        menuDiv.$div.css("display","none"); 
+    }
+} 
+    
+ 
+var updateMenuVisi = function(toPano){
+     
+    menuDiv.visi = toPano && (toPano.id == menuDiv.visiblePano)
+    
+}
+ 
+ 
+ 
+ 
+ 
   
 var dom = {//许钟文add
 	getOffset: function(type, element, parent) { 
@@ -22328,7 +22394,7 @@ window.Modernizr = function(n, e, t) {
                  //-------------------
                 window.initOverlay(r)
                 this.model.loadOverlays() 
-                 
+                initMenu()
                 //-------------------
                 
                 
@@ -22580,7 +22646,7 @@ window.Modernizr = function(n, e, t) {
                                 }
                             }
                         })
-                        
+                        updateMenuPos()
                     }
                 
 
@@ -23263,6 +23329,8 @@ window.Modernizr = function(n, e, t) {
                     this.updateHotVisible(i); //更新热点显示
                     this.transitionPos({type:"beforeFlytopano", pano:i, dur:I})//add 
                     Overlay.updateVisibles([this.currentPano, i])
+                    updateMenuVisi(false)
+                    
                     
                     //地标变化
                     if(this.model.floorLogos){
@@ -23308,10 +23376,12 @@ window.Modernizr = function(n, e, t) {
                                 this.model.changefloorLogoOpa({index:0,opa:1,dur:0});//this.model.floorLogos[0].material.uniforms.opacity.value = 1;
                                 this.model.floorLogos[1].visible = false;
                             }
-                            
+                            updateMenuVisi(this.currentPano)
                              
                             Overlay.updateVisibles([this.currentPano])//add
                         }
+                        
+                        
                     }
                     .bind(this), 0, B, "camFly", V.FlyToPano)
                 }
@@ -23732,7 +23802,7 @@ window.Modernizr = function(n, e, t) {
                 }else{  
                     this.transitionPos({type:"beforeFlyOut",  dur:I/2})//add                       
                 }
-                
+                updateMenuVisi(false)
                 //------------------------------------
                 
                 
@@ -23835,6 +23905,8 @@ window.Modernizr = function(n, e, t) {
                         this.model.floorLogos[0].visible = true
                     )
                     
+                    updateMenuVisi(this.mode == u.PANORAMA && this.currentPano)
+                    
                     if(this.mode == u.PANORAMA){ 
                         Overlay.updateVisibles([this.currentPano])
                     }else{
@@ -24671,6 +24743,8 @@ window.Modernizr = function(n, e, t) {
             this.effects.aspect = e / t,
 			/* this.renderer.setSize(e, t),  -----MP   */
             this.renderer.setSize(e, t, false, devicePixelRatio), //改  为了防止给canvas设置宽高
+            menuDiv.renderer2 && menuDiv.renderer2.setSize(e, t)
+            
             this.composer.setSize(e, t);
             for (var i = 0; i < this.resizeListeners.length; i++)
                 this.resizeListeners[i].setSize(e, t)
@@ -24679,8 +24753,8 @@ window.Modernizr = function(n, e, t) {
         n.prototype.render = function() {
             //this.effects.currentBlur > 0 ? this.composer.render() : this.renderer.render(this.scene, this.camera)
             
-            this.effects.transitionMaskPass.enabled ? this.composer.render() : this.renderer.render(this.scene, this.camera)
-        
+            this.renderer.render(this.scene, this.camera)
+            menuDiv.renderer2 && menuDiv.renderer2.render(menuDiv.scene2,  this.camera )
         }
          
         /******************************************************************************************************徐世廷**********************************************************************/
@@ -58578,6 +58652,345 @@ function initTransitionPass(THREE){
 }
 
 
+/**
+ * Based on http://www.emagix.net/academic/mscs-project/item/camera-sync-with-css3-and-webgl-threejs
+ * @author mrdoob / http://mrdoob.com/
+ * @author yomotsu / https://yomotsu.net/
+ */
+ 
+ function getCSS3DObject(){
+
+    THREE.CSS3DObject = function ( element ) {
+
+        THREE.Object3D.call( this );
+
+        this.element = element;
+        this.element.style.position = 'absolute';
+
+        this.addEventListener( 'removed', function () {
+
+            if ( this.element.parentNode !== null ) {
+
+                this.element.parentNode.removeChild( this.element );
+
+            }
+
+        } );
+
+    };
+
+    THREE.CSS3DObject.prototype = Object.create( THREE.Object3D.prototype );
+    THREE.CSS3DObject.prototype.constructor = THREE.CSS3DObject;
+
+    THREE.CSS3DSprite = function ( element ) {
+
+        THREE.CSS3DObject.call( this, element );
+
+    };
+
+    THREE.CSS3DSprite.prototype = Object.create( THREE.CSS3DObject.prototype );
+    THREE.CSS3DSprite.prototype.constructor = THREE.CSS3DSprite;
+
+    //
+
+    THREE.CSS3DRenderer = function () {
+
+        console.log( 'THREE.CSS3DRenderer', THREE.REVISION );
+
+        var _width, _height;
+        var _widthHalf, _heightHalf;
+
+        var matrix = new THREE.Matrix4();
+
+        var cache = {
+            camera: { fov: 0, style: '' },
+            objects: new WeakMap()
+        };
+
+        var domElement = document.createElement( 'div' );
+        domElement.style.overflow = 'hidden';
+
+        this.domElement = domElement;
+
+        var cameraElement = document.createElement( 'div' );
+
+        cameraElement.style.WebkitTransformStyle = 'preserve-3d';
+        cameraElement.style.transformStyle = 'preserve-3d';
+
+        domElement.appendChild( cameraElement );
+
+        var isIE = /Trident/i.test( navigator.userAgent );
+
+        this.getSize = function () {
+
+            return {
+                width: _width,
+                height: _height
+            };
+
+        };
+
+        this.setSize = function ( width, height ) {
+
+            _width = width;
+            _height = height;
+            _widthHalf = _width / 2;
+            _heightHalf = _height / 2;
+
+            domElement.style.width = width + 'px';
+            domElement.style.height = height + 'px';
+
+            cameraElement.style.width = width + 'px';
+            cameraElement.style.height = height + 'px';
+
+        };
+
+        function epsilon( value ) {
+
+            return Math.abs( value ) < 1e-10 ? 0 : value;
+
+        }
+
+        function getCameraCSSMatrix( matrix ) {
+
+            var elements = matrix.elements;
+
+            return 'matrix3d(' +
+                epsilon( elements[ 0 ] ) + ',' +
+                epsilon( - elements[ 1 ] ) + ',' +
+                epsilon( elements[ 2 ] ) + ',' +
+                epsilon( elements[ 3 ] ) + ',' +
+                epsilon( elements[ 4 ] ) + ',' +
+                epsilon( - elements[ 5 ] ) + ',' +
+                epsilon( elements[ 6 ] ) + ',' +
+                epsilon( elements[ 7 ] ) + ',' +
+                epsilon( elements[ 8 ] ) + ',' +
+                epsilon( - elements[ 9 ] ) + ',' +
+                epsilon( elements[ 10 ] ) + ',' +
+                epsilon( elements[ 11 ] ) + ',' +
+                epsilon( elements[ 12 ] ) + ',' +
+                epsilon( - elements[ 13 ] ) + ',' +
+                epsilon( elements[ 14 ] ) + ',' +
+                epsilon( elements[ 15 ] ) +
+            ')';
+
+        }
+
+        function getObjectCSSMatrix( matrix, cameraCSSMatrix ) {
+
+            var elements = matrix.elements;
+            var matrix3d = 'matrix3d(' +
+                epsilon( elements[ 0 ] ) + ',' +
+                epsilon( elements[ 1 ] ) + ',' +
+                epsilon( elements[ 2 ] ) + ',' +
+                epsilon( elements[ 3 ] ) + ',' +
+                epsilon( - elements[ 4 ] ) + ',' +
+                epsilon( - elements[ 5 ] ) + ',' +
+                epsilon( - elements[ 6 ] ) + ',' +
+                epsilon( - elements[ 7 ] ) + ',' +
+                epsilon( elements[ 8 ] ) + ',' +
+                epsilon( elements[ 9 ] ) + ',' +
+                epsilon( elements[ 10 ] ) + ',' +
+                epsilon( elements[ 11 ] ) + ',' +
+                epsilon( elements[ 12 ] ) + ',' +
+                epsilon( elements[ 13 ] ) + ',' +
+                epsilon( elements[ 14 ] ) + ',' +
+                epsilon( elements[ 15 ] ) +
+            ')';
+
+            if ( isIE ) {
+
+                return 'translate(-50%,-50%)' +
+                    'translate(' + _widthHalf + 'px,' + _heightHalf + 'px)' +
+                    cameraCSSMatrix +
+                    matrix3d;
+
+            }
+
+            return 'translate(-50%,-50%)' + matrix3d;
+
+        }
+
+        function renderObject( object, camera, cameraCSSMatrix ) {
+
+            if ( object instanceof THREE.CSS3DObject ) {
+
+                var style;
+
+                if ( object instanceof THREE.CSS3DSprite ) {
+
+                    // http://swiftcoder.wordpress.com/2008/11/25/constructing-a-billboard-matrix/
+
+                    matrix.copy( camera.matrixWorldInverse );
+                    matrix.transpose();
+                    matrix.copyPosition( object.matrixWorld );
+                    matrix.scale( object.scale );
+
+                    matrix.elements[ 3 ] = 0;
+                    matrix.elements[ 7 ] = 0;
+                    matrix.elements[ 11 ] = 0;
+                    matrix.elements[ 15 ] = 1;
+
+                    style = getObjectCSSMatrix( matrix, cameraCSSMatrix );
+
+                } else {
+
+                    style = getObjectCSSMatrix( object.matrixWorld, cameraCSSMatrix );
+
+                }
+
+                var element = object.element;
+                var cachedStyle = cache.objects.get( object );
+
+                if ( cachedStyle === undefined || cachedStyle !== style ) {
+
+                    element.style.WebkitTransform = style;
+                    element.style.transform = style;
+
+                    var objectData = { style: style };
+
+                    if ( isIE ) {
+
+                        objectData.distanceToCameraSquared = getDistanceToSquared( camera, object );
+
+                    }
+
+                    cache.objects.set( object, objectData );
+
+                }
+
+                if ( element.parentNode !== cameraElement ) {
+
+                    cameraElement.appendChild( element );
+
+                }
+
+            }
+
+            for ( var i = 0, l = object.children.length; i < l; i ++ ) {
+
+                renderObject( object.children[ i ], camera, cameraCSSMatrix );
+
+            }
+
+        }
+
+        var getDistanceToSquared = function () {
+
+            var a = new THREE.Vector3();
+            var b = new THREE.Vector3();
+
+            return function ( object1, object2 ) {
+
+                a.setFromMatrixPosition( object1.matrixWorld );
+                b.setFromMatrixPosition( object2.matrixWorld );
+
+                return a.distanceToSquared( b );
+
+            };
+
+        }();
+
+        function filterAndFlatten( scene ) {
+
+            var result = [];
+
+            scene.traverse( function ( object ) {
+
+                if ( object instanceof THREE.CSS3DObject ) result.push( object );
+
+            } );
+
+            return result;
+
+        }
+
+        function zOrder( scene ) {
+
+            var sorted = filterAndFlatten( scene ).sort( function ( a, b ) {
+
+                var distanceA = cache.objects.get( a ).distanceToCameraSquared;
+                var distanceB = cache.objects.get( b ).distanceToCameraSquared;
+
+                return distanceA - distanceB;
+
+            } );
+
+            var zMax = sorted.length;
+
+            for ( var i = 0, l = sorted.length; i < l; i ++ ) {
+
+                sorted[ i ].element.style.zIndex = zMax - i;
+
+            }
+
+        }
+
+        this.render = function ( scene, camera ) {
+
+            var fov = camera.projectionMatrix.elements[ 5 ] * _heightHalf;
+
+            if ( cache.camera.fov !== fov ) {
+
+                if ( camera.type == "PerspectiveCamera"   /* camera.isPerspectiveCamera  */) {
+
+                    domElement.style.WebkitPerspective = fov + 'px';
+                    domElement.style.perspective = fov + 'px';
+
+                }
+
+                cache.camera.fov = fov;
+
+            }
+
+            scene.updateMatrixWorld();
+
+            if ( camera.parent === null ) camera.updateMatrixWorld();
+
+            if ( camera.type == "OrthographicCamera"  /*  camera.isOrthographicCamera */ ) {
+
+                var tx = - ( camera.right + camera.left ) / 2;
+                var ty = ( camera.top + camera.bottom ) / 2;
+
+            }
+
+            var cameraCSSMatrix = camera.type == "OrthographicCamera"  /* camera.isOrthographicCamera */ ?
+                'scale(' + fov + ')' + 'translate(' + epsilon( tx ) + 'px,' + epsilon( ty ) + 'px)' + getCameraCSSMatrix( camera.matrixWorldInverse ) :
+                'translateZ(' + fov + 'px)' + getCameraCSSMatrix( camera.matrixWorldInverse );
+
+            var style = cameraCSSMatrix +
+                'translate(' + _widthHalf + 'px,' + _heightHalf + 'px)';
+
+            if ( cache.camera.style !== style && ! isIE ) {
+
+                cameraElement.style.WebkitTransform = style;
+                cameraElement.style.transform = style;
+
+                cache.camera.style = style;
+
+            }
+
+            renderObject( scene, camera, cameraCSSMatrix );
+
+            if ( isIE ) {
+
+                // IE10 and 11 does not support 'preserve-3d'.
+                // Thus, z-order in 3D will not work.
+                // We have to calc z-order manually and set CSS z-index for IE.
+                // FYI: z-index can't handle object intersection
+                zOrder( scene );
+
+            }
+
+        };
+
+    };
+}
+
+
+
+
+
 /* 
    笔记：