Vue3-TypeScript-Threejs：导入外部的glb格式3D模型

一、直接上代码，在vue3-typescript-threejs 项目导入外部的glb格式3D模型

极简代码，快速理解

<template><div ref="container"></div></template><script lang="ts" setup>import { onMounted, ref } from 'vue';import * as THREE from 'three';import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";const container:any = ref(null);// glb模型路径，需要放在public目录下const url = "../../../public/3d/chair.glb";onMounted(() => {const loader: any = new GLTFLoader();// 创建场景const scene: any = new THREE.Scene();// glb 模型文件路径loader.load(url,(gltf: any) => {// 成功加载模型后执行的操作const model = gltf.scene;// 将模型添加到场景中scene.add(model);},(xhr: any) => {// 模型加载过程中执行的操作console.log(`30${(xhr.loaded / xhr.total) * 100}% 已加载`);},(error: any) => {// 模型加载失败执行的操作console.error(`34模型加载失败：${error}`);});});</script>

二、直接上代码，在vue3-typescript-threejs 项目导入外部的glb格式3D模型，展示在页面上

<template><div></div></template><script lang="ts">import { defineComponent } from "vue";import * as THREE from "three";import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";export default defineComponent({mounted() {// 创建场景const scene = new THREE.Scene();const url = "../../../public/3d/chair.glb";// 创建相机const camera = new THREE.PerspectiveCamera(135,window.innerWidth / window.innerHeight,0.1,1000);// 添加环境光const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);scene.add(ambientLight);// 创建渲染器const renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 加载 glb 格式的 3D 模型const loader = new GLTFLoader();loader.load(url,(gltf) => {// 加载成功后的回调函数const model = gltf.scene;model.scale.set(0.8, 0.8, 0.8); // 缩小模型const box = new THREE.Box3().setFromObject(model);const center = box.getCenter(new THREE.Vector3());model.position.sub(center); // 将模型位置移到原点处scene.add(model);},(xhr) => {// 加载过程中的回调函数console.log((xhr.loaded / xhr.total) * 100 + "% loaded");},(error) => {// 加载失败的回调函数console.error("Failed to load model", error);});// 渲染场景const animate = () => {requestAnimationFrame(animate);renderer.render(scene, camera);};animate();},});</script><style>body {margin: 0;overflow: hidden;}</style>

blender软件展示效果

导入后展示效果，应该是没有导入材质、贴图，后续完善后更新本文

三、过程记录

记录一、vue3项目，3D模型需要放在public目录下，否则找不到文件404

确认.glb文件的路径是否正确。
如果你使用的是相对路径，确保相对路径与 Vue3 项目中public目录下的文件路径一致。

记录二、GLTFLoader导入模型和 three/examples/jsm/loaders/GLTFLoader 导入模型有什么区别

------AI回答一---------

GLTFLoader 是 Three.js 官方提供的加载 glTF 格式模型的模块，它已经集成在了 Three.js 中，可以直接使用。而 three/examples/jsm/loaders/GLTFLoader 是 Three.js 官方提供的一个案例，它是基于 GLTFLoader 开发的，同时也是 Three.js 的模块。

它们的主要区别在于：

1、GLTFLoader 是 Three.js 核心库的一部分，所以它的稳定性和兼容性更高。而 three/examples/jsm/loaders/GLTFLoader 是一个案例，可能更新不及时或者不被支持的情况较多。

2、GLTFLoader 是一个基础模块，只提供了最基本的 glTF 模型加载功能。而 three/examples/jsm/loaders/GLTFLoader 是在 GLTFLoader 基础上开发的，提供了一些更高级的功能，例如模型的动画、材质等。

总体来说，GLTFLoader 适合基础需求，而 three/examples/jsm/loaders/GLTFLoader 适合高级需求。但是，需要注意的是，如果使用 three/examples/jsm/loaders/GLTFLoader，需要将其引入到项目中，增加项目的体积。

--------AI回答二------

GLTFLoader导入模型和three/examples/jsm/loaders/GLTFLoader导入模型的区别如下：

作用不同。GLTFLoader主要是用来载入.gltf/.glb格式的3D模型文件，three/examples/jsm/loaders/GLTFLoader主要是用来载入.obj格式的3D模型文件。
使用方式不同。GLTFLoader的使用方式为：先新建一个GLTFLoader对象，然后调用该对象的load()方法，传入模型文件的路径，即可载入模型。three/examples/jsm/loaders/GLTFLoader的使用方式为：先新建一个GLTFLoader对象，然后传入一个配置对象进行初始化，再调用该对象的parse()方法，传入需要解析的obj模型数据，即可解析模型。