Three.js Mesh没有使用AnimationHandler进行动画处理

Question

I haven't been able to get my blender exported mesh to animate. 我无法将我的搅拌机导出的网格设置为动画。 Not even the included buffalo one that I can clearly see animated in the example. 甚至不包括我在该示例中可以清楚地看到动画的水牛。 (which I've been trying to reproduce to no avail. Here's the code, I suspect it's a really simple missing thing, but I have no idea. I doubt it's a blender issue since I haven't even been able to animate the included meshes. （我一直试图重现无济于事。这是代码，我怀疑它是一个非常简单的缺失的东西，但我不知道。我怀疑这是一个混合问题，因为我甚至没有能够动画包括网格。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js webgl - blender</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 {
            font-family: Monospace;
            background-color: #000000;
            margin: 0px;
            overflow: hidden;
        }

        #info {
            color: #fff;
            position: absolute;
            top: 10px;
            width: 100%;
            text-align: center;
            z-index: 100;
            display:block;

        }

        a { color: red }

        #stats { position: absolute; top:0; left: 0 }
        #stats #fps { background: transparent !important }
        #stats #fps #fpsText { color: #aaa !important }
        #stats #fps #fpsGraph { display: none }
    </style>
</head>

<body>
    <div id="info">
        <a href="http://crenet-games.com">025 Valgany</a>
    </div>

    <script src="/js/three.min.js"></script>
    <script src="/js/Detector.js"></script>
    <script src="/js/libs/stats.min.js"></script>

    <script>
        if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
        var modelBB={"min":new THREE.Vector3(),"max":new THREE.Vector3() };
        var crewon, animation;
        var container, stats;
        var camera, scene, renderer, objects;
        var particleLight, pointLight;
        var skin;
        var clock = new THREE.Clock();
        init();
        function init() {
            container = document.createElement( 'div' );
            document.body.appendChild( container );
            camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10000 );
            camera.position.set( 2, 4, 5 );
            scene = new THREE.Scene();
            scene.fog = new THREE.FogExp2( 0x00FF00, 0.035 );
            var loader = new THREE.JSONLoader(true);
            loader.load("buffalo.js", function(geometry, materials) {
                geometry.computeBoundingBox();
                var faceMaterial = new THREE.MeshFaceMaterial( materials );
                faceMaterial.skinning = true;
                THREE.AnimationHandler.add( geometry.animation );
                crewon = new THREE.SkinnedMesh(geometry,faceMaterial, false);
                modelBB=geometry.boundingBox;
                crewon.position.set(0,0,0);
                scene.add(crewon);
                renderer.render(scene, camera);
                animation = new THREE.Animation( crewon, geometry.animation.name );
                animation.play( true, 0.5 );
            });
            // Lights
            scene.add( new THREE.AmbientLight( 0xcccccc ) );
            pointLight = new THREE.PointLight( 0xffffff, 1, 30 );
            pointLight.position.set( 5, 0, 0 );
            scene.add( pointLight );
            // Renderer
            renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            container.appendChild( renderer.domElement );
            // Stats
            stats = new Stats();
            container.appendChild( stats.domElement );
            // Events
            window.addEventListener( 'resize', onWindowResize, false );
            animate();
        }
        function onWindowResize( event ) {
            renderer.setSize( window.innerWidth, window.innerHeight );
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
        }
        function animate() {
            requestAnimationFrame( animate, renderer.domElement );
            var delta = clock.getDelta();
            THREE.AnimationHandler.update( delta );
            render();
            stats.update();
        }

        function render() {
            if ( crewon ){
                crewon.rotation.y+=0.01;
            }
            if( typeof animation != 'undefined' && animation!=null){
                animation.update(0.1);
            }
            if( typeof modelBB != 'undefined' && modelBB!=null){
                camera.position.x = 0;
                camera.position.y = (modelBB.max.y-modelBB.min.y)/2;
                camera.position.z = (modelBB.max.z-modelBB.min.z)*2;
                camera.lookAt( new THREE.Vector3(
                    0,
                    (modelBB.max.y-modelBB.min.y)/2, 
                    0) );
            }
            renderer.render( scene, camera );
        }
    </script>
</body>
</html>

Answer 1

尝试阅读这篇文章，也许它会有所帮助： http ： //devmatrix.wordpress.com/2013/02/27/creating-skeletal-animation-in-blender-and-exporting-it-to-three-js/

Answer 2

The problem may be here: 问题可能出在这里：

var faceMaterial = new THREE.MeshFaceMaterial( materials );
faceMaterial.skinning = true;

The meshFaceMaterial is just like a container of other materials - it isn't itself a real material. meshFaceMaterial就像是其他材料的容器 - 它本身并不是真正的材料。 Try iterating over its collection of materials: 尝试迭代其材料集合：

var materials = faceMaterial.materials;
for (var i = 0,length = materials.length; i < length; i++) {
    var material = materials[i];
    material.skinning = true;
}

Three.js Mesh没有使用AnimationHandler进行动画处理

问题描述

2 个解决方案

解决方案1
2 2013-03-02 20:41:29

解决方案2
2 已采纳 2013-03-03 20:56:45

Three.js Mesh没有使用AnimationHandler进行动画处理

问题描述

2 个解决方案

解决方案1 2 2013-03-02 20:41:29

解决方案2 2 已采纳 2013-03-03 20:56:45

解决方案1
2 2013-03-02 20:41:29

解决方案2
2 已采纳 2013-03-03 20:56:45