使用Blender导出ThreeJS的JSON模型

1. 软件版本:

    ThreeJS 版本: 0.92.0

    Blender 版本: 2.79

2. Blender 安装 ThreeJS 导出插件.

    1). 安装插件 

            拷贝导出插件( three.js-master\three.js-master\utils\exporters\blender\addons\io_three ) 到

        Blender 相应的目录 ( Blender\2.79\scripts\addons ) .

    

    2). 装载插件

            启动 Blender , File -> User Preferences -> Add-ons -> 查询 Three, 勾选 Import-Export: Three.js Format

            Save User Settings(保存).

3. 给模型添加关键帧.

    1. 添加模型.

        编辑器左下角 Add -> Mesh -> (随便添加一个模型, 或者使用打开 Blender 时, 默认添加的模型)

    2. 设置创建关键帧.

        选中模型, 选择属性(编辑器右边方块状按钮), Transform -> Location -> 右键 -> Insert KeyFrames

    3. 拖动动画里面的帧频条.

    4. 移动模型.

    5. 添加结束关键帧.

        选择属性(编辑器右边方块状按钮), Transform -> Location -> 右键 -> Insert KeyFrames

    6. 添加完毕(以上为最简单的关键帧动画). 可以对该模型进行导出. 

4. 导出 ThreeJS JSON 文件.

    1). 选择导出, File -> Export -> Three.js(.json) 

    2). 选择导出设置进行导出.

导出设置配置详情:

    导出普通模型:

        默认设置直接导出.

    导出带有关键帧动画的模型:

        SCENE

            勾选 Scene,  勾选 Materials

        ANIMATION

            勾选 Keyframe animation

        其他保持默认.

    导出带有骨骼动画的模型:

        还在研究中......

Threejs 中使用 JavaScript 执行动画.

var loader = new THREE.ObjectLoader();
loader.load( modelPath, function( model ) {
	scene.add( model );
	mixer = new THREE.AnimationMixer( model );
	mixer.clipAction( model.animations[ 0 ] ).play();
}, onProgress, onError );