VR 效果前端使用 three.js 加载 Obj，drc文件（三维模型文件）

本文介绍如何使用Three.js加载并渲染.obj三维模型文件，同时利用Draco插件进行模型压缩，显著减少加载时间。通过实例演示了从模型加载到压缩的全过程，包括必要的JS资源引入和代码实现。

VR 效果前端使用 three.js 加载 Obj（三维模型文件）

前言：我对 three.js 并不熟！只是朋友有这个需求，写了几个 demo 运行，能看~。如果想深入学习，还需要多看看官方文档，这里只做个记录，学习难度：仅供入门学习

下面的 demo 其实都是网上大神的代码，我只是收集，拼凑显示了出来 ~代码我已经全部放在码云了。想要源文件的可以到码云下载 ~ demoVR-three-demo 。文件夹里面准备了有 3 个模型，都可以自己改着路径玩玩~

在线预览地址

obj 文件类型

drc 文件类型

文章目录

- VR 效果前端使用 three.js 加载 Obj（三维模型文件）

three.js 显示 obj 文件

引入需要的 JS 资源。都是 three 的文件

<script src="js/three.min.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/OBJLoader.js"></script>
<script src="js/MTLLoader.js"></script>
<script src="js/jQuery-2.1.4.min.js"></script>

然后下面这段 JS。就是初始化一些插件(three)
MTLLoader 这个是用来渲染 3D 模型的材质的，就像 demo1 中的车模型，如果不用材质的话，整台车都是白色的
OBJLoader 这个就是主角了。用于渲染.obj 文件的
Scene,PerspectiveCamera,AmbientLight,WebGLRenderer 这些把，原谅我也只是个入门新手，不懂，哈哈哈哈 😃 不过大概的意思就是说创建光源，创建视角的角度，感兴趣的可以看下文档~
loadModel 这个方法就是开始渲染的了，前面的代码都相当于在搭建环境，在这个方法里面先加载了模型的皮肤（材质太难听了，就称之为皮肤把）。然后在加载 obj 文件，把皮肤附在 obj(原型上) 注意这里是 2 个文件一个是 humvee.obj原型文件，另一个是 humvee.mtl(皮肤)
这段代码是没有 html 标签的，因为用的 canvas 渲染，canvas 都是用 document.body…动态插入的可以看下代码库中的 demo-1-objfile文件就懂了

<script>
  var mtlLoader = new THREE.MTLLoader()
  var objLoader = new THREE.OBJLoader()

  var scene = new THREE.Scene()
  var camera = new THREE.PerspectiveCamera