vue3+three.js加载glb模型

<template><div><!-- 亮度调节滑块 --><div class="controls"><label for="brightness">背景光亮度：</label><inputtype="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>