zhouenguang 3 years ago
parent
commit
50e2ffe560
7 changed files with 381 additions and 183 deletions
  1. 209 0
      modules/CameraController.js
  2. 1 1
      modules/Charactor.js
  3. 53 31
      modules/CharactorManager.js
  4. 66 145
      modules/index.js
  5. 25 1
      modules/utils/common.js
  6. 4 1
      modules/utils/settings.js
  7. 23 4
      webrtc/srs.js

+ 209 - 0
modules/CameraController.js

@@ -0,0 +1,209 @@
+import common from "./utils/common.js";
+import settings from "./utils/settings.js"
+
+export default class CameraController {
+
+    constructor(app) {
+
+        this.app = app
+        
+        var camera1 = new BABYLON.ArcRotateCamera("camera1", 0, Math.PI / 2, 10, new BABYLON.Vector3(0, 0, 0), app.scene);
+        app.scene.activeCamera = camera1;
+        // scene.activeCamera.attachControl(scene.canvas, true);
+        camera1.inertia = 0
+        camera1.minZ = 0.001
+        camera1.fov = settings.camera.fov
+        camera1.fovMode = BABYLON.ArcRotateCamera.FOVMODE_HORIZONTAL_FIXED
+        camera1.lowerBetaLimit = Math.PI / 2
+        camera1.upperBetaLimit = Math.PI / 2
+        camera1.lowerRadiusLimit = settings.camera.distanceFromCharactor;
+        camera1.upperRadiusLimit = settings.camera.distanceFromCharactor;
+        camera1.angularSensibilityX /= 2;
+        this.camera = camera1
+
+        this.enable = true
+
+        this.lastCameraAlpha = 0
+        this.lastDirc = 0
+        this.initAlpha = 0     // 初始角度积累
+
+        // 人物相机射线
+        this.ray = new BABYLON.Ray(new BABYLON.Vector3(0,0,0), new BABYLON.Vector3(0,0,1), 50);
+        // BABYLON.RayHelper.CreateAndShow(this.ray, scene, new BABYLON.Color3(1, 0.1, 0.1));
+
+    }
+
+    updateCameraPos() {
+
+        if(!this.app.charactorManager || !this.app.charactorManager.charactor) return
+
+        let charactor = this.app.charactorManager.charactor
+        
+        // 实时更新相机target
+        let cameraTarget = charactor.mesh.position.clone()
+        cameraTarget.y = settings.camera.height
+        this.camera.setTarget(cameraTarget)
+
+        // 相机碰撞检测
+        this.ray.origin = cameraTarget
+        this.ray.direction = BABYLON.Vector3.Normalize( this.camera.position.clone().subtract(cameraTarget) )
+        let info = this.ray.intersectsMeshes(this.app.house)[0];
+        const offset = 0.05
+        if(!info || info.distance > settings.camera.distanceFromCharactor + offset) return
+        let charactorVisi = charactor.visible
+        this.camera.lowerRadiusLimit = Math.max( info.distance - offset, 0.1 )
+        this.camera.upperRadiusLimit = Math.max( info.distance - offset, 0.1 )
+        
+        // 根据相机位置更新人物显隐
+        if(info.distance - offset < 0.25 && charactorVisi) charactor.visible = false
+        if(info.distance - offset >= 0.25 && !charactorVisi) charactor.visible = true
+
+    }
+
+    startMouseRotate(pointerInfo) {
+        this.lastFramePoint = new BABYLON.Vector2(pointerInfo.event.clientX, pointerInfo.event.clientY)
+    }
+
+    endMouseRotate() {
+        this.lastFramePoint = null
+        this.lastDirc = 0
+    }
+
+    /**
+     * 鼠标移动时,计算xoffset,得到旋转方向
+     * xoffset越大,瞬时速度越快,转的角度就越大
+     * 指定xoffset大于一定值的帧,根据旋转方向和角度请求视频,相机animation改alpha与视频一致
+     * 视频旋转中,计算每帧的xoffset,如果方向没变,不再发出请求
+     * 如果方向相反,根据瞬时速度请求新视频,并停止当前动画,播放新动画
+     */
+     mouseRotating(pointerInfo) {
+        
+        if(!this.app.charactorManager || !this.app.charactorManager.charactor || !this.enable) return
+
+        let charactor = this.app.charactorManager.charactor
+        let currentFramePoint = new BABYLON.Vector2(pointerInfo.event.clientX, pointerInfo.event.clientY)
+        let pointerOffset = currentFramePoint.clone().subtract(this.lastFramePoint).length()
+
+        // 旋转方向:向右为负方向,顺时针;向左为正方向,逆时针(reverse)
+        let dirc = Math.sign(currentFramePoint.x - this.lastFramePoint.x)
+
+        // 一般来说瞬时距离不会超过100,定100时转180度
+        // let alphaOffset = Math.max(Math.floor((pointerOffset / 100 * Math.PI / (Math.PI / 30)) * (Math.PI / 30) + Math.PI / 60), Math.PI / 30)
+        let alphaOffset = Math.min( pointerOffset / 1000 * Math.PI, Math.PI )
+        alphaOffset *= dirc
+
+        this.initAlpha += alphaOffset
+
+        if(charactor.actionType.split("-")[1] == "Walking") {
+            // 行走时旋转相机,行走停止
+            charactor.startWalk([], this.app.charactorManager)
+        } 
+        // && dirc * this.lastDirc <= 0
+        else if(Math.abs(this.initAlpha) > Math.PI / 30 && dirc != 0 && this.enable) {
+
+            let currentPath = charactor.walkData.pathArr[charactor.walkData.currentPoint]
+            let startPoint = (currentPath && currentPath.point) || charactor.mesh.position
+
+            // let point1 = Math.floor((-this.camera.alpha + Math.PI * 2) % (Math.PI * 2) / Math.PI * 180 / 6) * 6
+            // let point2 = Math.floor((-this.camera.alpha - this.initAlpha + Math.PI * 2) % (Math.PI * 2) / Math.PI * 180 / 6) * 6
+            let point1 = Math.floor(this.camera.alpha / Math.PI * 180 / 6) * 6
+            let point2 = Math.floor((this.camera.alpha + this.initAlpha) / Math.PI * 180 / 6) * 6
+            let sangle, eangle
+            
+            this.alphaOffset = (point1 - point2) / 180 * Math.PI
+            
+            if(dirc < 0) {
+                sangle = point1
+                eangle = point2 == 0 ? 359 : point2
+            } else {
+                sangle = point2
+                eangle = point1 == 0 ? 359 : point1
+            }
+
+            let pointData = this.app.charactorManager.getClosestPointData(startPoint)
+            let sendData = {
+                videoPath: pointData.id + "/" + pointData.id,
+                sangle: sangle,
+                eangle: eangle,
+                reverses: dirc < 0,
+                sceneCode: settings.sceneCode,
+                roomId: settings.roomId,
+                userId: settings.userId,
+            }
+            // window.connection.socket.emit("getRotateVideo", sendData);
+            // console.log("[3D] send: ", sendData)
+
+            this.rotateCamera(this.alphaOffset)
+
+            this.enable = false
+            this.initAlpha = 0
+        }
+
+        this.lastFramePoint = currentFramePoint
+        this.lastDirc = dirc
+    }
+
+    // async 
+    rotateCamera(alphaOffset, func) {
+
+        console.log("alphaOffset", alphaOffset)
+
+        let video0 = this.app.house[1].material._textures.texture_video.video
+        let startTime = Math.abs(this.camera.alpha) % (Math.PI * 2) / (Math.PI * 2) * video0.duration
+
+        // if(this.lastDirc * alphaOffset < 0) {
+        //     if(alphaOffset < 0) {   // 顺时针
+        //         video0 = document.getElementById("houseTexture0")
+        //         this.app.updateHouseVideo(video0)
+        //     }
+        //     if(alphaOffset > 0) {   // 逆时针
+        //         video0 = document.getElementById("houseTexture0")
+        //         this.app.updateHouseVideo(video0)
+        //     }
+        //     startTime = video0.duration - startTime
+        // }
+        // let video0 = document.getElementById("houseTexture0")
+
+        let durtime = Math.abs(alphaOffset / (Math.PI * 2) * video0.duration)
+
+            // if(dirc * this.lastDirc < 0) {
+                // 清除已有动画再播新动画
+                // this.app.scene.stopAnimation(this.camera, "rotateCamera")
+            // }
+
+            const rotateAni = new BABYLON.Animation("rotateCamera", "alpha", settings.video.frameRate, 
+                BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE);
+
+            let rotateCameraFrameNum = settings.video.frameRate * durtime
+            const rotateFrames = [{
+                frame: 0,
+                value: this.camera.alpha
+            },{
+                frame: rotateCameraFrameNum,
+                value: this.camera.alpha + alphaOffset
+            }]; 
+
+            rotateAni.setKeys(rotateFrames);
+
+            video0.currentTime = startTime
+            // await 
+            video0.play()
+
+            this.app.scene.beginDirectAnimation(this.camera, [rotateAni], 0, rotateCameraFrameNum, false, 1, 
+                () => {
+                    this.lastDirc = 0
+                    this.enable = true
+                    video0.pause()
+                    func && func()
+                });
+            
+
+    }
+
+    lockCamera(isTrue) {
+        this.cameraControlEnable = isTrue
+        this.camera.lowerAlphaLimit = isTrue ? this.camera.alpha : null
+        this.camera.upperAlphaLimit = isTrue ? this.camera.alpha : null
+    }
+
+}

