Three.js 效果图

<template>
  <div id="container"></div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
//创建场景
//场景能够让你在什么地方，摆放什么东西来交给three.js来渲染，这是你放置物体、灯光和摄像机的地方
const scene = new THREE.Scene();
//添加雾
scene.fog = new THREE.Fog(0xcccccc, 10, 15);
//创建相机
const camera = new THREE.PerspectiveCamera();
camera.position.y = 2;
camera.position.z = 10;
//创建立体纹理 左右上下前后
const cubeTexture = new THREE.CubeTextureLoader()
  .setPath("/textures/")
  .load(["04.jpg", "01.jpg", "05.jpg", "02.jpg", "06.jpg", "03.jpg"]);
  // 添加背景纹理
scene.background = cubeTexture
// 创建一个球体 const sphere = new THREE.SphereGeometry(1)
const material = new THREE.MeshBasicMaterial({ 
  //镜面反射效果，环境贴图
  envMap: cubeTexture
});
//网格
const cube = new THREE.Mesh(sphere, material);
cube.position.set(0, 3, 0);
scene.add(cube);
//添加网格地面
const gridHelper = new THREE.GridHelper(10, 10);
scene.add(gridHelper);
onMounted(() => {
  //创建渲染器
  const renderer = new THREE.WebGLRenderer();
  //调整渲染器窗口大小
  renderer.setSize(window.innerWidth, window.innerHeight);
  //将渲染器添加到页面  document.getElementById("container").appendChild(renderer.domElement);
  //添加轨道控制器
  const controls = new OrbitControls(camera, renderer.domElement);
  //对轨道控制器改变时侯进行监听
  controls.addEventListener("change", function () {
    console.log("触发");
  });
  //添加阻尼
  controls.enableDamping = true;
  controls.dampingFactor = 0.01;
  //自动旋转
  controls.autoRotate = true;
  controls.autoRotateSpeed = 0.5;
  //添加坐标轴
  const axesHelper = new THREE.AxesHelper(5);
  axesHelper.position.y = 3;
  scene.add(axesHelper);

  //让立方体动起来
  function animate() {
    requestAnimationFrame(animate);
    console.log(cube);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    // 轨道控制器更新
    controls.update();
    //进行渲染
    renderer.render(scene, camera);
  }
  animate();
});
</script>
<style >
</style>