代码之家 › 专栏 › 技术社区 › Yahku

从搅拌机到三台。js:BufferGeometry和Exporter的动画问题

buffer-geometry blender export three.js animation

1

Yahku · 技术社区 · 7 年前

我和三个人一起工作。有一段时间了,我真的很喜欢它,除了一件事:把动画图形从Blender的游戏场景。在自己尝试解决它并搜索了一段时间后,我在这里提出了我的问题。坦率地说,我只是一个程序员,不是一个图形专家,我也不是自己创造搅拌器的内容。

1.有什么特别需要知道的(或坏的?)导出缓冲区几何体。当前版本86中的js Blender exporter? 当使用BufferGeometry作为导出选项时,我的文件大小增加了3倍,但生成的.json文件中不包含动画。除了“Geometry”(几何体)而不是“BufferGeometry”(缓冲几何体)之外,使用相同的选项包括动画,并提供较小的文件大小(导出器选项和下面的示例文件)。

2.correct有什么问题。json没有在THREE.js中播放动画? 我有一个工作示例(Slimeblob),可以导出、加载和设置动画。使用相同的代码,我的大多数其他动画模型都已加载,但没有设置动画。例如,我有一个非常简单的立方体,有一个短动画,没有在三个动画中播放。但是在.json中(以及在运行时环境中)有动画数据。混合以下文件和代码。可以在控制台输出中看到动画以某种方式加载(至少在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)

三个。js修订版86(目前为最新版本)
三个。js Blender Exporter(修订版86)

AnimationTest.7z

1 回复 | 直到 7 年前

1

Falk Thiele 7 年前

分配 skinning: true 对于你的立方体材料,这为我解决了问题:

AnimationExport = new THREE.SkinnedMesh( geometry, new THREE.MeshLambertMaterial( { color: 0x436EEE, skinning: true } ) );