关于Three.js-加载含有动画的js模型
目标：3d max 动画模型 使用three.js在浏览器端展示
设计给了个max的动画模型，需要把这个模型用three.js加载到浏览器上
通过网上资料，发现three.js可以用blender转成的js格式加载
所以有了以下 流程：
1.使用3d max 将 银刀.max 转换成银刀.fbx文件
2.使用blender导入银刀.fbx文件 检查无误后用three.js文档中的转换插件将银刀.fbx转换成 yindao.js
3.使用three.js的jsonloader加载js文件
1.3d Max导出FBX
3d Max打开后直接导出成FBX文件
背包： 获得银刀.fbx文件
2.使用blender将fbx文件转换成js文件
第一步、导入转换插件
插件目录：
three.js-master\utils\exporters\blender\addons
将io_three文件夹(名字各个版本可能不同)
复制到Blender安装目录（以我的安装路径为例）
D:\Program Files\Blender\Foundation\Blender\2.79\scripts\addons
使用blender打开FBX文件
导出成js
参数如下：
注意：
Skeletal animation不能选 不然导出会报错，可能模型问题？
版本 ：blender：2.74 three.js R88
three转换插件：旧版 （新版js格式不一样） 具体区别移步 下载地址
背包： 获得银刀.js文件
3.使用Three.js加载js动画模型
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<title>three.js webgl - blender -json</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background:#777;
padding:0;
margin:0;
font-weight: bold;
overflow:hidden;
color: #ffffff;
</style>
</head>
<div id="container"></div>
<script src="three.js"></script>
<script type="text/javascript" src="OrbitControls.js"></script>
<script src="Detector.js"></script>
<script src="stats.min.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats, clock, mixer;
var camera, scene, renderer, active;
init();
animate();
function init() {
container = document.getElementById( 'container' );
//创建相机
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
//设置相机
camera.position.set( 0, 0, 8 );
camera.rotateY(30)
//创建控件
controls = new THREE.OrbitControls( camera );
controls.dampingFactor = 0.1;
controls.update();
//创建时钟
clock = new THREE.Clock();
//创建场景
scene = new THREE.Scene();
//创建坐标辅助线
var axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );
//创建动画混合器
mixer = new THREE.AnimationMixer( scene );
//创建JSONLoader
var loader = new THREE.JSONLoader();
loader.load( '132_1.js', function ( geometry, materials ) {
//允许变形动画
for(let i = 0;i<materials.length;i++){
materials[i].morphTargets = true;
//创建mesh
var mesh = new THREE.Mesh( geometry, materials );
//舍子mesh属性
mesh.rotateX(29.8);
mesh.position.set( 0, 0, 0 );
//添加到场景
scene.add( mesh );
//初始化clipAction
active = mixer.clipAction( geometry.animations[ 0 ], mesh )
//设置播放时间 5s
active.setDuration( 5 ) // one second
} );
// lights
//环境光
var ambientLight = new THREE.AmbientLight( 0xffffff );
scene.add( ambientLight );
//点光源
var pointLight = new THREE.PointLight( 0xffffff, 5, 30 );
pointLight.position.set( 5, 0, 10 );
scene.add( pointLight );
//点光源
var pointLight1 = new THREE.PointLight( 0xffffff, 5, 30 );
pointLight1.position.set( 5, 0, -10 );
scene.add( pointLight1 );
// 初始化渲染器
renderer = new THREE.WebGLRenderer();
//设置渲染器
renderer.setClearColor(0xffffff); //画布颜色
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
// 初始化状态台
stats = new Stats();
container.appendChild( stats.dom );
// 事件
window.addEventListener( 'resize', onWindowResize, false );
window.addEventListener("keydown",function(e){
if(e.code == "Space"){
active.clampWhenFinished = true;
active.play()
//窗口重置
function onWindowResize( event ) {
renderer.setSize( window.innerWidth, window.innerHeight );
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
// 动画
function animate() {
requestAnimationFrame( animate );
render();
controls.update();
stats.update();
function render() {
mixer.update( clock.getDelta() );
if(active.time >5.8){
active.paused = true
camera.lookAt( scene.position );