<template>
  <div class="div3D" ref="div3D"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
//导入threejs
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';

const div3D = ref<HTMLDivElement>();
//场景
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
//相机
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(5, 5, 85);
camera.lookAt(scene.position);
scene.add(camera);
//渲染器
const render = new THREE.WebGLRenderer({ antialias: true }); // 启用抗锯齿
render.setSize(window.innerWidth, window.innerHeight);
//添加控制器
const controls = new OrbitControls(camera, render.domElement);

const loader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
loader.setDRACOLoader(dracoLoader);
loader.load('/models/smokeSiren/smokeSiren.glb', (gltf) => {
  gltf.scene.scale.set(1, 1, 1);
  scene.add(gltf.scene);
});

//环境贴图
// F:\vue\workspace\maotu-webtopo\public\models\texture\Alex_Hart-Nature_Lab_Bones_2k.hdr
const rgbELoader = new RGBELoader().load(
  '/public/models/texture/Alex_Hart-Nature_Lab_Bones_2k.hdr',
  (envMap) => {
    envMap.mapping = THREE.EquirectangularReflectionMapping;
    scene.environment = envMap;
  }
);

//物体
const axes = new THREE.AxesHelper(20);
scene.add(axes);

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

onMounted(() => {
  init();
  div3D.value?.appendChild(render.domElement);
});

//监听窗口变化
// window.addEventListener('resize', () => {})
</script>

<style scoped>
.div3D {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
</style>
