RMMV显示3D模型和场景的插件

walf_man

本插件开源托管在Github：https://github.com/aaixy/rmmv-plugins
欢迎来给个star，欢迎fork。
插件使用样例也已开源，如何使用欢迎跟帖回复：http://rpg.blue/thread-397764-1-1.html

注意：插件中附带的模型以及素材等一部分为three.js自带的，一部分为我从网上找来学习用的，请各位以学习插件使用为目的，并于下载后24小时内删除，切勿用作商业或者其它违法用途，否则后果自负。

1.04 2017.2.22
新增鼠标滚轮进行缩放控制，鼠标上下移动调节俯仰角度控制；
新增mesh支持；
开放命令中自定义背景颜色和背景透明度的参数；
新增状态监视器，可以显示 帧率/渲染一帧耗费的毫秒/占用的内存, 按键盘F2键进行切换；
修改当没有制定材质文件的时候，通过obj文件自动换算材质文件，这种情况需要你的obj文件和材质文件在同一个目录，如果不同，需要手动指定材质文件filename2；
这样做可以达到一个模型通过不同的材质文件生成无数人物或者物品的效果；
index.html也有改动，需要引入新的js文件，附件里已经提供，可供和之前的版本对比参考；

下载：
AXY_Three.zip (1.38 MB, 下载次数: 2268, 售价: 3 星屑)

2017-2-22 18:08 上传

点击文件名下载附件
售价: 3 星屑  [记录]

1.03 2017.2.20
修复安卓不支持webgl的话就崩溃的问题；

1.02 2017.2.19
新增 *.obj 格式的支持;
新增位置属性 x,y,z ;
修改之前的统一缩放改为分别控制 x,y,z;
index.html新增引入：

1. <script src="three/js/loaders/MTLLoader.js"></script>
   
2. <script src="three/js/loaders/OBJLoader.js"></script>

复制代码

附上测试脚本，大家可以很快在自己的游戏中看到3d陈列馆的效果：
tank：

1. AXY_Three.show([{type:'obj', filename:'obj/tank/tank1/tank1.obj', filename2:'obj/tank/tank1/tank1.mtl', rotation:[0,0,0], scale:[0.035,0.035,0.035]},{filename:'models/assimp/interior/interior.assimp.json'}]);

复制代码

jeep：

1. AXY_Three.show([{filename:'models/assimp/jeep/jeep.assimp.json', rotation:[0,0,0], scale:[0.3,0.3,0.3]},{filename:'models/assimp/interior/interior.assimp.json'}]);

复制代码

1.01 2017.2.18
新增 showcube，用来显示一个旋转的能量块;
修复了一些bug;
index.html新增引入：

1. <script src="three/js/geometries/hilbert3D.js"></script>

复制代码

1.00 2017.2.17
第一版达成并发布

上图：










请注意这是初版，功能非常简陋，但已经完全实现了加载3d模型并通过事件调用显示在mv中，光线功能不知怎么的在mv中就会失效了，还有待研究。
目前具备的功能是：
1.加载assimp模型，这是一种开源免费的3d格式，由json和贴图图片两部分组成，这点类似spine骨骼动画；可以通过开源免费的软件将几十种主流3d软件制作的模型转换成assimp。
2.3d最基本的缩放功能具备；
3.xyz三根轴的旋转功能具备；
4.场景透明度和颜色实现；
5.多个3d物品叠加显示在场景中实现；

说明
* 本插件使得 rmmv 能够显示大量格式的3d模型，超过了38种，例如 assimp/3mf/amf/md2/mmd/sea3d/vtk/等等。本插件基于 three.js.
* 但是本插件目前只支持 assimp 格式的3d模型。使用起来非常简单，效果也非常震撼。依赖AXY_Toast.js插件做一些提示信息的显示。
*
* 例子:
* 显示:
* AXY_Three.show([{filename:'models/assimp/jeep/jeep.assimp.json'}]);
* AXY_Three.show([{filename:'models/assimp/jeep/jeep.assimp.json', rotation:[0,10,0], scale:0.5},{filename:'models/assimp/interior/interior.assimp.json'}]);
* 带上所有的默认参数:
* AXY_Three.show([{filename:'models/assimp/jeep/jeep.assimp.json', rotation:[0,10,0], scale:0.5, opacity:0.5},{filename:'models/assimp/interior/interior.assimp.json'}]);
* 移除:
* 点击鼠标或者点击手机屏幕就可以了;
*
* 更新日志
* 1.00 2017.2.17
* 第一版达成并发布.

使用说明：
1.在你的index.html文件里要引入这几个库

JAVASCRIPT 代码复制

<script src="three/build/three.js"></script>
                <script src="three/js/loaders/AssimpJSONLoader.js"></script>
                <script src="three/js/Detector.js"></script>

<script src="three/build/three.js"></script>


                <script src="three/js/loaders/AssimpJSONLoader.js"></script>


                <script src="three/js/Detector.js"></script>

2.将插件包解压到你的工程目录；
3.插件管理器里添加AXY_Three和AXY_Toast两个插件，或者还有其它必须要的插件；
4.建立一个事件，并在脚本指令里输入

JAVASCRIPT 代码复制

AXY_Three.show([{filename:'models/assimp/jeep/jeep.assimp.json', rotation:[0,0,0], scale:0.5},{filename:'models/assimp/interior/interior.assimp.json'}]);

AXY_Three.show([{filename:'models/assimp/jeep/jeep.assimp.json', rotation:[0,0,0], scale:0.5},{filename:'models/assimp/interior/interior.assimp.json'}]);

5.触发这个事件看看效果；
6.鼠标点击屏幕，3d场景消失；