<template>
  <div id="my-three"></div>
</template>
​
<script lang="ts" setup>
  import * as THREE from 'three';
  import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
  import { onMounted } from 'vue';

  //创建一个三维场景
  const scene = new THREE.Scene();
  // 设置一个天空盒背景图
  const geometry = new THREE.SphereGeometry(300, 50, 50);
  const texture = new THREE.TextureLoader().load('./天空盒全景图.png');
  const material = new THREE.MeshBasicMaterial({
    map: texture,
    side: THREE.BackSide, //默认前面可见，设置为背面可见即可
  });
  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  //创建一个透视相机，窗口宽度，窗口高度
  const width = window.innerWidth,
    height = window.innerHeight;
  const camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
  //设置相机位置
  camera.position.set(300, 300, 300);
  //设置相机方向
  camera.lookAt(0, 0, 0);

  //创建辅助坐标轴
  const axesHelper = new THREE.AxesHelper(200); //参数200标示坐标系大小，可以根据场景大小去设置
  scene.add(axesHelper);

  //创建一个WebGL渲染器
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(width, height); //设置渲染区尺寸
  renderer.render(scene, camera); //执行渲染操作、指定场景、相机作为参数

  const controls = new OrbitControls(camera, renderer.domElement); //创建控件对象
  controls.addEventListener('change', () => {
    renderer.render(scene, camera); //监听鼠标，键盘事件
  });
  onMounted(() => {
    document.getElementById('my-three')?.appendChild(renderer.domElement);
  });
</script>
​
<style lang="less" scoped>
  body {
    margin: 0;
    padding: 0;
  }
</style>
