123

index.html

@@ -75,7 +75,7 @@
         top: 0;
         left: 0;
       ">
-        <!-- <button id = "enterBtn">点击进入</button> -->
+        <button id = "enterBtn">点击进入</button>
       </div>
       <canvas id="renderCanvas"></canvas>
 

modules/Charactor.js

@@ -107,6 +107,7 @@ export default class Charactor {
 
         // 更新房间的视频贴图
         let video = pathArr[currentPoint].video
+        video.play()
         charactorManager.app.updateHouseVideo(video)
 
         let nextPos = pathArr[currentPoint+1].point

modules/index.js

@@ -8,6 +8,7 @@ export default class App {
 
     constructor(engine) {
         
+        this.engine = engine
         var scene = new BABYLON.Scene(engine);
         this.scene = scene
         scene.collisionsEnabled = true;
@@ -46,12 +47,12 @@ export default class App {
 
     init() {
 
-        document.getElementById("houseTexture").onplay = () => {
-            console.error("video play!")
-        }
-        window.ty =()=>{
-            document.getElementById("houseTexture").play();
-        }
+        // document.getElementById("houseTexture").onplay = () => {
+        //     console.error("video play!")
+        // }
+        // window.ty =()=>{
+        //     document.getElementById("houseTexture").play();
+        // }
 
         this.initVideo = true
         this.isReverse = false
@@ -125,40 +126,73 @@ export default class App {
     }
 
     bindEvents() {
+        
+        let ray = new BABYLON.Ray(new BABYLON.Vector3(0,0,0), new BABYLON.Vector3(0,0,1), 50);
+
+        document.getElementById("renderCanvas").addEventListener("click", (pointerInfo) => {
+            if(this.mouseMoving) return
+            // console.error("click")
+            let pickPoint = this.screenToWorld({x: pointerInfo.x, y: pointerInfo.y})
+            ray.origin = pickPoint
+            ray.direction = BABYLON.Vector3.Normalize( this.cameraController.camera.position.clone().subtract(pickPoint) )
+            let pickInfo = ray.intersectsMeshes(this.house)[0];
+            if(pickInfo.hit && this.house.indexOf(pickInfo.pickedMesh)) {
+                this.charactorManager.clickHouse()
+            }
+        })
+
+        document.getElementById("renderCanvas").addEventListener("pointerdown", (pointerInfo) => {
+            console.error("down")
+            this.cameraController.startMouseRotate({event: pointerInfo})
+            this.mouseMoving = false
+        })
+
+        document.getElementById("renderCanvas").addEventListener("pointerup", (pointerInfo) => {
+            this.cameraController.endMouseRotate()
+            // console.error("up")
+        })
 
-        this.scene.onPointerObservable.add((pointerInfo) => {
+        document.getElementById("renderCanvas").addEventListener("pointermove", (pointerInfo) => {
+            if(this.cameraController.lastFramePoint) {
+                // console.error("move")
+                this.cameraController.mouseRotating({event: pointerInfo})
+                this.mouseMoving = true
+            }
+        })
 
-            switch (pointerInfo.type) {
-                case BABYLON.PointerEventTypes.POINTERDOWN:
-                    this.cameraController.startMouseRotate(pointerInfo)
-                    break;
+        // this.scene.onPointerObservable.add((pointerInfo) => {
 
-                case BABYLON.PointerEventTypes.POINTERUP:
-                    this.cameraController.endMouseRotate()
-                    break;
+        //     switch (pointerInfo.type) {
+        //         case BABYLON.PointerEventTypes.POINTERDOWN:
+        //             this.cameraController.startMouseRotate(pointerInfo)
+        //             break;
 
-                case BABYLON.PointerEventTypes.POINTERMOVE:
-                    if(this.cameraController.lastFramePoint) 
-                        this.cameraController.mouseRotating(pointerInfo)
-                    break;
+        //         case BABYLON.PointerEventTypes.POINTERUP:
+        //             this.cameraController.endMouseRotate()
+        //             break;
 
-                case BABYLON.PointerEventTypes.POINTERWHEEL:
-                    break;
+        //         case BABYLON.PointerEventTypes.POINTERMOVE:
+        //             if(this.cameraController.lastFramePoint) 
+        //                 this.cameraController.mouseRotating(pointerInfo)
+        //             break;
 
-                case BABYLON.PointerEventTypes.POINTERPICK:
-                    break;
+        //         case BABYLON.PointerEventTypes.POINTERWHEEL:
+        //             break;
 
-                case BABYLON.PointerEventTypes.POINTERTAP:
-                    if(pointerInfo.pickInfo.hit && this.house.indexOf(pointerInfo.pickInfo.pickedMesh)) {
-                        this.charactorManager.clickHouse()
-                    }
-                    break;
+        //         case BABYLON.PointerEventTypes.POINTERPICK:
+        //             break;
 
-                case BABYLON.PointerEventTypes.POINTERDOUBLETAP:
-                    break;
-            }
+        //         case BABYLON.PointerEventTypes.POINTERTAP:
+        //             if(pointerInfo.pickInfo.hit && this.house.indexOf(pointerInfo.pickInfo.pickedMesh)) {
+        //                 this.charactorManager.clickHouse()
+        //             }
+        //             break;
 
-        });
+        //         case BABYLON.PointerEventTypes.POINTERDOUBLETAP:
+        //             break;
+        //     }
+
+        // });
 
         this.scene.onBeforeAnimationsObservable.add(() => {
 
@@ -261,4 +295,16 @@ export default class App {
         !notPlay && video.play()
     }
 
+    screenToWorld(point) {
+        let camera = this.cameraController.camera
+        const viewport = camera.viewport.toGlobal(this.engine.getRenderWidth(), this.engine.getRenderHeight());
+        return BABYLON.Vector3.Unproject(new BABYLON.Vector3(point.x, point.y, 0), viewport.width, viewport.height, 
+            BABYLON.Matrix.Identity(), camera.getViewMatrix(), camera.getProjectionMatrix());
+    }
+    
+    worldToSceen(point) {
+        let camera = this.cameraController.camera
+        const viewPort = camera.viewport.toGlobal(this.engine.getRenderWidth(), this.engine.getRenderHeight());
+        return BABYLON.Vector3.Project(point, BABYLON.Matrix.Identity(), this.scene.getTransformMatrix(), viewPort);
+    }
 }

modules/utils/common.js

@@ -71,7 +71,8 @@ export default {
                 video.setAttribute("controls", "true") 
                 // video.controls="true" 
                 video.muted = "muted"
-                video.autoplay = "autoplay" 
+                // video.autoplay = "autoplay" 
+                video.preload = "auto"
                 video.src = path
 
                 // document.getElementById("videoTextureBox").appendChild(video)
@@ -98,7 +99,8 @@ export default {
         video.src = path
         video.id = videoName
         video.crossOrigin = "anonymous" 
-        video.autoplay = "autoplay" 
+        // video.autoplay = "autoplay" 
+        video.preload = "auto"
         video.muted = "muted"
         video.setAttribute("playsinline", "true") 
         video.setAttribute("x5-playsinline", "true")