|
|
@@ -38,6 +38,9 @@ export default class App {
|
|
|
|
|
|
init() {
|
|
|
|
|
|
+ this.initVideo = true
|
|
|
+ this.isReverse = false
|
|
|
+
|
|
|
let self = this
|
|
|
BABYLON.SceneLoader.ImportMesh("", "../scenes/house/", "close_to_bottom_L.glb", this.scene, async function (newMeshes, particleSystems, skeletons, animationGroups) {
|
|
|
|
|
|
@@ -47,6 +50,29 @@ export default class App {
|
|
|
|
|
|
let houseVideo = document.getElementById("houseTexture0")
|
|
|
|
|
|
+ setTimeout(() => {
|
|
|
+
|
|
|
+ window.connection.socket.emit("getRotateVideo", {
|
|
|
+ videoPath: "0/0",
|
|
|
+ sangle: 0,
|
|
|
+ eangle: 360,
|
|
|
+ reverses: false,
|
|
|
+ sceneCode: settings.sceneCode,
|
|
|
+ roomId: settings.roomId,
|
|
|
+ userId: settings.userId,
|
|
|
+ });
|
|
|
+ window.connection.socket.emit("getRotateVideo", {
|
|
|
+ videoPath: "0/0" ,
|
|
|
+ sangle: 0,
|
|
|
+ eangle: 360,
|
|
|
+ reverses: true,
|
|
|
+ sceneCode: settings.sceneCode,
|
|
|
+ roomId: settings.roomId,
|
|
|
+ userId: settings.userId,
|
|
|
+ });
|
|
|
+
|
|
|
+ }, 1500)
|
|
|
+
|
|
|
newMeshes.forEach(m => {
|
|
|
// m.scaling.scaleInPlace(100);
|
|
|
m._geometry && (m.checkCollisions = true)
|
|
|
@@ -71,6 +97,9 @@ export default class App {
|
|
|
864 * window.innerWidth / settings.video.width, // 1500
|
|
|
settings.video.width * window.innerHeight / settings.video.height,
|
|
|
window.innerHeight
|
|
|
+ // 864 * window.innerHeight / settings.video.width, // 1500
|
|
|
+ // settings.video.width * window.innerWidth / settings.video.height,
|
|
|
+ // window.innerWidth
|
|
|
))
|
|
|
shaderMaterial.setFloat("isYUV", 0)
|
|
|
|
|
|
@@ -137,31 +166,48 @@ export default class App {
|
|
|
}
|
|
|
|
|
|
bindSocketEvents() {
|
|
|
-
|
|
|
+
|
|
|
+ // 获得旋转视频
|
|
|
window.connection.socket.on('getSocketVideo', async(data) => {
|
|
|
|
|
|
- console.log("[3D] get: ", data)
|
|
|
+ console.log("[3D] getSocketVideo: ", data)
|
|
|
|
|
|
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"
|
|
|
+ // let video = common.createVideoElement0(url)
|
|
|
+ // video.loop = "loop"
|
|
|
setTimeout(function () {
|
|
|
- return URL.revokeObjectURL(url)
|
|
|
+ return URL.revokeObjectURL(url)
|
|
|
}, 3000)
|
|
|
|
|
|
// this.cameraController.rotateCamera(this.cameraController.alphaOffset)
|
|
|
+
|
|
|
+ if(this.isReverse) {
|
|
|
+ document.getElementById("houseTextureReverse").src = url
|
|
|
+ } else {
|
|
|
+ document.getElementById("houseTexture").src = url
|
|
|
+ }
|
|
|
+
|
|
|
+ this.isReverse = !this.isReverse
|
|
|
+
|
|
|
+ if(this.initVideo) {
|
|
|
+ this.updateHouseVideoBlob(url, true)
|
|
|
+ this.initVideo = false
|
|
|
+ }
|
|
|
})
|
|
|
|
|
|
+ // 获得行走视频
|
|
|
window.connection.socket.on('getVideo', async (jsonArr) => {
|
|
|
|
|
|
- let path = jsonArr.map( async (data) => {
|
|
|
+ console.log("[3D] getVideo: ", data)
|
|
|
+
|
|
|
+ let path = jsonArr.map( async (data, index) => {
|
|
|
|
|
|
const blob = new Blob([data.video], { type: 'application/video' })
|
|
|
const url = URL.createObjectURL(blob)
|
|
|
setTimeout(function () {
|
|
|
- return URL.revokeObjectURL(url)
|
|
|
+ return URL.revokeObjectURL(url)
|
|
|
}, 3000)
|
|
|
|
|
|
return {
|
|
|
@@ -173,14 +219,17 @@ export default class App {
|
|
|
// 行走时锁定camera
|
|
|
this.cameraController.lockCamera(true)
|
|
|
this.charactorManager.charactor.startWalk(path, this)
|
|
|
-
|
|
|
})
|
|
|
|
|
|
+ // 获得行走路径
|
|
|
window.connection.socket.on("getRoute", (event) => {
|
|
|
- console.log("getRoute", event);
|
|
|
+
|
|
|
+ console.log("[3D] getRoute", event);
|
|
|
+
|
|
|
+ let endPointId = 1
|
|
|
|
|
|
// window.connection.socket.emit("getRotateVideo", {
|
|
|
- // videoPath: pointData.id + "/" + pointData.id,
|
|
|
+ // videoPath: endPointId + "/" + endPointId,
|
|
|
// sangle: 0,
|
|
|
// eangle: 359,
|
|
|
// reverses: true,
|
|
|
@@ -189,7 +238,7 @@ export default class App {
|
|
|
// userId: settings.userId,
|
|
|
// });
|
|
|
// window.connection.socket.emit("getRotateVideo", {
|
|
|
- // videoPath: pointData.id + "/" + pointData.id,
|
|
|
+ // videoPath: endPointId + "/" + endPointId,
|
|
|
// sangle: 0,
|
|
|
// eangle: 359,
|
|
|
// reverses: false,
|
|
|
@@ -198,6 +247,20 @@ export default class App {
|
|
|
// userId: settings.userId,
|
|
|
// });
|
|
|
|
|
|
+ let dir = this.charactorManager.getVideoDirecNum()
|
|
|
+
|
|
|
+ let arr = []
|
|
|
+ let videos = []
|
|
|
+ for(let i = 0; i < arr.length - 1; i++) {
|
|
|
+ videos.push(arr[i] + "/" + arr[i] + "_" + arr[i+1] + "_" + dir)
|
|
|
+ }
|
|
|
+
|
|
|
+ // connection.socket.emit("getVideo", {
|
|
|
+ // videoList: ["0/0_1_0", "0/0_1_1", "0/0_1_2"],
|
|
|
+ // sceneCode: testConfig.sceneCode,
|
|
|
+ // roomId: testConfig.roomId,
|
|
|
+ // userId: testConfig.userId,
|
|
|
+ // });
|
|
|
});
|
|
|
}
|
|
|
|
|
|
@@ -211,7 +274,7 @@ export default class App {
|
|
|
|
|
|
async updateHouseVideoBlob(blobUrl, notPlay) {
|
|
|
let video = await common.createVideoElement(blobUrl)
|
|
|
- video.loop = "loop"
|
|
|
+ // video.loop = "loop"
|
|
|
let videoTexture = new BABYLON.VideoTexture("", video, this.scene)
|
|
|
this.house.forEach(mesh => {
|
|
|
mesh.material && mesh.material.setTexture("texture_video", videoTexture)
|
zhouenguang