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, -1), app.scene); app.scene.activeCamera = camera1; // app.scene.activeCamera.attachControl(app.scene.canvas, true); camera1.inertia = 0 camera1.minZ = 100 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) { // 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, dirc) this.enable = false this.initAlpha = 0 } this.lastFramePoint = currentFramePoint if(dirc != 0 && this.lastDirc * dirc > 0) this.lastDirc = dirc } async rotateCamera(alphaOffset, dirc, func) { if(dirc == 0) { func && func() return } let video0 if(this.lastDirc * dirc <= 0) { if(dirc < 0) { // 顺时针 video0 = document.getElementById("houseTexture") } if(dirc > 0) { // 逆时针 video0 = document.getElementById("houseTextureReverse") } this.lastDirc = dirc } else { // 当行走结束后，texture是walk视频，所以必须重赋值 if(this.lastDirc < 0) { // 顺时针 video0 = document.getElementById("houseTexture") } if(this.lastDirc > 0) { // 逆时针 video0 = document.getElementById("houseTextureReverse") } } 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 } let durtime = Math.abs(alphaOffset / (Math.PI * 2) * video0.duration) 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 if(this.app.hasVideoTexture) this.app.house[1].material._textures.texture_video.video = video0 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() }); } lockCamera(isTrue) { this.cameraControlEnable = isTrue this.camera.lowerAlphaLimit = isTrue ? this.camera.alpha : null this.camera.upperAlphaLimit = isTrue ? this.camera.alpha : null } }