如果您是第一次阅读我们关于微信小游戏开发的笔记，那么您可能需要先通过之前的笔记快速了解一下：

今天我们会继续基于 three.js 来做尝试。因为在各个群中，大家都在试图载入模型，不少人遇到了这样那样的问题，所以今天给大家介绍一种成功载入模型的方法。（方法很多，这里只介绍我们采用的方法）

我们今天使用的模型是通过 导出的。之所以使用 Blender，是因为它是 免费 且功能完善的 3D 软件，我们可以大大方方拿来使用。而正由于它是免费的，所以关于它的使用和开发技巧网络上随手可得，社区也非常活跃，很适合自学。

1. 最新版本的 （文中采用了 v2.79 Mac）；
2. 最新版本的 （文中采用了 90dev）；

要从 Blender 输出符合 three.js 标准的模型，我们需要为 Blender 添加一个专用的输出插件。如果您在学习和使用 three.js ，那么这个插件您应该已经有了，它就在 three.js 的源码包中，位置如下：

而 Mac 下一般在这里：

如果没有 scripts/addons 目录也不要方，可以自行创建。

然后该目录看起来大概是这样：

准备完毕以后，就可以打开 Blender 了。我们需要进入 Blender 的用户设置面板，在“插件”中搜索“three”，找到后选定它，允许使用它作为输出选项：

然后记得保存用户设置，这样以后就可以一直使用。好，现在我们就可以打开自己的模型文件并输出了。

选择输出我们所希望的格式

输出的选项还是蛮多，我们选用了如下的设置供参考，您也可以自己尝试调整。

保存输出的 json 文件，然后 将其上传到自己的服务器 ，接下来就可以在微信小游戏中使用。

在微信小游戏中载入模型

接下来建立我们的微信小游戏项目，如果您不是很熟悉要做哪些准备工作，可以参考前文：《 》。不过我们这次使用的

接下来我们就尝试着用 three.js 自己的 JSONLoader 来载入。其实有了模型的 json 文件以后，载入方式就可以很多样了，比如可以 require 进去包了壳的 js 文件，或者直接使用 wx.request 加载远程文件等等，但是我们认为原生方式还是比较好的，至少有以下几个优点：

1. 保持原始格式，便于后续修改模型；
2. 最大限度保证代码兼容性，便于移植；
3. 由于微信小程序／小游戏包体限制，将素材放到服务器上再载入进来比较合理。

于是，我们的载入代码如下（非完整代码，仅为代码示例）：

可能会遇到如下的错误：

再跑一次，应该就可以正常载入了，开发环境和真机均无问题。

至此，模型载入就实现了。

本来是准备就此先罢手了，不过看到群中有人在尝试使用 OrbitControls 来实现简单交互，就顺便也试验了一下。 OrbitControls 是 three.js 提供的一个非常便于使用的让摄像机围绕目标对象旋转的交互功能，最简化的时候一行代码就可以搞定了，于是就将其加入到项目文件中。

临时处理方法只要在 OrbitControls.js 第一行粗暴的添加这行代码引入即可：

注： 因为我没有对 three.js 做任何修改，所以直接引入了 minified 版本，如果您没有使用该版本，去掉 .min 即可。

然后代码中加入这一行就可以用了：

至此没有出现什么问题，但是当想要交互的时候，一有动作就会发现屏幕被清空了。直觉告诉我是摄像机的座标或者旋转角度计算错了，经过跟踪，果然如此，在触摸屏幕并移动的时候，以下代码会出现问题：

element.clientWidth 不存在，因此得到的值会是 NaN ，造成摄像机无法定位。我临时进行了如下修改：

这只是临时的修改 ，后面有时间会尝试合理一些的解决方案。

不过呢，经过这样的修改以后，已经可以正常的通过手指对摄像机进行旋转，也可以用双指进行缩放了。

好了，今天的内容就到这里了。这并不是一篇教程，只是在目前信息和资料不完善情况下的一种尝试，也希望大家一起参与到开发和研究中来，互相交流。

也欢迎加入我们的微信讨论群，目前已经超过 100 人，无法提供二维码了，可以找 indienova 的工作人员或者其它开发者邀请加入，也可以到小组去找人邀请。

为了方便大家参考，特提供完整源代码。

目前，Cocos、Egret、Laya 已经完成了自身引擎及其工具对小游戏的适配和支持，访问对应的官方文档可以更快地接入小游戏的开发

互联网ICP备案：京ICP备号-1

广播电视节目制作经营许可证：（京）字第08319号 网络文化经营许可证：

电信与信息服务业务经营许可证：京ICP证140448号

营业性演出许可证：京演(机构)(号

计算机信息网络国际联网单位备案：

友际无限（北京）科技有限公司

违法和不良信息举报***：0 邮箱：kefu@ 糗事百科版权所有