oss

modules/Charactor.js

@@ -107,51 +107,25 @@ export default class Charactor {
 
         // 更新房间的视频贴图
         let video = pathArr[currentPoint].video
-        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)
 
         let nextPos = pathArr[currentPoint+1].point
-        let nextVideoName = pathArr[currentPoint+1].videoName
+        let nextVideo = pathArr[currentPoint+1].video
 
-        if(nextVideoName)
+        if(!nextVideo)
         {
-            let sendData = {
-                videoList: [nextVideoName],
-                sceneCode: settings.sceneCode,
-                roomId: settings.roomId,
-                userId: settings.userId,
-            }
-            console.log("[3D] send(getVideoUrl): ", sendData);
-            connection.socket.emit("getVideoUrl", sendData);
-        } 
-        else {
             // 即将走到终点之前，获取终点旋转视频
-            charactorManager.app.getSocketVideoType = "rotateCamera"
-
             let endPointId = pathArr[currentPoint+1].id
 
             console.log("[3D] send(getRotateVideoUrl): ", endPointId + "/" + endPointId)
             window.connection.socket.emit("getRotateVideoUrl", {
                 videoPath: endPointId + "/" + endPointId,
-                sangle: 0,
-                eangle: 360,
-                reverses: false,
                 sceneCode: settings.sceneCode,
                 roomId: settings.roomId,
                 userId: settings.userId,
             });
             window.connection.socket.emit("getRotateVideoUrl", {
-                videoPath: endPointId + "/" + endPointId,
-                sangle: 0,
-                eangle: 360,
-                reverses: true,
+                videoPath: endPointId + "/" + endPointId + "_rotate",
                 sceneCode: settings.sceneCode,
                 roomId: settings.roomId,
                 userId: settings.userId,
@@ -164,13 +138,12 @@ export default class Charactor {
         {
             console.warn("跳转点位与当前点位相同, 已跳过！")
 
-            if(pathArr[currentPoint+1].videoName) {
+            if(pathArr[currentPoint+1].video) {
                 charactor.walkByPath(charactorManager)
             } else {
                 charactor.AniTransfromTo("Idle")
                 charactorManager.app.cameraController.lockCamera(false)
             }
-            
             return
         }
 
@@ -215,7 +188,7 @@ export default class Charactor {
         charactorManager.app.scene.beginDirectAnimation(charactor.mesh, [walkAni, turnAroundAni], 0, Math.max(walkFrameNum, turnAroundFrameNum), false, 1, 
             () => {
                 // 如果还有下一个点位就继续走，否则变为站立
-                if(pathArr[++charactor.walkData.currentPoint].videoName) {
+                if(pathArr[++charactor.walkData.currentPoint].video) {
                     charactor.walkByPath(charactorManager)
                 } else {
                     charactor.AniTransfromTo("Idle")

modules/index.js

@@ -57,18 +57,12 @@ export default class App {
                         
                 window.connection.socket.emit("getRotateVideoUrl", {
                     videoPath: "0/0",
-                    sangle: 0,
-                    eangle: 360,
-                    reverses: false,
                     sceneCode: settings.sceneCode,
                     roomId: settings.roomId,
                     userId: settings.userId,
                 });
                 window.connection.socket.emit("getRotateVideoUrl", {
-                    videoPath: "0/0" ,
-                    sangle: 0,
-                    eangle: 360,
-                    reverses: true,
+                    videoPath: "0/0_rotate" ,
                     sceneCode: settings.sceneCode,
                     roomId: settings.roomId,
                     userId: settings.userId,
@@ -171,140 +165,45 @@ export default class App {
     bindSocketEvents() {
 
         let walkPointsTemp = []
+
+        // 获得旋转视频
         window.connection.socket.on('getRotateVideoUrl', async(data) => {    
-            console.log("[3D] getSocketVideo: ", data)
+            console.log("[3D] getRotateVideoUrl: ", data)
             const url = data
-            // 获得旋转视频
                             
-            let video = this.isReverse ? document.getElementById("houseTextureReverse") 
-            : document.getElementById("houseTexture")
+            let video = data.indexOf("_rotate") > -1 
+                ? document.getElementById("houseTextureReverse") 
+                : document.getElementById("houseTexture")
 
             video.src = url
 
-            this.isReverse = !this.isReverse
-
             // 页面刷新后初次加载视频
             if(this.initVideo) {
-            this.updateHouseVideo(video, true)
-            this.initVideo = false
-            this.cameraController.camera.minZ = 0.001
+                // this.updateHouseVideo(video, true)
+                this.initVideo = false
+                this.cameraController.camera.minZ = 0.001
             }
         })
 
+        // 获得行走视频
         window.connection.socket.on('getVideoUrl', async(data) => {    
-            console.log("[3D] getSocketVideo: ", data)
-            const url = data
-
-            if(this.getSocketVideoType == "walkPath") {
-
-                let dir = this.charactorManager.getVideoDirecNum()
-                // 获得行走视频
-                let path = walkPointsTemp.map( (point, i) => { 
-                    return { 
-                        id: point.id,
-                        point: new BABYLON.Vector3(-point.location.x, 0, point.location.z), 
-                        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)
-
-            } 
-            else if(this.getSocketVideoType == "nextWalk") {
-
-                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
-
-            } 
-        })
-        
-        window.connection.socket.on('getSocketVideo', async(data) => {
-
-            console.log("[3D] getSocketVideo: ", data)
-
-            const blob = new Blob( [data], { type: 'application/video' })
-
-            const url = URL.createObjectURL(blob)
-            setTimeout(function () {
-                URL.revokeObjectURL(url)
-            }, 3000)
-
-            if(this.getSocketVideoType == "walkPath") {
-
-                let dir = this.charactorManager.getVideoDirecNum()
-                // 获得行走视频
-                let path = walkPointsTemp.map( (point, i) => { 
-                    return { 
-                        id: point.id,
-                        point: new BABYLON.Vector3(-point.location.x, 0, point.location.z), 
-                        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)
-
-            } 
-            else if(this.getSocketVideoType == "nextWalk") {
-
-                let charactor = this.charactorManager.charactor
-                let video = common.createVideoElement0(url) //await common.createVideoElement(url)
-
-                charactor.walkData.pathArr[charactor.walkData.currentPoint+1].video = video
-
-            } 
-            else {
-                // 获得旋转视频
-                let video = this.isReverse ? document.getElementById("houseTextureReverse") 
-                    : document.getElementById("houseTexture")
-
-                video.src = url
-
-                this.isReverse = !this.isReverse
-
-                // 页面刷新后初次加载视频
-                if(this.initVideo) {
-                    // this.updateHouseVideo(video, true)
-                    this.initVideo = false
-                    this.cameraController.camera.minZ = 0.001
-                }
-            }
-        })
-
-        window.connection.socket.on('getVideoUrl', async (data) => {
-            
             console.log("[3D] getVideoUrl: ", data)
-
-            // const blob = new Blob([data], { type: 'application/video' })
-            // const url = URL.createObjectURL(blob)
-            // setTimeout(function () {
-            //     URL.revokeObjectURL(url)
-            // }, 3000)
-
-            // let path = this.currentPoints.map( (point, index) => { 
-            //     return { 
-            //         point: new BABYLON.Vector3(point.location.x, 0, point.location.z), 
-            //         video: url // await common.createVideoElement0(url)
-            //     } 
-            // })
-
-            // // 行走时锁定camera
-            // this.cameraController.lockCamera(true)
-            // this.charactorManager.charactor.startWalk(path, this.charactorManager)
+            const urlArr = data
+
+            let path = walkPointsTemp.map((point, i) => { 
+                return { 
+                    id: point.id,
+                    point: new BABYLON.Vector3(-point.location.x, 0, point.location.z), 
+                    video: urlArr[i] ? common.createVideoElement0(urlArr[i]) : null,
+                } 
+            })
+
+            // 行走时锁定camera
+            console.log("Walk Start: ", path)
+            this.cameraController.lockCamera(true)
+            this.charactorManager.charactor.startWalk(path, this.charactorManager)
         })
-    
+        
         // 获得行走路径
         window.connection.socket.on("getRoute", (data) => {
 
@@ -315,11 +214,14 @@ export default class App {
             walkPointsTemp = data
  
             let dir = this.charactorManager.getVideoDirecNum()
-            let firstVideoName = data[0].id + "/" + data[0].id + "_" + data[1].id + "_" + dir
+            let videoNames = []
+            for(let i = 0; i < data.length-1; i++) {
+                videoNames.push(data[i].id + "/" + data[i].id + "_" + data[i+1].id + "_" + dir)
+            }
 
             this.getSocketVideoType = "walkPath"
             let sendData = {
-                videoList: [firstVideoName],
+                videoList: videoNames,
                 sceneCode: settings.sceneCode,
                 roomId: settings.roomId,
                 userId: settings.userId,
@@ -331,8 +233,8 @@ 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)
+        this.hasVideoTexture && this.house.forEach(mesh => {
+            mesh.material && mesh.material.setTexture("texture_video", videoTexture)
         })
         !notPlay && video.play()
     }

modules/utils/common.js

@@ -86,28 +86,7 @@ export default {
     
     createVideoElement0: (path) => {
 
-        // let videoName = path.split("/")[path.split("/").length-1].split(".")[0]
-        // let oldVideo = document.getElementById(videoName)
-        // if(oldVideo) {
-        //     oldVideo.currentTime = 0
-        //     oldVideo.isLoaded = true
-        //     return oldVideo
-        // }
-
-        // let video = document.createElement("video")
-        // video.src = path
-        // video.id = videoName
-        // video.crossOrigin = "anonymous" 
-        // // video.playsinline = "playsinline" 
-        // video.autoplay = "autoplay" 
-        // video.muted = "muted"
-        // video.setAttribute("playsinline", "true") 
-        // video.setAttribute("x5-playsinline", "true") 
-        // video.setAttribute("webkit-playsinline", "true") 
-        // video.setAttribute("x5-video-player-type", "h5") 
-        // video.setAttribute("controls", "true") 
-
-        let videoName = path[0].split("/")[path[0].split("/").length-1].split(".")
+        let videoName = path.split("/")[path.split("/").length-1].split(".mp4")[0]
         let oldVideo = document.getElementById(videoName)
         if(oldVideo) {
             oldVideo.currentTime = 0
@@ -116,10 +95,9 @@ export default {
         }
 
         let video = document.createElement("video")
-        video.src = path[0]
+        video.src = path
         video.id = videoName
         video.crossOrigin = "anonymous" 
-        // video.playsinline = "playsinline" 
         video.autoplay = "autoplay" 
         video.muted = "muted"
         video.setAttribute("playsinline", "true")