(三) 记录H5做AR的过程,Three.js如何使用外部的模型文件

solanel

于 2019-09-16 18:09:45 发布

阅读量1.4k

点赞数

分类专栏： 3D Three.js AR

本文链接：https://blog.youkuaiyun.com/solanel/article/details/100896493

版权

这篇博客介绍了在H5中进行AR开发时，如何利用Three.js加载和使用.obj + .mtl模型文件。虽然这种格式不支持动画，但因其常见，成为了解决AR场景中静态模型的一种选择。文章建议，对于需要动画的场景，可以考虑使用glTF格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模型格式

首先我们需要了解模型文件的常用格式，Three.js 引擎支持的格式非常的多，我们最为常见的格式有 .obj + .mtl ，但使用这种模型格式存在一个问题，.obj 是静态模型，不支持动画数据存储，无法使用模型的动画，官方建议使用 glTF 这种模型格式 , 但是glTF目前应用比较少,有条件的朋友可以使用Blender导出glTF2文件,这次我们先了解如何使用相对常用的.obj + .mtl的形式

代码如下

<template>
    <div>
      <div id="container"></div>
    </div>
</template>

<script>
import * as Three from 'three' //导入three.js
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js' //导入OBJLoader 读取obj模型
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js' //导入MTLLoader 读取mtl材质
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js' //使用OrbitControls控制模型的旋转,放大,缩小
export default {
  name: 'Demo',
  data () {
    return {
      camera: null,
      scene: null,
      renderer: null,
      light: null,
      controls: null
    }

最低0.47元/天解锁文章