123

index.html

@@ -124,6 +124,15 @@
       <script src="./libs/socket.2.3.js"></script>
       <script src="./webrtc//adapter-7.4.0.min.js"></script>
       <script src="./webrtc/srs.sdk.js"></script>
+
+
+      <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.0/vconsole.min.js"></script>
+      <script>
+          // init vConsole
+          var vConsole = new VConsole();
+          console.log('Hello world');
+      </script>
+
       <script type="module">
         import App from "./modules/index.js";
 

modules/CameraController.js

@@ -196,12 +196,25 @@ export default class CameraController {
 
         rotateAni.setKeys(rotateFrames);
 
-        video0.currentTime = startTime
+        // video0.currentTime = startTime
         await video0.play()
 
+        // 实时矫正currentTime
+        let endTime = (startTime + durtime) % video0.duration
+        let handle = setInterval(() => {
+            if(endTime > startTime) {
+                // 不跨0
+                if(video0.currentTime > endTime) video0.currentTime = endTime
+            } else {
+                if(video0.currentTime > endTime && video0.currentTime < startTime) video0.currentTime = endTime
+            }
+        }, 10)
+
         this.app.scene.beginDirectAnimation(this.camera, [rotateAni], 0, rotateCameraFrameNum, false, 1, 
             () => {
+                clearInterval(handle)
                 this.enable = true
+                video0.currentTime = (startTime + durtime) % video0.duration
                 video0.pause()
                 func && func()
             });

modules/Charactor.js

@@ -85,8 +85,8 @@ export default class Charactor {
         }
         
         if(pathArr.length >= 2 && this.actionType.split("-")[1] != "Walking") 
-        {    
-            let video = pathArr[1].video
+        {
+            let video = pathArr[0].video
             if(video.isLoaded) {
                 this.AniTransfromTo("Walking")
                 this.walkByPath(charactorManager)
@@ -103,24 +103,69 @@ export default class Charactor {
 
         let charactor = this
 
-        charactor.walkData.currentPoint++
+        let { pathArr, currentPoint } = charactor.walkData
 
         // 更新房间的视频贴图
-        // let video = charactor.walkData.pathArr[charactor.walkData.currentPoint].video
-        // charactorManager.app.updateHouseVideo(video)
-        let video = charactor.walkData.pathArr[1].video
-        charactor.walkData.currentPoint == 1 && video && charactorManager.app.updateHouseVideo(video)
+        let video = pathArr[currentPoint].video
+        console.error(currentPoint, video)
+        if(!video) {
+            setTimeout(() => {
+                charactor.walkByPath(charactorManager)
+            }, 50)
+            return
+        }
+        charactorManager.app.updateHouseVideo(video)
+        // let video = charactor.walkData.pathArr[1].video
+        // charactor.walkData.currentPoint == 1 && video && charactorManager.app.updateHouseVideo(video)
 
+        let nextPos = pathArr[currentPoint+1].point
+        let nextVideoName = pathArr[currentPoint+1].videoName
 
+        if(nextVideoName)
+        {
+            let sendData = {
+                videoList: [nextVideoName],
+                sceneCode: settings.sceneCode,
+                roomId: settings.roomId,
+                userId: settings.userId,
+            }
+            console.log("[3D] send(getVideo): ", sendData);
+            connection.socket.emit("getVideo", sendData);
+        } 
+        else {
+            this.getSocketVideoType = "rotateCamera"
+
+            // 即将走到终点之前，获取终点旋转视频
+            let endPointId = pathArr[currentPoint+1].id
+
+            console.log("[3D] send(getRotateVideo): ", endPointId + "/" + endPointId)
+            window.connection.socket.emit("getRotateVideo", {
+                videoPath: endPointId + "/" + endPointId,
+                sangle: 0,
+                eangle: 360,
+                reverses: false,
+                sceneCode: settings.sceneCode,
+                roomId: settings.roomId,
+                userId: settings.userId,
+            });
+            window.connection.socket.emit("getRotateVideo", {
+                videoPath: endPointId + "/" + endPointId,
+                sangle: 0,
+                eangle: 360,
+                reverses: true,
+                sceneCode: settings.sceneCode,
+                roomId: settings.roomId,
+                userId: settings.userId,
+            });
 
-        let newPos = charactor.walkData.pathArr[charactor.walkData.currentPoint].point
+        }
 
         // 要跳转的位置与当前位置相同的话，就直接跳过，否则动画会出bug
-        if(newPos.x == this.mesh.position.x && newPos.z == this.mesh.position.z) 
+        if(nextPos.x == this.mesh.position.x && nextPos.z == this.mesh.position.z) 
         {
             console.warn("跳转点位与当前点位相同, 已跳过！")
 
-            if(charactor.walkData.pathArr[charactor.walkData.currentPoint+1]) {
+            if(pathArr[currentPoint+1]) {
                 charactor.walkByPath(charactorManager)
             } else {
                 charactor.AniTransfromTo("Idle")
@@ -132,20 +177,20 @@ export default class Charactor {
 
 
         let startingPoint = charactor.mesh.position.clone();
-        startingPoint.y = newPos.y;
-        let walkDirc = newPos.subtract(startingPoint).normalize();
+        startingPoint.y = nextPos.y;
+        let walkDirc = nextPos.subtract(startingPoint).normalize();
 
         // 行走动画
         const walkAni = new BABYLON.Animation("walk", "position", settings.video.frameRate, 
             BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE);
 
-        let walkFrameNum = settings.video.frameRate * video.duration / (charactorManager.app.currentPoints.length-1)
+        let walkFrameNum = settings.video.frameRate * video.duration
         const walkKeyFrames = [{
             frame: 0,
             value: charactor.mesh.position
         },{
             frame: walkFrameNum,
-            value: newPos
+            value: nextPos
         }]; 
 
         walkAni.setKeys(walkKeyFrames);
@@ -167,10 +212,11 @@ export default class Charactor {
 
         turnAroundAni.setKeys(turnAroundFrames);
 
+        
         charactorManager.app.scene.beginDirectAnimation(charactor.mesh, [walkAni, turnAroundAni], 0, Math.max(walkFrameNum, turnAroundFrameNum), false, 1, 
             () => {
                 // 如果还有下一个点位就继续走，否则变为站立
-                if(charactor.walkData.pathArr[charactor.walkData.currentPoint+1]) {
+                if(pathArr[++charactor.walkData.currentPoint].videoName) {
                     charactor.walkByPath(charactorManager)
                 } else {
                     charactor.AniTransfromTo("Idle")

modules/index.js

@@ -167,81 +167,60 @@ export default class App {
 
     bindSocketEvents() {
 
+        let walkPointsTemp = []
+
         window.connection.socket.on('getSocketVideo', async(data) => {
 
             console.log("[3D] getSocketVideo: ", data)
 
-            if(this.getWalkVideo) {
+            const blob = new Blob( [data], { type: 'application/video' })
 
-                const blob = new Blob( [data], { type: 'application/video' })
+            const url = URL.createObjectURL(blob)
+            setTimeout(function () {
+                URL.revokeObjectURL(url)
+            }, 3000)
 
-                const url = URL.createObjectURL(blob)
-                setTimeout(function () {
-                    URL.revokeObjectURL(url)
-                }, 3000)
+            if(this.getSocketVideoType == "walkPath") {
 
+                let dir = this.charactorManager.getVideoDirecNum()
                 // 获得行走视频
-                let path = this.currentPoints.map( (point, index) => { 
+                let path = walkPointsTemp.map( (point, i) => { 
                     return { 
+                        id: point.id,
                         point: new BABYLON.Vector3(-point.location.x, 0, point.location.z), 
-                        video: index == 1 ? common.createVideoElement0(url) : null
+                        video: i == 0 ? common.createVideoElement0(url) : null,
+                        videoName: i != walkPointsTemp.length - 1 ? (point.id + "/" + point.id + "_" + walkPointsTemp[i+1].id + "_" + dir) : null
                     } 
                 })
+
+                this.getSocketVideoType = "nextWalk"
     
                 // 行走时锁定camera
                 this.cameraController.lockCamera(true)
                 this.charactorManager.charactor.startWalk(path, this.charactorManager)
 
-                this.getWalkVideo = false
+            } 
+            else if(this.getSocketVideoType == "nextWalk") {
 
-                // 获得行走视频后，获取终点旋转视频
-                let endPointId = this.currentPoints[this.currentPoints.length - 1].id
+                let charactor = this.charactorManager.charactor
+                let video = common.createVideoElement0(url) //await common.createVideoElement(url)
 
-                console.log("[3D] send(getRotateVideo): ", endPointId + "/" + endPointId)
-                window.connection.socket.emit("getRotateVideo", {
-                    videoPath: endPointId + "/" + endPointId,
-                    sangle: 0,
-                    eangle: 360,
-                    reverses: false,
-                    sceneCode: settings.sceneCode,
-                    roomId: settings.roomId,
-                    userId: settings.userId,
-                });
-                window.connection.socket.emit("getRotateVideo", {
-                    videoPath: endPointId + "/" + endPointId,
-                    sangle: 0,
-                    eangle: 360,
-                    reverses: true,
-                    sceneCode: settings.sceneCode,
-                    roomId: settings.roomId,
-                    userId: settings.userId,
-                });
+                console.error(charactor.walkData.currentPoint+1)
+                charactor.walkData.pathArr[charactor.walkData.currentPoint+1].video = video
 
-            } else {
+            } 
+            else {
                 // 获得旋转视频
-                const blob = new Blob([data], { type: 'application/video' })
-                const url = URL.createObjectURL(blob)
-                // this.updateHouseVideoBlob(url, true)
-                // let video = common.createVideoElement0(url)
-                // video.loop = "loop"
-                setTimeout(function () {
-                    return URL.revokeObjectURL(url)
-                }, 3000)
-
-                // this.cameraController.rotateCamera(this.cameraController.alphaOffset)
-
-                let video
-                if(this.isReverse) {
-                    video = document.getElementById("houseTextureReverse")
-                } else {
-                    video = document.getElementById("houseTexture")
-                }
+                
+                let video = this.isReverse ? document.getElementById("houseTextureReverse") 
+                    : document.getElementById("houseTexture")
+
                 video.src = url
 
                 this.isReverse = !this.isReverse
 
+                // 页面刷新后初次加载视频
                 if(this.initVideo) {
-                    // this.updateHouseVideoBlob(url, true)
                     this.updateHouseVideo(video, true)
                     this.initVideo = false
                     this.cameraController.camera.minZ = 0.001
@@ -278,19 +257,14 @@ export default class App {
 
             if(!data || data.length < 2) return
 
-            // data = data.reverse()
-            this.currentPoints = data
+            walkPointsTemp = data
  
             let dir = this.charactorManager.getVideoDirecNum()
+            let firstVideoName = data[0].id + "/" + data[0].id + "_" + data[1].id + "_" + dir
 
-            this.walkVideoNames = []
-            for(let i = 0; i < data.length - 1; i++) {
-                this.walkVideoNames.push(data[i].id + "/" + data[i].id + "_" + data[i+1].id + "_" + dir)
-            }
-
-            this.getWalkVideo = true
+            this.getSocketVideoType = "walkPath"
             let sendData = {
-                videoList: this.walkVideoNames, //[0],
+                videoList: [firstVideoName],
                 sceneCode: settings.sceneCode,
                 roomId: settings.roomId,
                 userId: settings.userId,

modules/utils/settings.js

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