|
|
@@ -44,7 +44,7 @@
|
|
|
camera: null,
|
|
|
controlStarPosition: {
|
|
|
x: 0,
|
|
|
- y: 0,
|
|
|
+ y: -5,
|
|
|
z: 0
|
|
|
}, //控制器初始位置
|
|
|
cameraStarPosition: {
|
|
|
@@ -74,6 +74,7 @@
|
|
|
type:1,
|
|
|
bottomLeftX:0,
|
|
|
bottomLeftY:0,
|
|
|
+ coordinate:'',
|
|
|
}
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
@@ -115,8 +116,9 @@
|
|
|
var that = this;
|
|
|
console.warn("***webgl_rxdz_roam-options***", this.$route.query)
|
|
|
this.isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
|
|
|
- this.videoUrl = this.$route.query.videoUrl || 'https://dm.static.elab-plus.com/miniProgram/007.mp4';
|
|
|
+ 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 || '';
|
|
|
let screenWidth = window.screen.width;
|
|
|
let screenHeight = window.screen.height;
|
|
|
if (window.innerWidth && window.screen.width) {
|
|
|
@@ -133,7 +135,6 @@
|
|
|
this.top = this.top * unit;
|
|
|
this.canvasHeight = screenHeight;
|
|
|
this.houseId = this.$route.query.houseId ? this.$route.query.houseId : '';
|
|
|
- this.spaceId = this.$route.query.spaceId ? this.$route.query.spaceId : '';
|
|
|
let container = this.$refs.webgl;
|
|
|
let canvas3d = this.canvas = this.$refs.glcanvas;
|
|
|
//uniapp 兼容写法，因为uni的页面对象的Vue 实例是$vm
|
|
|
@@ -146,29 +147,24 @@
|
|
|
boundary = null;
|
|
|
let videoMesh = null;
|
|
|
init();
|
|
|
- // this.clearEvent = clearEvent;
|
|
|
- // this.attendEvent = attendEvent;
|
|
|
this.starRender = starRender; //对外暴露启动渲染的方法
|
|
|
this.stopRender = stopRender; //对外暴露停止渲染的方法
|
|
|
|
|
|
function init() {
|
|
|
// 创建相机位置
|
|
|
- camera = new THREE.PerspectiveCamera(120, screenWidth / that.canvasHeight, 0.1, 10000);
|
|
|
+ camera = new THREE.PerspectiveCamera(90, screenWidth / that.canvasHeight, 0.1, 10000);
|
|
|
// camera.up.set(0, 1, 0);//俯视状态，将相机的up向量设置为z轴负方向 {x:0,y:1,z:0}
|
|
|
camera.position.set(that.cameraStarPosition.x, that.cameraStarPosition.y, that.cameraStarPosition.z);
|
|
|
scene.add(camera);
|
|
|
that.camera = camera;
|
|
|
-
|
|
|
- // 环境光会均匀的照亮场景中的所有物体
|
|
|
- // const ambientLight = new THREE.AmbientLight(0xFFEFE0, 3.5);
|
|
|
- // scene.add(ambientLight);
|
|
|
+
|
|
|
// 辅助方格
|
|
|
- // const axesHelper = new THREE.AxesHelper( 50 );
|
|
|
- // scene.add( axesHelper );
|
|
|
- // const gridHelper = new THREE.GridHelper(50, 10, 0xcccccc, 0xcccccc);
|
|
|
- // gridHelper.position.y = 0;
|
|
|
- // gridHelper.position.x = 0;
|
|
|
- // scene.add(gridHelper);
|
|
|
+ const axesHelper = new THREE.AxesHelper( 50 );
|
|
|
+ scene.add( axesHelper );
|
|
|
+ const gridHelper = new THREE.GridHelper(50, 10, 0xcccccc, 0xcccccc);
|
|
|
+ gridHelper.position.y = 0;
|
|
|
+ gridHelper.position.x = 0;
|
|
|
+ scene.add(gridHelper);
|
|
|
//加载环境720贴图
|
|
|
const loader = new THREE.TextureLoader();
|
|
|
const texture = loader.load(that.bgUrl, () => {
|
|
|
@@ -191,7 +187,7 @@
|
|
|
controls = new OrbitControls(camera, renderer.domElement);
|
|
|
controls.enableDamping = true; //启动缓动
|
|
|
controls.minDistance = 0.0001;
|
|
|
- controls.maxDistance = 30;
|
|
|
+ controls.maxDistance = 300;
|
|
|
// controls.minPolarAngle = 0; // 默认0
|
|
|
// controls.maxPolarAngle = Math.PI / 2; // 默认Math.PI，即可以向下旋转到的视角。
|
|
|
controls.enableZoom = true; //启用摄像机的缩放
|
|
|
@@ -209,10 +205,14 @@
|
|
|
// }
|
|
|
// }
|
|
|
// });
|
|
|
- camera.lookAt(that.controlStarPosition.x, that.controlStarPosition.y, that.controlStarPosition.z);
|
|
|
+ if(that.coordinate){
|
|
|
+ let position = JSON.parse(that.coordinate);
|
|
|
+ // mesh.position.set();//设置视频位置
|
|
|
+ camera.lookAt(position.x, position.y, position.z);
|
|
|
+ }
|
|
|
+ // camera.lookAt(that.controlStarPosition.x, that.controlStarPosition.y, that.controlStarPosition.z);
|
|
|
starRender(); //启动渲染
|
|
|
// var guideMask = document.querySelector('#guide-mask');
|
|
|
-
|
|
|
if(that.isIOS){
|
|
|
document.addEventListener("WeixinJSBridgeReady", function (){
|
|
|
videoHandle();
|
|
|
@@ -220,15 +220,16 @@
|
|
|
}else{
|
|
|
document.addEventListener("touchstart", ()=> {
|
|
|
// guideMask.classList.add('guide-mask-hide');
|
|
|
- setTimeout(()=>{
|
|
|
- videoHandle();
|
|
|
- },200)
|
|
|
+ videoHandle();
|
|
|
}, false);
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
function videoHandle() {
|
|
|
+ if(!that.videoUrl){
|
|
|
+ return false;
|
|
|
+ }
|
|
|
if(videoMesh){
|
|
|
return false
|
|
|
}
|
|
|
@@ -426,8 +427,12 @@
|
|
|
let geometry = new THREE.PlaneGeometry(9, 16);
|
|
|
// 应用绿幕材质到对象上
|
|
|
let mesh = new THREE.Mesh(geometry, greenScreenMaterial);
|
|
|
- mesh.position.set(0, 0, -10);//设置视频位置
|
|
|
- // mesh.lookAt(camera.position);
|
|
|
+ if(that.coordinate){
|
|
|
+ let position = JSON.parse(that.coordinate);
|
|
|
+ mesh.position.set(position.x, position.y, position.z);//设置视频位置
|
|
|
+ }else{
|
|
|
+ mesh.position.set(0, 0, -10);//设置视频位置
|
|
|
+ }
|
|
|
scene.add(mesh);
|
|
|
videoMesh = mesh;
|
|
|
}
|
|
|
@@ -448,6 +453,7 @@
|
|
|
if (needRender == false) {
|
|
|
return false;
|
|
|
}
|
|
|
+ controls.update();
|
|
|
if(videoMesh){
|
|
|
videoMesh.lookAt(camera.position);
|
|
|
}
|
|
|
@@ -471,13 +477,31 @@
|
|
|
// showCancelButton: true
|
|
|
// });
|
|
|
// window.open(shottingImg, "_blank");
|
|
|
- window.location.href = shottingImg
|
|
|
+ // window.location.href = shottingImg
|
|
|
+ let param = {
|
|
|
+ type: 'CLK', //埋点类型
|
|
|
+ clkId: 'clk_2cmina_23121401', //点击ID
|
|
|
+ clkName: 'webgl_cover_clk', //点击前往的页面名称
|
|
|
+ clkParams: {
|
|
|
+ locusName: "封面确认",
|
|
|
+ locusValue: shottingImg
|
|
|
+ }
|
|
|
+ };
|
|
|
+ util.trackRequest(param);
|
|
|
+ if(window.__wxjs_environment === 'miniprogram'){
|
|
|
+ wx.miniProgram.postMessage({data: {bgUrl:shottingImg}})
|
|
|
+ wx.miniProgram.navigateBack();
|
|
|
+ // wx.miniProgram.navigateTo({
|
|
|
+ // url: '/extraPackage/pages/aiPublishPage/aiPublishPage?houseId='+this.$store.state.houseId
|
|
|
+ // + '&coordinate=' + encodeURIComponent(this.$route.query.coordinate)
|
|
|
+ // + '&bgUrl=' + shottingImg
|
|
|
+ // + '&videoUrl=' + encodeURIComponent(this.$route.query.videoUrl)})
|
|
|
+ }else{
|
|
|
+ window.location.href = shottingImg
|
|
|
+ }
|
|
|
},
|
|
|
navbarBackClk() {
|
|
|
|
|
|
- },
|
|
|
- clearHandle() {
|
|
|
- this.clearEvent();
|
|
|
},
|
|
|
mytouchstart(e,type) {
|
|
|
console.warn("***mytouchstart***",type)
|
zjs_project