javascript - 尝试在 Threejs 中播放动画时呈现空白屏幕

Question

我正在尝试使用 Three.js 对导出的模型(从 3dsmax -> dae 文件 -> json)进行动画处理。我没有收到任何控制台错误，而只是出现空白屏幕。任何人都知道为什么会发生这种情况？我很高兴还提供 json、png、max 文件、dae 文件或任何其他可能有帮助的资源。任何帮助将非常感激。我被困住了......这是 javascript:

<script>

    var camera, scene, renderer, animmesh;

    var clock = new THREE.Clock();

    function init() {

        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

        camera.position.z = 5;

        scene = new THREE.Scene();

        scene.add(camera);

        renderer = new THREE.WebGLRenderer( { antialias: true } );

        renderer.setSize( window.innerWidth, window.innerHeight );

        document.body.appendChild( renderer.domElement );

        var loader = new THREE.JSONLoader();


        loader.load("../../assets/model-threejs.json", function (model, material) {

                createScene(model, material);

        });

}



function createScene(model, material) {

        material[0].skinning = true;

        animmesh = new THREE.SkinnedMesh(model, material[0]);

        scene.add(animmesh);

}


function render() {

        renderer.render(scene, camera);

}



init();

render();

</script>

Answer 1

您遇到了几个问题。 1) 你的大象太大了，超出了屏幕。 2)你需要告诉相机看原点。 3)当你简化代码时，你让它变得太简单了，你仍然需要动画循环。

此代码有效(因为我没有您的 PNG 文件，所以我使用了 MeshNormalMaterial):

var camera, scene, renderer, animmesh, controls;
var clock = new THREE.Clock();

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

    camera.position.x = -900;

    scene.add(camera);

    renderer = new THREE.WebGLRenderer( { antialias: true } );

    renderer.setSize( window.innerWidth*.9, window.innerHeight*.9 );

    document.body.appendChild( renderer.domElement );

    var loader = new THREE.JSONLoader();


    loader.load("model-threejs.json", function (model, material) {

        animmesh = new THREE.Mesh(model, new THREE.MeshNormalMaterial());

        scene.add(animmesh);
        animate();

    });
}

function animate() {
  requestAnimationFrame( animate );
  render();
}
function render() {
        renderer.render(scene, camera);
        camera.lookAt(new THREE.Vector3(0,0,0));
}
init();