Vue集成three.js，加载glb、gltf类型的3d模型

唐生洗发用飘柔

已于 2024-04-24 10:27:11 修改

阅读量1.8k

点赞数 17

CC 4.0 BY-SA版权

分类专栏： vue glb gltf 文章标签： vue 3d 前端

于 2024-04-24 10:26:44 首次发布

本文链接：https://blog.csdn.net/lys1925/article/details/138149542

安装基本依赖

// 注意OrbitControls要加{}，注意路径是jsm
import { OrbitControls } from ‘three/examples/jsm/controls/OrbitControls.js’;
// import { dat } from ‘three/examples/jsm/controls/dat.gui.js’;
// dat gui这个插件，是另外自己下载的，threejs的安装包里没有这个
// dat gui组件能够方便地改变某些值，并快速预览这些值的改变所产生的变化
import { GLTFLoader } from ‘three/examples/jsm/loaders/GLTFLoader.js’;

创建一个模版容器

<template>
  <div>
    <!-- 本案例演示导入模型 -->
    <div id="container" />
  </div>

</template>

初始化相机、场景

init() {
const container = document.getElementById(‘container’);
this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 特别注意，相机的位置要大于几何体的尺寸
this.camera.position.z = -10;
this.scene = new THREE.Scene();
this.renderer = n