Three.js引入和加载3D 模型

小金的口袋

已于 2024-08-13 17:19:18 修改

阅读量1.4k

点赞数 4

分类专栏： vue Three.js 文章标签： javascript 3d 开发语言前端

于 2024-08-13 10:31:00 首次发布

本文链接：https://blog.csdn.net/Jimmmyking/article/details/141155165

版权

在Three.js开发中，我们通常会导入各种不同格式的3D模型（GLTF、FBX、OBJ…）本文以vue3项目为例引入和加载 GLTF格式模型

找到需要导入的GLTF模型，通常会有下面4个文件，将它们全部添加到自己的项目中（本文放到public文件夹中，这样的好处是在引入加载路径的时候只需要 ./xxx.gltf就行了）

在这里插入图片描述
模型引入之后就可以直接在项目中加载模型了，具体实现代码如下：

<template>
  	<div ref="webgl"></div>
</template>
<script setup>
	import { ref, onMounted } from 'vue'
	import * as THREE from 'three'
	import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
	import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

	const webgl = ref()

	// 本文为方便展示实现方式，全部写在onMounted中，可根据自己需求进行优化
	onMounted(() => {
	  // 创建场景
	  const scene = new THREE.Scene()
	  scene.background = new THREE.Colo