<template></template>
<script setup>
import { onMounted } from 'vue'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js'
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'
import { CSS3DRenderer, CSS3DObject } from "three/examples/jsm/renderers/CSS3DRenderer";
import * as THREE from 'three';

onMounted(() => {
  init()
  createCamera()
  createRender()
  createLight()
  // console.log(requestAnimationFrame);

  animate()
  initIcon()
})
//加入事件监听器,窗口自适应
window.addEventListener('resize', function () {
  var width = window.innerWidth;
  var height = window.innerHeight;
  renderer.setSize(width, height);
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
  labelRenderer.setSize(window.innerWidth, window.innerHeight);
  // initIcon()
})

let scene
let camera
let renderer
let mesh //材质
let labelRenderer //3d图片
let controls
scene = new THREE.Scene()
camera = new THREE.PerspectiveCamera(25, window.innerWidth / window.innerHeight, .6, 10000)
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
// 增加控制器
controls = new OrbitControls(camera, renderer.domElement)
// controls.maxPolarAngle = 20*Math.PI
controls.maxDistance = 1000
controls.minDistance = 200
// controls.minAzimuthAngle = 100 * Math.PI;
// controls.maxAzimuthAngle = 100 * Math.PI;
controls.minPolarAngle = 0;
controls.maxPolarAngle = (Math.PI / 4) *2

const emissiveColor = new THREE.Color(0xff0000)
const material = new THREE.MeshStandardMaterial({
  color: 0xffffff, // 模型的基本颜色
  emissive: emissiveColor,
  emissiveIntensity: 1, // 自发光强度（可选）
});
// function init() {
//     const mtLoader = new MTLLoader()
//     const loader = new OBJLoader()
//     mtLoader.load('/model/YinFangShuJu_01.mtl', function (material) {

//         console.log(material);
//         material.preload()
//         loader.setMaterials(material)
//         // 设置当前纹理

//         loader.load('/model/YinFangShuJu_01.obj', (loadMesh) => {
//             mesh = loadMesh
//             console.log(mesh);
//             // 添加到场景
//             scene.add(mesh)
//         }, (xhr) => {
//             if (xhr.lengthComputable) {
//                 const percentComplete = xhr.loaded / xhr.total * 100
//                 console.log(Math.round(percentComplete, 2) + '%')
//             }

//         })
//     })
// }
function init() {

  const loader = new FBXLoader()
  loader.load('YFSJ_Model.fbx', (fbx) => {
    // fbx.traverse(function (child) {
    //   if (child.isMesh && child.name =='路牙') {
    //     child.material = new THREE.MeshPhongMaterial({
    //       color: new THREE.Color('#b4babd'),
    //       // 设置发光强度
    //       // map: texture, // 纹理贴图
    //       //   emissive: 0x00ff00, // 设置发光颜色
    //       emissiveIntensity: 1,
    //     });
    //   }
    // });
    console.log(fbx,'模型');
    // fbx.children[21].material.emissiveIntensity = 1
    // fbx.material = fbx.children[21].material
    // console.log(fbx.children[21]);
    fbx.scale.set(1, 1, 1);
    //  fbx.rotation.set(180,20,0)
    fbx.position.set(0, 0, 0);
    scene.add(fbx);
  })
}
function createLight() {
  // 环境光
  const ambientLight = new THREE.AmbientLight(0xffffff, 1.5) // 创建环境光
  scene.add(ambientLight) // 将环境光添加到场景
  const spotLight = new THREE.SpotLight('#ffffff', 0.7) // 创建聚光灯
  spotLight.position.set(1600, 1660, 100)
  spotLight.castShadow = true
  scene.add(spotLight)
}
function createCamera() {

  camera.position.set(500, 400, -500)
  console.log(camera);
  camera.lookAt(scene.position)
  scene.add(camera)
}
function createRender() {
  renderer.setSize(window.innerWidth, window.innerHeight)
  renderer.shadowMap.enabled = true // 显示阴影
  renderer.shadowMap.type = THREE.PCFSoftShadowMap
  renderer.setClearColor('#ffffff') // 设置背景颜色
  document.querySelector('#three3D').appendChild(renderer.domElement)

  // document.querySelector('#three3D').appendChild(labelRenderer.domElement);

}
async function initIcon() {
  let pointList = [
    {
      name: "警报",
      point: {
        x: 40.91436767578125,
        y: 0.9466018676757812,
        z: 0
      },
    },
    {
      name: "馍馍加辣条",
      point: {
        x:15.29782094726788,
        y: 2.00017999999690800907,
        z: -75.36294510575863,
      },
    },
    {
      name: "xxx",
      point: {
        x: 50.91436767578125,
        y: 0.9466018676757812,
        z: 200
      },
    },
  ];
}

function animate() {
  controls.update()
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

</script>
<style scoped></style>
