Question

我尝试使用three.js动画导出的模型（来自3dsmax - ＆gt; dae文件 - ＆gt; 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();

尝试在三个js中播放动画时渲染空白屏幕

1 个答案: