【发布时间】：2017-12-21 06:02:14
【问题描述】：
我使用 THREE.js 已经有一段时间了，我真的很喜欢它，除了一件事：将 Blender 中的动画图形引入游戏场景。在尝试自己解决并搜索了一段时间之后，我在这里提出了我的问题。坦率地说，我只是一名编码员，不是图形专家，而且我自己也没有创建搅拌机内容。
1.在当前版本 86 中使用 THREE.js Blender 导出器导出 BufferGeometry 是否有什么特别需要了解（或损坏？）？ 当使用 BufferGeometry 作为导出选项时，我的文件大小增加了 3 倍，但不包含动画在生成的 .json 文件中。使用除了“Geometry”而不是“BufferGeometry”之外的相同选项包含动画并提供更小的文件大小（导出器选项和示例文件如下）。
2。正确的可能是什么问题？ .json 没有在 THREE.js 中播放动画？ 我有一个可以导出、加载和动画的工作示例（Slimeblob）。使用相同的代码，我的大多数其他动画模型都已加载，但没有动画。例如，我有一个非常简单的立方体，它有一个短动画，它不在 THREE.js 中播放，而是在 .json 中（以及运行时环境中）有动画数据。 .blend 文件和代码如下。可以在控制台输出中看到动画以某种方式加载（至少在 chrome 浏览器中）。
示例演示：
<!doctype html>
<html lang="en">
<head>
<title>Animation Test</title>
<style> body { padding: 0; margin: 0; overflow: hidden; } </style>
</head>
<body>
<script src="three.js"></script>
<script src="OrbitControls.js"></script>
<script>
var gameScene, gameCamera, renderer;
var clock = new THREE.Clock();
var delta;
var controls;
var jsonLoader = new THREE.JSONLoader();
var SlimeblobGeometry, SlimeblobGeometryAnimationMixer;
var AnimationExport, AnimationExportAnimationMixer;
init();
function init() {
var windowHeight = window.innerHeight;
var windowWidth = window.innerWidth;
gameCamera = new THREE.PerspectiveCamera( 60, windowWidth / windowHeight, 1, 2100 );
gameCamera.position.set( 0, 11, 11 );
gameCamera.lookAt( new THREE.Vector3( 0, 0, 0 ) );
gameScene = new THREE.Scene();
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( windowWidth, windowHeight );
renderer.setClearColor( 0xB2DFEE );
document.body.appendChild( renderer.domElement );
var light = new THREE.HemisphereLight( 0xffffff, 0x003300, 1 );
light.position.set( -80, 500, 50 );
gameScene.add( light );
controls = new THREE.OrbitControls( gameCamera, renderer.domElement );
jsonLoader.load( "SlimeblobGeometry.json",
function ( geometry, materials ) {
for ( var k in materials ) {
materials[ k ].skinning = true;
}
SlimeblobGeometry = new THREE.SkinnedMesh( geometry, materials );
SlimeblobGeometry.position.x = 5;
gameScene.add( SlimeblobGeometry );
SlimeblobGeometryAnimationMixer = new THREE.AnimationMixer( SlimeblobGeometry );
SlimeblobGeometryAnimationMixer.clipAction( SlimeblobGeometry.geometry.animations[ 0 ] ).play();
}
);
jsonLoader.load( "AnimationExport.json",
function ( geometry ) {
AnimationExport = new THREE.SkinnedMesh( geometry, new THREE.MeshLambertMaterial( { color: 0x436EEE } ) );
AnimationExport.position.x = -5;
gameScene.add( AnimationExport );
AnimationExportAnimationMixer = new THREE.AnimationMixer( AnimationExport );
AnimationExportAnimationMixer.clipAction( AnimationExport.geometry.animations[ 0 ] ).play();
console.log( AnimationExport.geometry.animations[ 0 ] ); /* Chrome Browser may be necessary for meaningful output */
}
);
updateFrame();
}
function updateFrame() {
requestAnimationFrame( updateFrame );
delta = clock.getDelta();
if ( SlimeblobGeometryAnimationMixer ) {
SlimeblobGeometryAnimationMixer.update( delta );
}
if ( AnimationExportAnimationMixer ) {
AnimationExportAnimationMixer.update( delta );
}
controls.update();
renderer.render( gameScene, gameCamera );
}
</script>
</body>
</html>
代码运行没有错误，并且两个模型都已加载。粘液动画正确，立方体没有。我错过了什么？
The export settings (same for both)
环境详情：
- THREE.js 修订版 86（此时是最新版本）
- 修订版 86 中的 THREE.js Blender 导出器
- Blender 2.77 版
工作示例：上面的代码以及 .json 和 .blend 的代码（直接在本地工作，跨域策略块除外）：
现在离我很远，谢谢和最好的问候！
【问题讨论】：
标签： animation three.js export blender buffer-geometry