Three.js入门学习笔记18：如何用blender导出json文件_月亮计划的博客

方法1：把js放入网页中

参考教程
https://blog.csdn.net/cj9551/article/details/80307426
https://www.jianshu.com/p/f7b45d9b957b

Webgl项目中，如果涉及到较大的模型（obj，fbx，json等），几十兆，几百兆大小时，加载时间也会让人不爽，而JSON格式的模型可以有效减少模型大小，加快加载速度。

第一种方法 threejs脚本

Threejs官网中有插件，支持obj和fbx格式的模型转成Json格式，插件的github地址是https://github.com/mrdoob/three.js/tree/dev/utils/converters，你需要threemaster.zip下载到电脑，从解压中去找工具，zip的下载地址

https://codeload.github.com/mrdoob/three.js/zip/master

使用方法：

1、安装node环境此处不再陈述教程链接https://www.runoob.com/nodejs/nodejs-install-setup.html

2、把你需要转格式的obj或fbx文件放到three.js-master\utils\converters下，按着shift单机鼠标右键，选择在此处打开命令窗口，在出现的命令窗口中输入：obj格式转换：node obj2three.js objname(你的obj文件的名字).obj ，fbx：node fbx2three.js fbxname(你的fbx文件的名字).fbx 回车在当前目录生成相应的Json 文件

fbx模型不可以带贴图，带贴图转的话会报错，Blob is not defined 此方法出现的错误目前我还未解决

第二种方法：Blender导出

Blender下载地址： https://www.blender.org/download/ 按需下载即可

导出插件下载： https://pan.baidu.com/s/1k9KAo9pRfV-aAeasDl9I7A
提取码：niri

其中io_three是json导出插件，有gltf的是导出gltf格式的插件

插件安装教程：

1、安装插件

加下载的插件解压，将io_scene_gltf2，io_three两个文件夹，将它们放到你的blender安装目录下，Blender\2.79\scripts\addons

2 、加载插件

参考教程
https://www.jianshu.com/p/f7b45d9b957b

启动 Blender , File -> User Preferences -> Add-ons -> 查询 Three, 勾选 Import-Export: Three.js Format
现在在编辑-偏好设置里

在这里插入图片描述
Save User Settings(保存).

gltf插件加载
在这里插入图片描述

点击保存后即可进行导出，你可以用3dmax新建一个cube，自己加上贴图，然后带贴图导出最基本的3ds格式，然后在blender中导入这个3ds文件，然后点文件–导出–threejs-json即可进行导出

好了模型导出完了，接下来我们加载就行啦：

var objectLoader = new THREE.ObjectLoader();
    objectLoader.load("../model/eee.json", function ( obj ) {
        console.log(obj);
        scope.obj=obj;
        obj.scale.set(3,3,3);
        scene.add( obj );
    } );
                                    Blender to Three.js导出指南
 :clipboard: 这是一份有生命的文件。 该主题的领域在不断变化，因此本文档将需要随之发展。 如果有人要添加/编辑/删除任何内容，请创建请求请求或开始讨论问题。
最好导出到glTF
 glTF是网络上3D模型的开放标准。 这是three.js文档中建议的格式。 用于其他格式（例如OBJ，FBX）的三个加载程序维护得不好，很可能其中许多加载程序最终会变得非常有故障或完全损坏。 本指南仅说明如何导出到glTF。
使用glTF查看器进行测试
导出后，最好使用Dom McCurdy的进行测试。 这是一种快速简便的方法来检查模型，而无需担心自己的代码是否损坏。 如果您在使用glTF查看器时遇到问题，也值得在巴比伦沙进行测试。 一个已知的问题是。
哪个Blender版本？
 为了获得最佳结果，请使用最新版本的Blender（撰写本文时为2.92）。 在Blender
导出Three.js的ASCII JSON格式。
导出器（r69及更早版本）已被完全替换。 在安装当前插件（io_three）之前，请确保已从Blender插件目录中删除了io_three_mesh插件。
推荐的Blender版本> = 2.73.0
 将io_three文件夹复制到scripts / addons文件夹。 如果不存在，请创建它。 完整路径取决于操作系统（请参阅下文）。
 完成后，您需要激活插件。 打开Blender首选项，查找Addons，搜索three ，启用Import-Export: Three.js Format条目旁边的复选框。
 转到用法。
应该看起来像这样：
 C:\Program Files\Blender Foundation\Blender\2.7X\scripts\addons
或（适用于2.
放入Blender目录2.79（版本）script的addons文件夹内
然后打开Blender，在文件 用户设置面板（Ctrl+Alt+U）插件，左侧的导入导出内找到 Import-Export Three.js Format 勾选即可
导出选项就会有json格式了，导出时最好将SCENE里场景，材质，灯光，摄像机一并勾选导出
                                    1. 软件版本:    ThreeJS 版本: 0.92.0    Blender 版本: 2.792. Blender 安装 ThreeJS 导出插件.    1). 安装插件             拷贝导出插件( three.js-master\three.js-master\utils\exporters\blender\addons\io_three ) 到        Blender...
                                    接到了一个需求，一个物联网的电力保障系统实时监控。实施用到了Web 3D技术，以前用过一段时间的Three.js，因为太耗资源，没怎么铺开，现在硬件条件好了，就拿出来试试。
环境：blender-2.93.6-windows-x64+Three.js0.91.0+Echart2.0
我习惯不用最新版本的软件做开发，一方面新版的稳定性不如旧版，主要是基于js的前端开发，新版大部分对IE都不友好，国内的需求现状就是，问就是随便，验收就拿IE说是，所以多一事不如少一事，就用旧的成熟版本对付了。
                                    3D建模有助于3D设计人员和开发人员之间的协作。设计人员可以利用其最喜欢的工具来构建场景或网格（3D Studio Max、Maya、Blender等……）。然后，他将作品导出为开发者可以加载的文件格式。开发者将最终将网格加载进实时3D引擎中。有很多种格式可以这么做。在我们的例子中，将使用Json格式。实际上，David Catuhe已经做了从Blender中导出.babylon后缀的Json格式文件导出器了。我们马上就可以看到如何解析该文件并显示在我们可爱的软件渲染引擎中了！
                                    用blender做模型可以直接导出json文件（导出插件可以从three.js包里找到）。从网上下载模型，网上的模型很多事3ds max做的，我就用3ds max把模型格式转换成obj，再导入blender处理好模型后导出json文件。
导出json文件时选项勾选如果选择了SCENE可连灯光一同导出加载时需要用ObjectLoader
                var loader = 
                                    使用Blender导出的JSON模型创建动画1.demo效果2. 实现要点2.1 加载模型文件2.2 创建蒙皮与动画2.3 render中更新动画3. demo代码
1.demo效果
2. 实现要点
2.1 加载模型文件
与之前一样这里要用到JSONLoader加载器，需要在 public目录下的index.html 文件中引入旧版three.js
<script type="text/javascript" src="./libs/three.js"></script>