vue3 + vite 中使用 three.js

cnpm install three --save
需要的页面 import * as THREE from “three” 引入即可开发，也可以按需引入

OrbitControls 报错 ReferenceError: THREE is not defined

引入 OrbitControls (相机轨道控制器) ： import OrbitControls from ‘three/examples/js/controls/OrbitControls’

抛出异常 ReferenceError: THREE is not defined ，最后在 这里 找到了解决方案

改成 ‘three/examples/jsm/controls/OrbitControls’ 引入即可

渲染 gltf 模型，场景空白 bug！

vue 内使用 GLTFLoader 渲染 gltf 模型的时候，在模型加入 scene 后，始终没有在场景内出现该模型。
相机的视野却通过计算函数 (根据模型大小设置相机的目标和最大距离) 设定地非常高，此时 gltf.scene 的数据打印出来也没有异常，控制台也没有出现任何报错，但模型就是没有渲染出来。

同样的代码放在单独的 html 里却能正常渲染，我开始找生命周期和 threejs 的指向是不是不正确，同时请了专业的 webgl 开发者来找 bug。一边查资料一边找，从中午找到下班，最后都没有发现代码层面的问题。

本以为 vue + vite + three 就此扑街，但因为今天是周五，明天不上班，我还有时间可以钻牛角尖。
吃完晚饭后在家拉取 git 代码继续找 bug，此时我已经知道不能优雅的解决问题了，所以我另外建了三个项目分别是：《vue2+webpack》《vue3+webpack》《vue3+vite》。

三个项目都是空的，都只引入了 threejs 的依赖。不过我往《vue3+vite》里粘贴了和当前项目一模一样的页面、依赖和配置。然后我把 threejs 的模型渲染页面放到了三个新建项目的 HelloWord.vue 下运行，结果新建的前两个项目可以正常渲染，第三个依然空白。

这时候我怀疑是 vite 的依赖配置导致的空白，所以选择在 《vue3+vite》里用二分法注释依赖和配置代码。当我在 main.js 中将 templates组件 全局注册的代码注释掉后运行程序，GLTFLoader 居然渲染出来了 ！我很开心，到现在已经 11 点了，能找到问题说明努力没有白费。

我又继续在 templates 组件文件夹里二分法删除文件，最终问题定位到一个名称为 tableBox 的组件上，这个组件封装了 表格的 搜索 、内容 、分页功能。我想难道是 tableBox 和 three 里某个构建API 重名导致的，于是我将 tableBox 更换成 tableFrame 运行程序，此时还是模型还是没有渲染出来。我又将 tableFrame 里的代码继续二分法注释，找到了问题根源所在 : Mock.js 。

原因是这个项目属于个人爱好开发，没有后端，所以请求表格数据我使用了 Axios 发送请求，Mock.js 拦截请求模拟数据。而 GLTFLoader 函数的源码里使用了原生的 ajax 请求，Mock 将请求拦截后返回的数据格式发生了变化导致 three 无法识别，从而渲染空白。

解决办法： 重写 Mock 的 send 方法，其实最主要的是修改 responseType，因为这 mock 源代码中， responseType 是直接为空的。

到这里就修复了，这可能是我从业以来找 bug 时长最久的一次。虽然耗时长，但解决一个不报错的 bug 还是非常有成就感，过程中接触使用了 troisjs 这个封装库还挺好。

解决 Mock 拦截问题是学习了 这位前辈的代码， 附重写的 send 方法：

	import Mock from 'mockjs'

	// 重写 send 是因为 mock 会拦截 threejs=>GLTFLoader 里的 ajax 请求
	Mock.XHR.prototype.send = (() => {
	   const _send = Mock.XHR.prototype.send
	
	   return function () {
	      if (!this.match) {
	         this.custom.xhr.responseType = this.responseType || ''
	
	         this.custom.xhr.timeout = this.timeout || 0
	
	         this.custom.xhr.withCredentials = this.withCredentials || false
	
	         this.custom.xhr.onabort = this.onabort || null
	
	         this.custom.xhr.onerror = this.onerror || null
	
	         this.custom.xhr.onload = this.onload || null
	
	         this.custom.xhr.onloadend = this.onloadend || null
	
	         this.custom.xhr.onloadstart = this.onloadstart || null
	
	         this.custom.xhr.onprogress = this.onprogress || null
	
	         this.custom.xhr.onreadystatechange = this.onreadystatechange || null
	
	         this.custom.xhr.ontimeout = this.ontimeout || null
	      }
	
	      return _send.apply(this, arguments)
	   }
	})()