VUE项目中使用THREE.js加载obj模型

最新推荐文章于 2025-05-27 18:58:07 发布

原创

最新推荐文章于 2025-05-27 18:58:07 发布 · 置顶 · 2.3w 阅读

35 ·

CC 4.0 BY-SA版权

文章标签：

#vue #three #obj模型 #vue加载模型 #3D模型

想要在vue项目中使用threejs加载如obj、vtk等格式的模型，与threejs官网略相似，却有部分不同。以下概括几个不同点：

js文件引入方式不同。vue中使用npm下载js文件，例如npm install three three-orbitcontrols three-obj-mtl-loader stats-js ,注意：obj加载器使用three-obj-mtl-loader而不是three-obj-loader，stats-js显示帧率，根据需要下载使用。
构造函数使用方法不同。官网使用new THREE.OBJLoader()创建构造器，在vue中不需要THREE，即new OBJLoader()。控制器OrbitControls和帧率Stats也是一样。
在vue中obj模型文件必须要放在静态资源(static)文件下，否则显示出错。

以下详细记录加载一个obj模型的步骤：

加载需要的js文件

import * as THREE from 'three'
import OrbitControls from 'three-orbitcontrols'
import {OBJLoader} from 'three-obj-mtl-loader'
import Stats from 'stats-js'

创建一个相机：var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
渲染场景：var renderer = new THREE.WebGLRenderer();
创建一个场景：