【three.js学习笔记（1）】读取blender模型并导入动画

之前尝试过使用vtk.js在浏览器上绘制三维图形。其与VTK C++版接口类似，上手较快，但vtk.js相对更新较慢，接口功能不完善。three.js相对更为主流，文档较为丰富，也有许多示例程序。

blender是siggraph力推的一款开源、免费3D建模软件，借助社区内丰富的插件可以方便地实现许多功能。

1、读取静态模型

1.1 使用fbx格式导出blender模型

将导出到.blender文件的同级目录。

除了上面的几种导出格式外，还可导出为js或json格式。为保持纯粹性，目前three.js的github项目中已删去支持blender导出js文件或json文件的io插件，可以git到较老的版本，或使用我保存的io工具。复制到blender的addons文件夹下相应位置即可导出相应格式的文件。

1.2 three.js载入fbx文件

// 声明变量
let scene, camera, renderer, HEIGHT, WIDTH;
 
// 创建场景
function createScene() {
  HEIGHT = window.innerHeight;
  WIDTH = window.innerWidth;
  const fieldOfView = 60;
  const aspectRatio = WIDTH / HEIGHT;
  const nearPlane = 1;
  const farPlane = 10000;
  // 相机
  camera = new THREE.PerspectiveCamera(
    fieldOfView,
    aspectRatio,
    nearPlane,
    farPlane
  );
  camera.position.x = 0;
  camera.position.y = 0;
  camera.position.z = 1000;
  // 场景
  scene = new THREE.Scene();
  // 渲染
  renderer = new THREE.WebGLRenderer({alpha: true, antialias: true});
  renderer.se