<template>
  <div>
    <div id="threeContained"></div>
  </div>
</template>
<script>
import * as THREE from "three"; //引入Threejs
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import Stats from "three/examples/jsm/libs/stats.module";

// const OrbitControls = require("three-orbit-controls")(THREE);
export default {
  name: "vue-three",
  data() {
    return {
      scene: "",
      light: "",
      camera: "",
      controls: "",
      renderer: "",
	    load:'',
      clock:'',
      mixer:''
    };
  },
  methods: {
    init() {
      var that = this;
      let container = document.getElementById("threeContained");

      // 建立場景
      that.scene = new THREE.Scene();
      that.scene.background = new THREE.Color(0x8cc7de);
      // 建立相機 
      that.camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        0.1,
        2000
      );
      // that.camera.position.set( -70, 25, 90 );
      // 定位相機，並且指向場景中心
			that.camera.position.x = 30;
			that.camera.position.y = 30;
			that.camera.position.z = 170;
			that.camera.lookAt(that.scene.position)

      /// 顯示三維座標系
			var axes = new THREE.AxesHelper(100)
			// 新增座標系到場景中
			that.scene.add(axes);

      
     // 建立地面
      // const geometry = new THREE.BoxGeometry();
      // const material = new THREE.MeshPhongMaterial({ color: 0xffffff });
      // const cube = new THREE.Mesh(geometry, material);
      // that.scene.add(cube);

      // 建立地面的幾何體
			var planeGeometry = new THREE.PlaneGeometry(100, 60);
			// 給地面物體上色
			var planeMaterial = new THREE.MeshStandardMaterial({ color: 0xcccccc });
			// 建立地面
			var plane = new THREE.Mesh(planeGeometry, planeMaterial);
      plane.material.opacity = 0.6;
      plane.material.transparent = true;
      plane.rotation.x = -0.5 * Math.PI;
			plane.position.x = 0;
			plane.position.y = 0;
			plane.position.z = 0;
			plane.castShadow = true;
			// 接收陰影
			plane.receiveShadow = true;
      that.scene.add(plane);

      const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444);
      hemiLight.position.set(0, 1, 0);
      that.scene.add(hemiLight);

      const directionalLight1 = new THREE.DirectionalLight(0xffeeff, 0.8);
      directionalLight1.position.set(1, 1, 1);
      that.scene.add(directionalLight1);

      const directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.8);
      directionalLight2.position.set(-1, 0.5, -1);
      that.scene.add(directionalLight2);

      const ambientLight = new THREE.AmbientLight(0xffffee, 0.25);
      that.scene.add(ambientLight);


      // stats
      that.stats = new Stats();
      container.appendChild(that.stats.dom);

      // 材質
      const normal = new THREE.TextureLoader().load( 'models/shanghai/textures/shanghai.jpg' );

      // model
      that.loader = new FBXLoader();
			that.loader.load("/models/shanghai/model/shanghai.fbx", function (object) {
        // that.mixer = new THREE.AnimationMixer( object );
        // const action = that.mixer.clipAction( object.animations[ 0 ] );
				// action.play();
        // object.traverse( function ( child ) {
        //   if ( child.isMesh ) {
        //     child.castShadow = true;
				// 		child.receiveShadow = true;
				// 	}
				// });

        object.traverse( function ( child ) {

						if ( child.isMesh ) {

							child.material.specular.setScalar( 0.1 );
							child.material.normalMap = normal;

						}

					} );

        console.log(object);
        object.scale.set(0.1,0.1,0.1)
        // object.scale.set(1,1,1)
        that.scene.add(object);
        that.animate();
      });

      
      // 建立渲染器
      that.renderer = new THREE.WebGLRenderer();
      that.renderer.setPixelRatio(window.devicePixelRatio);
      // 設定渲染器的初始顏色
      that.renderer.setClearColor(new THREE.Color(0xeeeeee));
      // 設定輸出canvas畫面的大小
      that.renderer.setSize(window.innerWidth, window.innerHeight);
      container.appendChild(that.renderer.domElement);




      const controls = new OrbitControls(that.camera, that.renderer.domElement);
      controls.target.set(0, 12, 0);
      controls.update();
		// debugger
	//   window.addEventListener("onpointerdown", that.selectObject());
      window.addEventListener("resize", that.onWindowResize);
    },

    onWindowResize() {
      this.camera.aspect = window.innerWidth / window.innerHeight;
      this.camera.updateProjectionMatrix();

      this.renderer.setSize(window.innerWidth, window.innerHeight);
    },

    animate() {
      // requestAnimationFrame(this.animate);

      // this.renderer.render(this.scene, this.camera);

      // this.stats.update();

      requestAnimationFrame( this.animate );
      const delta = this.clock.getDelta();
      if ( this.mixer ) this.mixer.update( delta );
      this.renderer.render( this.scene, this.camera );
      this.stats.update();
    },
    selectObject(event) {
      debugger

      if (event.button != 0) return;

      const mouse = new THREE.Vector2();
      mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
      mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

      const raycaster = new THREE.Raycaster();
      raycaster.setFromCamera(mouse, this.camera);

      const intersected = raycaster.intersectObjects(
        this.scene.children,
        false
      );
	  console.log(intersected)
      if (intersected.length) {
        const found = intersected[0];
        const faceIndex = found.faceIndex;
        const geometry = found.object.geometry;
		console.log(this.load)
        // const id = ifcLoader.ifcManager.getExpressId(geometry, faceIndex);

        const modelID = found.object.modelID;
        // ifcLoader.ifcManager.createSubset( { modelID, ids: [ id ], scene, removePrevious: true, material: highlightMaterial } );
        // const props = ifcLoader.ifcManager.getItemProperties(modelID, id, true);
        // console.log(props);
        // this.renderer.render( this.scene, this.camera );
      }
    },
  },
  mounted() {
    this.clock = new THREE.Clock();
    this.init();
    this.animate();
    window.onpointerdown = this.selectObject;
  },
};
</script>

<style scoped>
html,
body {
  height: 100%;
}
/* #container {
  width: 100%;
  margin: 0 auto;
  height: 1000px;
  overflow: hidden;
} */
</style>