<template src="./mapComponent.html"></template>
<script>
	import * as THREE from 'three';
	import Stats from 'three/addons/libs/stats.module.js';
	import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
	import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

    import TWEEN from 'three/addons/libs/tween.module.js';

	var requestId = "";
	// const util = require('@/static/utils/util.js');
	const config = require('@/services/urlConfig.js');
	export default {
		/**
		 * 页面的初始数据
		 */
		data() {
			return {
				pvCurPageName: "home_show",
				locusBehaviorName: "主界面",
				pvCurPageParams: null,
				houseId: "100296",
				pvId: 'p_2cmina_23080401',
				canvas:null,
				navbar: {
					showCapsule: 1,
					title: '',
					titleColor: '#000',
					navPadding: 0,
					navPaddingBg:'transparent',
					navBarColor: 'transparent',
					navBackColor: 'transparent',
					haveCallback: false,
					fromShare: false,
					fromProject: 0,
					shareToken: "",
					pageName: this.pvCurPageName,
				},
				loader:null,
				scene:null,
				sky:null,
				camera:null,
				houseList:[],	//当前户型所有的户型详情，可以切换
				curHouseType: null,	//当前选中的户型类型
				curHouseName:'',//当前选中的户型类型名称
				curHouseFloor: null,	//当前选中的户型楼层
				curHouseObj: null,
				controlStarPosition : { x:0, y:0, z:0},	//控制器初始位置
				cameraStarPosition : { x:0, y:20, z:0}	,//摄像头初始位置
				// cameraLastPosition: null,		//摄像头上一次移动到的位置
				// controlLastPosition: null,		//观察点上一次移动到的位置
				// canvasHeight:200,	//canvas视图的高度-计算得出
				chooseMesh:null,//标记鼠标拾取到的mesh
				// chooseMeshColor:'',	//拾取到的mesh的原始颜色；
				chooseWallMeshColor:'', // 拾取墙体原始颜色
				curWallArr:[], // 当前空间选中墙面的墙体模型
				isManyou: false,	//当前是否处在漫游状态
				pageShowIndex: 2, // 默认户型列表页面
				aleadyLoaderModel:[],	//已经加载的墙体元数据模型列表
				// fontLabelGroup: [],
				shottingImg: [],
				progress:1,	//进度条
				myLoadingStatus:false,
				// textGeoList:[],
				repeatFlag:false,	//重复点击
				skyPlan: null, // 天空盒子

				gltfLayouts:[], // 场景中墙体模型数组
			}
		},
		onUnload() {
			cancelAnimationFrame(requestId, this.canvas)
			this.worker && this.worker.terminate()
			setTimeout(() => {
				if (this.renderer instanceof THREE.WebGLRenderer) {
					this.renderer.dispose()
					this.renderer.forceContextLoss()
					this.renderer.context = null
					this.renderer.domElement = null
					this.renderer = null;
					this.clearEvent()
				}
				this.gltfWalls = [];
				this.gltfSpaces = [];
				this.instancedMeshList = [];
				this.instancedSpaceMeshList = [];
				this.lableItem = [];
				this.gltfLayouts = [];
				this.instancedFurList = [];
				this.wallList = [];
				TWEEN && TWEEN.removeAll();//清除所有的tween;
			}, 0)
		},
        mounted() {
			
			
			var that = this;
			const container = this.$refs.webgl;
            const canvas3d = this.canvas = this.$refs.glcanvas;

			let camera = null, renderer = null, controls=null;
			// let trackballControls = null;
			console.warn("***loader0***",this.loader)
			let loader = null;
			loader = this.loader = new GLTFLoader();
			// if(this.childLayout){
				// this.getInitData();//请求获取页面模型数据等
			// }
            let scene = this.scene = new THREE.Scene();
			let isUserContorl = false;
			let tweenCameraAnma = false;	//表示当前是否处在动画过程中
			let needRender = false;	//是否需要渲染 false表示不需要渲染；true 表示需要渲染
			let frustumSize = 30;//正交相机的视窗宽度距离
			let stats;
			let gltfLists = [];
			let objects = [];
			var mouse = new THREE.Vector2();
			init();
			// render();
			// this.$refs.myLoading.showLoading("加载中..." + this.progress+"%")
			// this.myLoadingStatus = true;
			
			function init() {

                scene.background = new THREE.Color("#FFFFFF");
                // scene.environment = new THREE.Color("#F2F2F2");

				// 创建相机位置-投影相机
				camera = new THREE.PerspectiveCamera( 80, window.innerWidth / window.innerHeight, 0.1, 10000 );
				// let aspect = window.innerWidth /  window.innerHeight;
				// camera = new THREE.OrthographicCamera( frustumSize * aspect / - 2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 0.1,1000);
				camera.up.set(0, 1, 0);//俯视状态，将相机的up向量设置为z轴负方向
				// camera.position.set(that.cameraStarPosition.x, that.cameraStarPosition.y, that.cameraStarPosition.z);
				camera.position.set(0.1,15,0);
				scene.add(camera);
                that.camera = camera;
				// 辅助方格
				// 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 ambientLight = new THREE.AmbientLight(0xFFEFE0, 2);
                scene.add(ambientLight);
                //平行光
                const light = new THREE.DirectionalLight(0xFFF8E5, 2.2);
                light.position.set(-14.8, 9.188, -7.448); //default; light shining from top
                scene.add(light);
                // 从一个点向各个方向发射的光源。一个常见的例子是模拟一个灯泡发出的光。
                // const pointLight = new THREE.PointLight( 0xffffff, 0.3 );
                // camera.add( pointLight );

				
				//antialias 这个值得设置为false，不然IOS上截图会失效
                renderer = that.renderer = new THREE.WebGLRenderer( { canvas:canvas3d, alpha: true, antialias:false,
					// 如果想保存three.js canvas画布上的信息，注意设置preserveDrawingBuffer
					preserveDrawingBuffer: true, } );
				renderer.shadowMap.enabled = true;//产生阴影
				renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 阴影属性
				renderer.outputEncoding = THREE.sRGBEncoding;
				renderer.outputColorSpace = THREE.SRGBColorSpace;
				// renderer.toneMappingExposure = 0.1;//色调映射的曝光级别。默认是1
				renderer.toneMapping = THREE.NoToneMapping;//色调映射
				renderer.physicallyCorrectLights = true;//关键参数，模拟物理光照影响，必须设置为true
				
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth,  window.innerHeight );
                container.appendChild( renderer.domElement );
				
				controls = new OrbitControls(camera, renderer.domElement);
				controls.screenSpacePanning = true;
				controls.enableDamping = true;
				controls.minDistance = 1;
				controls.maxDistance = 400;
				controls.minPolarAngle = 0;// 默认0
				controls.maxPolarAngle = Math.PI / 2; // 默认Math.PI，即可以向下旋转到的视角。
				controls.target.set(that.controlStarPosition.x, that.controlStarPosition.y, that.controlStarPosition.z);
				controls.enableZoom = true;//启用摄像机的缩放
				
				// that.controls = controls;
				// controls.target = new THREE.Vector3( that.controlStarPosition.x, that.controlStarPosition.y, that.controlStarPosition.z );;
				camera.lookAt(0,0,0);
                // 监听
                // renderer.domElement.addEventListener('resize', onWindowResize );
				stats = new Stats();
				container.appendChild( stats.dom );
				// attendEvent();	//注册监听事件
				starRender();	//启动渲染
				// 监听
				// window.addEventListener( 'resize', onWindowResize );
				let arr = [
					{url: 'https://dm.static.elab-plus.com/3d/model/11-28/%E5%B7%A5%E4%BD%9C%E5%AD%A6%E4%B9%A0-%E7%9B%B4%E6%8E%A5.glb', name: '工作学习模块', positionX: 3, positionY: 0, positionZ:-1.5, rotation: (270 * ( Math.PI / 180 )),},
					{url: 'https://dm.static.elab-plus.com/3d/model/11-28/%E7%9D%A1%E7%9C%A0-%E9%97%B4%E6%8E%A5.glb', name: '睡眠模块', positionX: 6, positionY: 0, positionZ:1.5, rotation: (180 * ( Math.PI / 180 )),},
					{url: 'https://dm.static.elab-plus.com/3d/model/11-28/%E5%AE%A0%E7%89%A9-%E6%A0%B8%E5%BF%83.glb', name: '宠物模块', positionX: -3, positionY: 0, positionZ:1.5, rotation:0,},
					{url: 'https://dm.static.elab-plus.com/3d/model/11-28/%E4%BC%91%E9%97%B2-%E7%9B%B4%E6%8E%A5.glb', name: '休闲模块', positionX: 3, positionY: 0, positionZ:1.5, rotation: (180 * ( Math.PI / 180 )),},
					{url: 'https://dm.static.elab-plus.com/3d/model/11-28/%E5%BD%B1%E9%9F%B3-%E7%9B%B4%E6%8E%A5.glb', name: '影音模块', positionX: 0, positionY: 0, positionZ:1.5, rotation: (180 * ( Math.PI / 180 )),},
					{url: 'https://dm.static.elab-plus.com/3d/model/11-28/%E6%B4%97%E6%B5%B4-%E9%97%B4%E6%8E%A5.glb', name: '洗浴模块', positionX: -3, positionY: 0, positionZ:3.5, rotation: (90 * ( Math.PI / 180 )),},
					{url: 'https://dm.static.elab-plus.com/3d/model/11-28/%E6%94%B6%E7%BA%B3-%E9%97%B4%E6%8E%A5.glb', name: '收纳模块', positionX: -3, positionY: 0, positionZ:1.5, rotation: (90 * ( Math.PI / 180 )),},
					{url: 'https://dm.static.elab-plus.com/3d/model/11-28/%E5%AE%B6%E6%94%BF-%E9%97%B4%E6%8E%A5.glb', name: '家政模块', positionX: -6, positionY: 0, positionZ:-1.5, rotation: 0,},
				];
				arr.forEach((item,index) =>{
					loaderArr(item,index)
				})
            }
			function loaderArr(item,index){
				loader.load( item.url,  ( gltf ) => {
					//将模型添加到场景中
					var cube =  gltf.scene;
					var mesh = cube.children[0];
					cube.name= item.name;
					scene.add(cube);
					cube.rotation.y = item.rotation;
					cube.position.set(item.positionX,item.positionY,item.positionZ);
					
					// cube.userData.obb = new OBB();
					// cube.userData.obb = new OBB();
					// cube.userData.obb.halfSize.copy( size ).multiplyScalar( 0.5 );
					console.warn("***gltf-geometry" + index + "***",gltf)
					gltfLists.push(cube);
					
					// let obb = new OBB();
					// obb.halfSize.copy( size ).multiplyScalar( 0.5 );
					
					let box = new THREE.BoxHelper(cube,'rgba(0,0,0,0)');
					box.name = item.name;
					console.warn("***WireframeGeometry-geometry***",box)
					scene.add(box);
					var material = new THREE.MeshBasicMaterial({
						transparent:true,
						opacity:0.6

					});
					// material.wireframe = true;
					var mesh = new THREE.Mesh(box.geometry,material);
					scene.add(mesh);
					objects.push(box);
				} );
			}
			function onWindowResize() {
			    camera.aspect = window.innerWidth / window.innerHeight;
			    camera.updateProjectionMatrix();
			    renderer.setSize( window.innerWidth, window.innerHeight );
				console.warn("****onWindowResize**")
			}
			function attendEvent () {
				document.addEventListener('touchstart', onPointerStart, false);
				document.addEventListener('touchmove', onPointerMove, false);
				document.addEventListener('touchend', onPointerUp, false);
			}
			function tweenCameraAnmaChange (value) {
				tweenCameraAnma = value
			}
			//开启渲染-帧率优化，不触发时停止渲染
			function enableRender() {
			}
			//取消事件监听-避免二次进入时触发多次事件
			function clearEvent(){
				console.warn("**clearEvent****")
				document.removeEventListener('touchstart', onPointerStart);
				document.removeEventListener('touchmove', onPointerMove );
				document.removeEventListener('touchend', onPointerUp );
			}
			function stopRender () {
				needRender = false;
			}
			function starRender () {
				if(needRender==true){//如果已经在渲染中了，则不能再次开启，避免渲染过多
					false;
				}
				needRender = true;
				render();//开始渲染
			}
            function render() {
				if(needRender==false){
					return false;
				}
                TWEEN && TWEEN.update();
				stats.update();
				//不处在动画过程中，则可以处理移动等动作
				if(tweenCameraAnma==false){
					controls.update();
				}
				requestId = requestAnimationFrame(render, canvas3d);
				renderer.render(scene, camera);//单次渲染
            }
		},
		onShow(){
			if(this.attendEvent){
				this.attendEvent()
			}
		},
		onHide(){
			this.clearEvent();
		},
		methods: {
			onMouseMove(e){
				return false;
			},
            webgl_touch(e) {
                const web_e = Event.fix(e)
                window.dispatchEvent(web_e)
				let web_e2 = Object.assign(e,web_e)
                document.dispatchEvent(web_e2)
                this.canvas.dispatchEvent(web_e)
            },
			changCarmer(){
				this.camera.position.set(-0.1,15,0);
			}
			
        }
    }
</script>
<style lang="css" scoped>
	@import "./mapComponent.css";
</style>