vue3+three.js加载glb模型

<template>
  <div>
    <!-- 亮度调节滑块 -->
    <div class="controls">
      <label for="brightness">背景光亮度：</label>
      <input
          type="range"
          id="brightness"
          v-model="brightness"
          min="0"
          max="2"
          step="0.1"
      />
      <span>{{ brightness }}</span>
    </div>
  <div ref="container" className="three-container"></div>
  </div>
</template>

<script setup>
import {ref, onMounted, onBeforeUnmount, watch} from 'vue';
import * as THREE from 'three';
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';

// 定义容器引用
const container = ref(null);

// 定义 Three.js 相关变量
let scene, camera, renderer, controls, model;

// 定义环境光
let ambientLight;

// 定义亮度变量
const brightness = ref(1); // 初始亮度为 1

// 初始化 Three.js 场景
const initThree = () => {
  // 创建场景
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0xffc0cb); // 淡粉色
  // 创建相机
  camera = new THREE.PerspectiveCamera(
      75,
      container.value.clientWidth / container.value.clientHeight,
      0.1,
      1000
  );
  camera.position.set(5, 5, 5);

  // 创建渲染器
  renderer = new THREE.WebGLRenderer({antialias: true});
  renderer.setSize(container.value.clientWidth, container.value.clientHeight);
  container.value.appendChild(renderer.domElement);

  // 添加轨道控制器
  controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;

  // 添加环境光
  const ambientLight = new THREE.AmbientLight(0xffffff, brightness.value);
  scene.add(ambientLight);

  renderer.toneMapping = THREE.ACESFilmicToneMapping; // 设置色调映射
  renderer.toneMappingExposure = 1.5; // 增加曝光值

  // 添加平行光
  const directionalLight = new THREE.DirectionalLight(0xffffff, 2);
  directionalLight.position.set(1, 1, 1).normalize();
  scene.add(directionalLight);
};

// 加载 GLB 模型
const loadModel = () => {
  const loader = new GLTFLoader();
  loader.load(
      '/api/demo.glb', // 替换为你的 GLB 文件路径
      (gltf) => {
        model = gltf.scene;
        scene.add(model);
      },
      undefined,
      (error) => {
        console.error('An error happened while loading the model:', error);
      }
  );
};

// 动画循环
const animate = () => {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
};

// 监听亮度变化
watch(brightness, (newBrightness) => {
  if (ambientLight) {
    ambientLight.intensity = newBrightness;
  }
});

// 组件挂载时初始化
onMounted(() => {
  initThree();
  loadModel();
  animate();
});

// 组件卸载时清理资源
onBeforeUnmount(() => {
  if (renderer) {
    renderer.dispose();
  }
});
</script>

<style scoped>
.three-container {
  width: 100%;
  height: 100vh;
}
</style>