Three.js制作静态立方体

Question

我是Three.js的新手，所以，我正尝试制作STATIC多维数据集。 因此，我找到了一个旋转立方体的例子。 这里是：

var camera, scene, renderer;
var mesh;

init();
animate();
//renderer.render( scene, camera );
function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.z = 400;

    scene = new THREE.Scene();
    var texture = THREE.ImageUtils.loadTexture( '16.jpg' );
    var geometry = new THREE.BoxGeometry( 200, 200, 200 );
    var material = new THREE.MeshBasicMaterial( { map: texture } );
    var axes = new THREE.AxisHelper( 20 );


    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

}

function animate() {

    requestAnimationFrame( animate );

    mesh.rotation.x += 0.005;
    mesh.rotation.y += 0.01;

    renderer.render( scene, camera );

}

好的，一切正常。 现在我只想制作STATIC立方体，

var camera, scene, renderer;
var mesh;

init();
renderer.render( scene, camera );
function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.z = 400;

    scene = new THREE.Scene();
    var texture = THREE.ImageUtils.loadTexture( '16.jpg' );
    var geometry = new THREE.BoxGeometry( 200, 200, 200 );
    var material = new THREE.MeshBasicMaterial( { map: texture } );
    var axes = new THREE.AxisHelper( 20 );


    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

}

输出只是黑屏，我做错了什么？

Answer 1

纹理加载是异步的，您需要先完成场景渲染。 向图像加载器添加回调，然后再次渲染：

var texture = THREE.ImageUtils.loadTexture('16.jpg', undefined, function () {
    renderer.render(scene, camera);
});

或者使用requestAnimationFrame连续渲染：

init();
animate();

//...

function animate() {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
}

Answer 2

看起来，当您摆脱animate() ，您也摆脱了对

renderer.render( scene, camera );

所以您需要将其放回代码中的某个位置以渲染场景