尝试在 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();

尝试在 threejs 中播放动画时呈现空白屏幕

Rendering blank screen when trying to play animation in threejs

javascript

animation

three.js

3dsmax