+ 1 - 1
modules/Charactor.js

@@ -171,7 +171,7 @@ export default class Charactor {
                     charactor.walkByPath(charactorManager)
                 } else {
                     charactor.AniTransfromTo("Idle")
-                    charactorManager.app.lockCamera(false)
+                    charactorManager.app.cameraController.lockCamera(false)
                 }
             });
     }

+ 53 - 31
modules/CharactorManager.js

@@ -25,15 +25,7 @@ export default class CharactorManager {
         .then(response => {
             this.pointsData = response
             this.pointsData.forEach(data => {
-                data.position = BABYLON.Vector3.TransformCoordinates(
-                    new BABYLON.Vector3(data.position.x, data.position.y, data.position.z),
-                    BABYLON.Matrix.FromArray([
-                        -0.01,   0,      0,      0,
-                        0,      0,      0.01,  0,
-                        0,      0.01,   0,      0,
-                        0,      0,      0,      1
-                    ])
-                )
+                data.position = common.vec3UE4ToBABYLON(data.position)
             })
         })
     }
@@ -65,25 +57,26 @@ export default class CharactorManager {
 
         if(pickinfo.pickedPoint) {
 
+            let camera = this.app.cameraController.camera
             // 在行走之前,首先要把人物矫正到45度的倍数(有视频的8个方向)
 
-            if(this.app.camera.alpha % (Math.PI / 4) == 0 ) 
+            if(camera.alpha % (Math.PI / 4) == 0 ) 
             {
                 // 如果已经在8个方向上了
                 this.charactorWalkTo(pickinfo.pickedPoint)
             } 
             else {
                 // 相机方向矫正
-                let cameraAlphaAmend = parseInt(this.app.camera.alpha / (Math.PI / 4)) * (Math.PI / 4)
+                let cameraAlphaAmend = parseInt(camera.alpha / (Math.PI / 4)) * (Math.PI / 4)
                 let pointData = this.getClosestPointData(this.charactor.mesh.position)
                 let sendData = {
                     video: [pointData.id],
-                    reverse: this.app.camera.alpha - cameraAlphaAmend < 0
+                    reverse: camera.alpha - cameraAlphaAmend < 0
                 }
                 // window.connection.socket.emit("getPush", sendData)
 
                 // todo
-                this.app.rotateCamera(this.app.camera.alpha - cameraAlphaAmend, () => {
+                this.app.cameraController.rotateCamera(camera.alpha - cameraAlphaAmend, () => {
                     this.charactorWalkTo(pickinfo.pickedPoint)
                 })
             }
@@ -100,28 +93,57 @@ export default class CharactorManager {
 
         let currentPath = this.charactor.walkData.pathArr[this.charactor.walkData.currentPoint]
         let startPoint = (currentPath && currentPath.point) || this.charactor.mesh.position
+        // let sendData = {
+        //     startId: this.getClosestPointData(startPoint).id,   // todo
+        //     endId: this.getClosestPointData(endPoint).id,   // todo
+        //     dir: this.getVideoDirecNum()
+        // }
+
+        let startPointUE4 = common.vec3BABYLONToUE4(startPoint)
+        let endPointUE4 = common.vec3BABYLONToUE4(endPoint)
+
         let sendData = {
-            startId: this.getClosestPointData(startPoint).id,   // todo
-            endId: this.getClosestPointData(endPoint).id,   // todo
-            dir: this.getVideoDirecNum()
+            sceneCode: settings.sceneCode,
+            roomId: settings.roomId,
+            userId: settings.userId,
+            s_location: {
+                x: startPoint.x,
+                y: startPoint.y,
+                z: startPoint.z,
+            },
+            e_location: {
+                x: endPoint.x,
+                y: endPoint.y,
+                z: endPoint.z,
+            },
+            // s_location: {
+            //     x: startPointUE4.x,
+            //     y: startPointUE4.y,
+            //     z: startPointUE4.z,
+            // },
+            // e_location: {
+            //     x: endPointUE4.x,
+            //     y: endPointUE4.y,
+            //     z: endPointUE4.z,
+            // },
         }
+        window.connection.socket.emit("getRoute", sendData);
+        console.log("[3D] send: ", sendData)
 
-        // window.connection.socket.emit("getPush", sendData)
+        // // todo
+        // let path = data.walkPath    // response
+        // path.forEach(data => data.point = this.pointsData[data.id].position)
 
-        // todo
-        let path = data.walkPath    // response
-        path.forEach(data => data.point = this.pointsData[data.id].position)
-
-        path = path.map((data) => { 
-            return { 
-                point: new BABYLON.Vector3(data.point.x, 0, data.point.z), 
-                video: data.video && common.createVideoElement0(data.video)
-            } 
-        })
+        // path = path.map((data) => { 
+        //     return { 
+        //         point: new BABYLON.Vector3(data.point.x, 0, data.point.z), 
+        //         video: data.video && common.createVideoElement0(data.video)
+        //     } 
+        // })
 
-        // 行走时锁定camera
-        this.app.lockCamera(true)
-        this.charactor.startWalk(path, this)
+        // // 行走时锁定camera
+        // this.app.cameraController.lockCamera(true)
+        // this.charactor.startWalk(path, this)
 
     }
 
@@ -140,7 +162,7 @@ export default class CharactorManager {
 
     getVideoDirecNum() {
         // 视频逆时针旋转
-        let num = Math.floor(this.app.camera.alpha % (Math.PI * 2) / (Math.PI / 4))
+        let num = Math.floor(this.app.cameraController.camera.alpha % (Math.PI * 2) / (Math.PI / 4))
 
         if(num <= 0) {
             return -num

+ 66 - 145
modules/index.js

@@ -2,6 +2,7 @@ import CharactorManager from "./CharactorManager.js";
 import common from "./utils/common.js";
 import houseShader from "./shaders/houseShader.js";
 import settings from "./utils/settings.js";
+import CameraController from "./CameraController.js";
 
 export default class App {
 
@@ -10,29 +11,7 @@ export default class App {
         var scene = new BABYLON.Scene(engine);
         this.scene = scene
         scene.collisionsEnabled = true;
-    
-        var camera1 = new BABYLON.ArcRotateCamera("camera1", 0, Math.PI / 2, 10, new BABYLON.Vector3(0, 0, 0), scene);
-        scene.activeCamera = camera1;
-        // scene.activeCamera.attachControl(scene.canvas, true);
-        camera1.inertia = 0
-        camera1.minZ = 0
-        camera1.fov = settings.camera.fov
-        camera1.fovMode = BABYLON.ArcRotateCamera.FOVMODE_HORIZONTAL_FIXED
-        camera1.lowerBetaLimit = Math.PI / 2
-        camera1.upperBetaLimit = Math.PI / 2
-        camera1.lowerRadiusLimit = settings.camera.distanceFromCharactor;
-        camera1.upperRadiusLimit = settings.camera.distanceFromCharactor;
-        camera1.angularSensibilityX /= 2;
-        this.camera = camera1
-        this.lastCameraAlpha = 0
-        this.lastDirc = 0
-        this.initAlpha = 0
-        this.cameraControlEnable = true
-
-        // 人物相机射线
-        this.ray = new BABYLON.Ray(new BABYLON.Vector3(0,0,0), new BABYLON.Vector3(0,0,1), 50);
-        // BABYLON.RayHelper.CreateAndShow(this.ray, scene, new BABYLON.Color3(1, 0.1, 0.1));
-    
+
         // Lights
         var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, -1, 0), scene);
         light.intensity = 1.0;
@@ -54,6 +33,7 @@ export default class App {
 
         this.init()
         this.bindEvents()
+        setTimeout(() => this.bindSocketEvents(), 1000)
     }
 
     init() {
@@ -76,13 +56,13 @@ export default class App {
                     BABYLON.Effect.ShadersStore['aFragmentShader'] = houseShader.fragment;
                     BABYLON.Effect.ShadersStore['aVertexShader'] = houseShader.vertex;
                 
-                    let shaderMaterial = new BABYLON.ShaderMaterial("shader", scene, { vertex: "a", fragment: "a", }, {
+                    let shaderMaterial = new BABYLON.ShaderMaterial("shader", self.scene, { vertex: "a", fragment: "a", }, {
                         attributes: houseShader.attributes,
                         uniforms: houseShader.uniforms,
                         defines: houseShader.defines
                     });
                     
-                    let videoTexture = new BABYLON.VideoTexture("", houseVideo, scene)
+                    let videoTexture = new BABYLON.VideoTexture("", houseVideo, self.scene)
                     // document.getElementById("houseTexture0").play()
                     // document.getElementById("houseTexture0").loop = "loop"
 
@@ -102,6 +82,8 @@ export default class App {
             await self.charactorManager.readPointData()
             self.charactorManager.importCharactorModel("../scenes/charactors/", "man_YXL.glb")
         });
+
+        this.cameraController = new CameraController(self)
     }
 
     bindEvents() {
@@ -110,16 +92,16 @@ export default class App {
 
             switch (pointerInfo.type) {
                 case BABYLON.PointerEventTypes.POINTERDOWN:
-                    this.lastFramePoint = new BABYLON.Vector2(pointerInfo.event.clientX, pointerInfo.event.clientY)
+                    this.cameraController.startMouseRotate(pointerInfo)
                     break;
 
                 case BABYLON.PointerEventTypes.POINTERUP:
-                    this.lastFramePoint = null
-                    this.lastDirc = 0
+                    this.cameraController.endMouseRotate()
                     break;
 
                 case BABYLON.PointerEventTypes.POINTERMOVE:
-                    if(this.lastFramePoint) this.cameraControl(pointerInfo)
+                    if(this.cameraController.lastFramePoint) 
+                        this.cameraController.mouseRotating(pointerInfo)
                     break;
 
                 case BABYLON.PointerEventTypes.POINTERWHEEL:
@@ -149,135 +131,74 @@ export default class App {
 
         this.scene.onBeforeRenderObservable.add(() => {
 
-            this.updateCameraPos()
+            this.cameraController.updateCameraPos()
 
         })
     }
 
-    updateCameraPos() {
-
-        if(!this.charactorManager || !this.charactorManager.charactor) return
-        
-        // 实时更新相机target
-        let cameraTarget = this.charactorManager.charactor.mesh.position.clone()
-        cameraTarget.y = settings.camera.height
-        this.camera.setTarget(cameraTarget)
-
-        // 相机碰撞检测
-        this.ray.origin = cameraTarget
-        this.ray.direction = BABYLON.Vector3.Normalize( this.camera.position.clone().subtract(cameraTarget) )
-        let info = this.ray.intersectsMeshes(this.house)[0];
-        const offset = 0 // 0.6
-        if(!info || info.distance > settings.camera.distanceFromCharactor + offset) return
-        let charactorVisi = this.charactorManager.charactor.visible
-        this.camera.lowerRadiusLimit = Math.max( info.distance - offset, 0.1 )
-        this.camera.upperRadiusLimit = Math.max( info.distance - offset, 0.1 )
-        
-        // 根据相机位置更新人物显隐
-        if(info.distance - offset < 0.25 && charactorVisi) this.charactorManager.charactor.visible = false
-        if(info.distance - offset >= 0.25 && !charactorVisi) this.charactorManager.charactor.visible = true
-
-    }
-
-    /**
-     * 鼠标移动时,计算xoffset,得到旋转方向
-     * xoffset越大,瞬时速度越快,转的角度就越大
-     * 指定xoffset大于一定值的帧,根据旋转方向和角度请求视频,相机animation改alpha与视频一致
-     * 视频旋转中,计算每帧的xoffset,如果方向没变,不再发出请求
-     * 如果方向相反,根据瞬时速度请求新视频,并停止当前动画,播放新动画
-     */
-     cameraControl(pointerInfo) {
+    bindSocketEvents() {
         
-        if(!this.charactorManager || !this.charactorManager.charactor || !this.cameraControlEnable) return
-
-        let charactor = this.charactorManager.charactor
-        let currentFramePoint = new BABYLON.Vector2(pointerInfo.event.clientX, pointerInfo.event.clientY)
-        let pointerOffset = currentFramePoint.clone().subtract(this.lastFramePoint).length()
-        let dirc = Math.sign(this.lastFramePoint.x - currentFramePoint.x)
-
-        // 一般来说瞬时距离不会超过100,定100时转180度
-        // let alphaOffset = Math.max(Math.floor((pointerOffset / 100 * Math.PI / (Math.PI / 30)) * (Math.PI / 30) + Math.PI / 60), Math.PI / 30)
-        let alphaOffset = pointerOffset / 100 * Math.PI
-        alphaOffset *= dirc
+        window.connection.socket.on('getSocketVideo', async(data) => {
 
-        this.initAlpha += alphaOffset
+            console.log("[3D] get: ", data)
 
-        if(charactor.actionType.split("-")[1] == "Walking") {
-            // 行走时旋转相机,行走停止
-            charactor.startWalk([], this.charactorManager)
-        } 
-        // && dirc * this.lastDirc <= 0
-        else if(Math.abs(this.initAlpha) > Math.PI / 30 && dirc != 0) {
+            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.initAlpha = 0
-
-            let currentPath = charactor.walkData.pathArr[charactor.walkData.currentPoint]
-            let startPoint = (currentPath && currentPath.point) || charactor.mesh.position
-
-            let pointData = this.charactorManager.getClosestPointData(startPoint)
-            let sendData = {
-                videoList: [pointData.id + "/" + pointData.id],
-                // reverse: dirc < 0
-                videoId: common.uuid()
-            }
-            // window.connection.socket.emit("pushVideo", sendData)
-            // console.log("[3D] send: ", sendData)
+            // this.cameraController.rotateCamera(this.cameraController.alphaOffset)
+        })
 
-            this.rotateCamera(alphaOffset)
-        }
+        window.connection.socket.on('getVideo', async (jsonArr) => {
+            
+            let path = jsonArr.map( async (data) => { 
 
-        this.lastFramePoint = currentFramePoint
-        this.lastDirc = dirc
-    }
+                const blob = new Blob([data.video], { type: 'application/video' })
+                const url = URL.createObjectURL(blob)
+                setTimeout(function () {
+                  return URL.revokeObjectURL(url)
+                }, 3000)
+    
+                return { 
+                    point: new BABYLON.Vector3(data.point.x, 0, data.point.z), 
+                    video: await common.createVideoElement(url)
+                } 
+            })
 
-    async rotateCamera(alphaOffset, func) {
-        // todo
-        let video0 = this.house[1].material._textures.texture_video.video
-
-        let startTime = Math.abs(this.camera.alpha) % (Math.PI * 2) / (Math.PI * 2) * video0.duration
-        let durtime = Math.abs(alphaOffset / (Math.PI * 2) * video0.duration)
-
-        if(video0.paused) {
-            // if(dirc * this.lastDirc < 0) {
-                // 清除已有动画再播新动画
-                this.scene.stopAnimation(this.camera, "rotateCamera")
-            // }
-
-            const rotateAni = new BABYLON.Animation("rotateCamera", "alpha", settings.video.frameRate, 
-                BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE);
-
-            let rotateCameraFrameNum = settings.video.frameRate * durtime
-            const rotateFrames = [{
-                frame: 0,
-                value: this.camera.alpha
-            },{
-                frame: rotateCameraFrameNum,
-                value: this.camera.alpha + alphaOffset
-            }]; 
-
-            rotateAni.setKeys(rotateFrames);
-
-            video0.currentTime = startTime
-            await video0.play()
-
-            this.scene.beginDirectAnimation(this.camera, [rotateAni], 0, rotateCameraFrameNum, false, 1, 
-                () => {
-                    this.lastDirc = 0
-                    video0.pause()
-                    func && func()
-                });
-            
-        } else {
-            // console.error("-------------")
-            // video0.pause()
-        }
+            // 行走时锁定camera
+            this.cameraController.lockCamera(true)
+            this.charactorManager.charactor.startWalk(path, this)
 
-    }
+        })
+    
+        window.connection.socket.on("getRoute", (event) => {
+            console.log("getRoute", event);
+
+            // window.connection.socket.emit("getRotateVideo", {
+            //     videoPath: pointData.id + "/" + pointData.id,
+            //     sangle: 0,
+            //     eangle: 359,
+            //     reverses: true,
+            //     sceneCode: settings.sceneCode,
+            //     roomId: settings.roomId,
+            //     userId: settings.userId,
+            // });
+            // window.connection.socket.emit("getRotateVideo", {
+            //     videoPath: pointData.id + "/" + pointData.id,
+            //     sangle: 0,
+            //     eangle: 359,
+            //     reverses: false,
+            //     sceneCode: settings.sceneCode,
+            //     roomId: settings.roomId,
+            //     userId: settings.userId,
+            // });
 
-    lockCamera(isTrue) {
-        this.cameraControlEnable = isTrue
-        this.camera.lowerAlphaLimit = isTrue ? this.camera.alpha : null
-        this.camera.upperAlphaLimit = isTrue ? this.camera.alpha : null
+        });
     }
 
     updateHouseVideo(video, notPlay) {

+ 25 - 1
modules/utils/common.js

@@ -6,6 +6,30 @@ export default {
         }
         return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
     },
+
+    vec3UE4ToBABYLON(vec) {
+        return BABYLON.Vector3.TransformCoordinates(
+            new BABYLON.Vector3(vec.x, vec.y, vec.z),
+            BABYLON.Matrix.FromArray([
+                -0.01,  0,      0,      0,
+                0,      0,      0.01,   0,
+                0,      0.01,   0,      0,
+                0,      0,      0,      1
+            ])
+        )
+    },
+
+    vec3BABYLONToUE4(vec) {
+        return BABYLON.Vector3.TransformCoordinates(
+            new BABYLON.Vector3(vec.x, vec.y, vec.z),
+            BABYLON.Matrix.FromArray([
+                -100,   0,      0,      0,
+                0,      0,      100,    0,
+                0,      100,    0,      0,
+                0,      0,      0,      1
+            ])
+        )
+    },
     
     postData: (url, data) => {
         return fetch(url, {
@@ -44,7 +68,7 @@ export default {
                 video.autoplay = "autoplay" 
                 video.muted = "muted"
 
-                document.getElementById("videoTextureBox").appendChild(video)
+                // document.getElementById("videoTextureBox").appendChild(video)
 
                 video.onloadeddata = () => {
                     resolve(video);

+ 4 - 1
modules/utils/settings.js

@@ -10,5 +10,8 @@ export default {
         fov: Math.PI / 2,
         height: 1.4738033728196456,
         distanceFromCharactor: 3.5
-    }
+    },
+    sceneCode: "testApp",
+    userId: "testUser",
+    roomId: "8888",
 }

+ 23 - 4
webrtc/srs.js

@@ -100,10 +100,29 @@ window.connection = connection;
 //   reverses: true,
 // });
 
-connection.socket.on("getSocketVideo", async (data) => {
-  console.log("getSocketVideo", data);
-  downloadBlob(data, "getSocketVideo.mp4", "application/video");
-});
+// connection.socket.emit("getRoute", {
+//     sceneCode: testConfig.sceneCode,
+//     roomId: testConfig.roomId,
+//     userId: testConfig.userId,
+//     s_location: {
+//         x: 3.6,
+//         y: 0.0,
+//         z: -5.76,
+//     },
+//     e_location: {
+//         x: 2.88,
+//         y: 0.0,
+//         z: -4.68,
+//     },
+// });
+// connection.socket.on("getRoute", (event) => {
+//     console.log("getRoute", event);
+// });
+
+// connection.socket.on("getSocketVideo", async (data) => {
+//   console.log("getSocketVideo", data);
+//   downloadBlob(data, "getSocketVideo.mp4", "application/video");
+// });
 
 const downloadURL = function (r, n) {
   const o = document.createElement("a");