rotate

index.html

@@ -73,7 +73,7 @@
       <div id="videoTextureBox">
         <video 
           id="houseTexture0" 
-          src="./textures/outputmp4/0/0.mp4" 
+          src="" 
           crossorigin="anonymous" 
           playsinline="true" 
           x5-playsinline="true" 

modules/CameraController.js

@@ -7,7 +7,7 @@ export default class CameraController {
 
         this.app = app
         
-        var camera1 = new BABYLON.ArcRotateCamera("camera1", 0, Math.PI / 2, 10, new BABYLON.Vector3(0, 0, 0), app.scene);
+        var camera1 = new BABYLON.ArcRotateCamera("camera1", 0, Math.PI / 2, 10, new BABYLON.Vector3(0, 0, -1), app.scene);
         app.scene.activeCamera = camera1;
         // app.scene.activeCamera.attachControl(app.scene.canvas, true);
         camera1.inertia = 0
@@ -147,18 +147,15 @@ export default class CameraController {
 
         console.log("alphaOffset", alphaOffset)
 
-        let video0 = this.app.house[1].material._textures.texture_video.video
-        let startTime = (this.camera.alpha % (Math.PI * 2) + Math.PI * 2) % (Math.PI * 2) / (Math.PI * 2) * video0.duration
+        let video0 // = this.app.house[1].material._textures.texture_video.video
 
         if(this.lastDirc * dirc <= 0) {
             if(dirc < 0) {   // 顺时针
                 video0 = document.getElementById("houseTexture")
-                this.app.house[1].material._textures.texture_video.video = video0
                 // this.app.updateHouseVideo(video0)
             }
             if(dirc > 0) {   // 逆时针
                 video0 = document.getElementById("houseTextureReverse")
-                this.app.house[1].material._textures.texture_video.video = video0
                 // this.app.updateHouseVideo(video0)
             }
             this.lastDirc = dirc
@@ -166,16 +163,16 @@ export default class CameraController {
             // 当行走结束后，video0是walk视频，所以必须重赋值
             if(this.lastDirc < 0) {   // 顺时针
                 video0 = document.getElementById("houseTexture")
-                this.app.house[1].material._textures.texture_video.video = video0
             }
             if(this.lastDirc > 0) {   // 逆时针
                 video0 = document.getElementById("houseTextureReverse")
-                this.app.house[1].material._textures.texture_video.video = video0
             }
         }
-
         if(video0.id != "houseTexture" && video0.id != "houseTextureReverse") return
 
+        
+        let startTime = (this.camera.alpha % (Math.PI * 2) + Math.PI * 2) % (Math.PI * 2) / (Math.PI * 2) * video0.duration
+
         if(dirc < 0) {
             startTime = video0.duration - startTime
         }
@@ -196,7 +193,8 @@ export default class CameraController {
 
         rotateAni.setKeys(rotateFrames);
 
-        // video0.currentTime = startTime
+        video0.currentTime = startTime
+        if(this.app.hasVideoTexture) this.app.house[1].material._textures.texture_video.video = video0
         await video0.play()
 
         // 实时矫正currentTime

modules/Charactor.js

@@ -107,13 +107,12 @@ export default class Charactor {
 
         // 更新房间的视频贴图
         let video = pathArr[currentPoint].video
-        // console.error(currentPoint, video)
-        // if(!video) {
-        //     setTimeout(() => {
-        //         charactor.walkByPath(charactorManager)
-        //     }, 50)
-        //     return
-        // }
+        if(!video) {
+            console.warn("视频未加载。")
+            charactor.AniTransfromTo("Idle")
+            charactorManager.app.cameraController.lockCamera(false)
+            return
+        }
         charactorManager.app.updateHouseVideo(video)
         // let video = charactor.walkData.pathArr[1].video
         // charactor.walkData.currentPoint == 1 && video && charactorManager.app.updateHouseVideo(video)
@@ -133,9 +132,9 @@ export default class Charactor {
             connection.socket.emit("getVideo", sendData);
         } 
         else {
-            this.getSocketVideoType = "rotateCamera"
-
             // 即将走到终点之前，获取终点旋转视频
+            charactorManager.app.getSocketVideoType = "rotateCamera"
+
             let endPointId = pathArr[currentPoint+1].id
 
             console.log("[3D] send(getRotateVideo): ", endPointId + "/" + endPointId)
@@ -165,7 +164,7 @@ export default class Charactor {
         {
             console.warn("跳转点位与当前点位相同, 已跳过！")
 
-            if(pathArr[currentPoint+1]) {
+            if(pathArr[currentPoint+1].videoName) {
                 charactor.walkByPath(charactorManager)
             } else {
                 charactor.AniTransfromTo("Idle")

modules/index.js

@@ -31,6 +31,9 @@ export default class App {
         skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
         skybox.material = skyboxMaterial;
 
+        this.hasVideoTexture = false
+        this.hasVideoTexture = true
+
         this.init()
         this.bindEvents()
         setTimeout(() => this.bindSocketEvents(), 1000)
@@ -45,10 +48,10 @@ export default class App {
         BABYLON.SceneLoader.ImportMesh("", "../scenes/house/", "close_to_bottom_L.glb", this.scene, async function (newMeshes, particleSystems, skeletons, animationGroups) {
             
             self.house = newMeshes
-            // self.house[0].position = new BABYLON.Vector3(0.6, 2.1, 1.5)
+            // self.house[0].position = new BABYLON.Vector3(0, 0, -0.5)
             // self.house[0].position = new BABYLON.Vector3(-22, 0, 12)
 
-            let houseVideo = document.getElementById("houseTexture0")
+            let houseVideo = document.getElementById("houseTexture")
 
             setTimeout(() => {
                         
@@ -103,7 +106,7 @@ export default class App {
                     ))
                     shaderMaterial.setFloat("isYUV", 0)
 
-                    m.material = shaderMaterial
+                    if(self.hasVideoTexture) m.material = shaderMaterial
                 }
             });
 
@@ -205,13 +208,11 @@ export default class App {
                 let charactor = this.charactorManager.charactor
                 let video = common.createVideoElement0(url) //await common.createVideoElement(url)
 
-                console.error(charactor.walkData.currentPoint+1)
                 charactor.walkData.pathArr[charactor.walkData.currentPoint+1].video = video
 
             } 
             else {
                 // 获得旋转视频
-                
                 let video = this.isReverse ? document.getElementById("houseTextureReverse") 
                     : document.getElementById("houseTexture")
 
@@ -221,7 +222,7 @@ export default class App {
 
                 // 页面刷新后初次加载视频
                 if(this.initVideo) {
-                    this.updateHouseVideo(video, true)
+                    // this.updateHouseVideo(video, true)
                     this.initVideo = false
                     this.cameraController.camera.minZ = 0.001
                 }
@@ -277,7 +278,7 @@ export default class App {
     updateHouseVideo(video, notPlay) {
         let videoTexture = new BABYLON.VideoTexture("", video, this.scene)
         this.house.forEach(mesh => {
-            mesh.material && mesh.material.setTexture("texture_video", videoTexture)
+            // mesh.material && mesh.material.setTexture("texture_video", videoTexture)
         })
         !notPlay && video.play()
     }
@@ -286,7 +287,7 @@ export default class App {
         let video = await common.createVideoElement(blobUrl)
         // video.loop = "loop"
         let videoTexture = new BABYLON.VideoTexture("", video, this.scene)
-        this.house.forEach(mesh => {
+        this.hasVideoTexture && this.house.forEach(mesh => {
             mesh.material && mesh.material.setTexture("texture_video", videoTexture)
         })
         !notPlay && video.play()

modules/utils/settings.js

@@ -8,7 +8,7 @@ export default {
     walkVidoeSpeed: 1,   // m/s
     camera: {
         fov: Math.PI / 2,
-        height: 1.5,
+        height: 1.6,
         distanceFromCharactor: 3.5
     },
     sceneCode: "testApp",