|
@@ -60,6 +60,7 @@
|
|
|
videoUrl:'', //绿幕视频地址
|
|
|
bgUrl:'',
|
|
|
coordinate:'',
|
|
|
+ hasOneTouch:false,
|
|
|
}
|
|
|
},
|
|
|
beforeDestroy() {
|
|
@@ -104,6 +105,7 @@
|
|
|
this.videoUrl = this.$route.query.videoUrl || '';
|
|
|
this.bgUrl = this.$route.query.bgUrl || 'https://dm.static.elab-plus.com/miniProgram/tears_of_steel_bridge_2k.jpg';
|
|
|
this.coordinate = this.$route.query.coordinate || '';
|
|
|
+ this.type = this.$route.query.type || '';
|
|
|
let screenWidth = window.screen.width;
|
|
|
let screenHeight = window.screen.height;
|
|
|
if (window.innerWidth && window.screen.width) {
|
|
@@ -127,7 +129,7 @@
|
|
|
let controls = null,
|
|
|
boundary = null;
|
|
|
let stats;
|
|
|
- let videoMesh = null;
|
|
|
+ let videoMeshGroup = [];
|
|
|
init();
|
|
|
// this.clearEvent = clearEvent;
|
|
|
// this.attendEvent = attendEvent;
|
|
@@ -197,30 +199,62 @@
|
|
|
starRender(); //启动渲染
|
|
|
if(that.isIOS){
|
|
|
document.addEventListener("WeixinJSBridgeReady", function (){
|
|
|
- videoHandle();
|
|
|
+ if(that.type){
|
|
|
+ moreTest()
|
|
|
+ }else{
|
|
|
+ videoHandle({videoUrl:that.videoUrl,coordinate:that.coordinate});
|
|
|
+ }
|
|
|
}, false)
|
|
|
}
|
|
|
var guideMask = document.querySelector('#guide-mask');
|
|
|
document.addEventListener("touchstart", function () {
|
|
|
guideMask.classList.add('guide-mask-hide');
|
|
|
- if(!that.isIOS){
|
|
|
+ if(!that.isIOS && that.hasOneTouch==false){
|
|
|
+ that.hasOneTouch = true;
|
|
|
setTimeout(()=>{
|
|
|
- videoHandle();
|
|
|
+ if(that.type){
|
|
|
+ moreTest()
|
|
|
+ }else{
|
|
|
+ videoHandle({videoUrl:that.videoUrl,coordinate:that.coordinate});
|
|
|
+ }
|
|
|
},500)
|
|
|
}
|
|
|
}, false);
|
|
|
}
|
|
|
-
|
|
|
- function videoHandle() {
|
|
|
- if(!that.videoUrl){
|
|
|
+ function moreTest(){
|
|
|
+ let data = [
|
|
|
+ {
|
|
|
+ videoUrl:'https://dm.static.elab-plus.com/miniProgram/002.mp4',
|
|
|
+ coordinate:'{"x":6,"y":-5,"z":0}',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ videoUrl:'https://dm.static.elab-plus.com/miniProgram/004.mp4',
|
|
|
+ coordinate:'{"x":-13,"y":16,"z":8}',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ videoUrl:'https://dm.static.elab-plus.com/miniProgram/005.mp4',
|
|
|
+ coordinate:'{"x":13,"y":-14,"z":-35}',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ videoUrl:'https://dm.static.elab-plus.com/miniProgram/007.mp4',
|
|
|
+ coordinate:'{"x":0,"y":4,"z":25}',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ videoUrl:'https://dm.static.elab-plus.com/miniProgram/008.mov',
|
|
|
+ coordinate:'{"x":3,"y":-4,"z":-5}',
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ data.forEach(it=>{
|
|
|
+ videoHandle(it);
|
|
|
+ })
|
|
|
+ }
|
|
|
+ function videoHandle(item) {
|
|
|
+ if(!item.videoUrl){
|
|
|
return false;
|
|
|
}
|
|
|
- if(videoMesh){
|
|
|
- return false
|
|
|
- }
|
|
|
// 创建视频元素
|
|
|
var video = document.createElement('video');
|
|
|
- video.src = that.videoUrl; // 视频文件的路径
|
|
|
+ video.src = item.videoUrl; // 视频文件的路径
|
|
|
video.setAttribute("crossOrigin", "Anonymous");
|
|
|
video.loop = true;
|
|
|
video.muted = true;
|
|
@@ -404,15 +438,16 @@
|
|
|
let geometry = new THREE.PlaneGeometry(9, 16);
|
|
|
// 应用绿幕材质到对象上
|
|
|
let mesh = new THREE.Mesh(geometry, greenScreenMaterial);
|
|
|
- if(that.coordinate){
|
|
|
- let position = JSON.parse(that.coordinate);
|
|
|
+ if(item.coordinate){
|
|
|
+ let position = JSON.parse(item.coordinate);
|
|
|
mesh.position.set(position.x, position.y, position.z);//设置视频位置
|
|
|
}else{
|
|
|
mesh.position.set(0, 0, -10);//设置视频位置
|
|
|
}
|
|
|
// mesh.lookAt(camera.position);
|
|
|
scene.add(mesh);
|
|
|
- videoMesh = mesh;
|
|
|
+ videoMeshGroup.push(mesh);
|
|
|
+ // videoMesh = mesh;
|
|
|
}
|
|
|
|
|
|
function stopRender() {
|
|
@@ -433,8 +468,8 @@
|
|
|
}
|
|
|
// stats.update();
|
|
|
controls.update();
|
|
|
- if(videoMesh){
|
|
|
- videoMesh.lookAt(camera.position);
|
|
|
+ if(videoMeshGroup){
|
|
|
+ videoMeshGroup.forEach(it=>{it.lookAt(camera.position)})
|
|
|
}
|
|
|
renderer.render(scene, camera); //单次渲染
|
|
|
requestId = requestAnimationFrame(render, canvas3d);
|