javascript - 为什么我的场景在 ThreeJS 中调用 OrbitControl 之前都是黑色的？

Question

为什么我需要点击并稍微移动光标才能看到 ThreeJS 中的场景？

所以，页面是全黑的，但是一旦我点击并移动，一切都出现了，我找不到问题所在。一点帮助会很好:)

    var origWidth = 1280;
    var origHeight = 720;
    //TODO WindowResize looks wierd, implement it properly
    //var width = window.innerWidth;
    //var height = window.innerHeight;
    var width = origWidth;
    var height = origHeight;

    var Top = origHeight/2;
    var Bottom = -origHeight/2;
    var Left = -origWidth/2;
    var Right = origWidth/2;


    var renderer = null;
    var scene = null;
    var camera = null;
    var Textures = {};

        //Set the renderer engine
        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(width, height);
        document.getElementsByTagName("body")[0].appendChild(renderer.domElement);
        renderer.shadowMapEnabled = true;
        renderer.shadowMapSoft = true;



        //Setup the Scene!
        scene = new THREE.Scene;

        //Camera
        camera = new THREE.PerspectiveCamera(45, origWidth / origHeight, 0.1, 10000);
        camera.position = new THREE.Vector3(0,-80,800);

        scene.add(camera);
        camera.lookAt(scene);
        //TODO WindowResize looks wierd, implement it properly
        //var windowResize = THREEx.WindowResize(renderer, camera);



        //Light
        var pointLight = new THREE.PointLight(0xffffff);
        pointLight.position.set(0, 0, 900);
        scene.add(pointLight);



        //Debug
        controlsObj = new THREE.OrbitControls(camera);
        controlsObj.addEventListener('change', render);
        axes = new THREE.AxisHelper( origWidth );
        scene.add( axes );

        /*var size = 10;
        var step = 1;
        var gridHelper = new THREE.GridHelper( size, step );

        gridHelper.position = new THREE.Vector3( 10, 10, 0 );
        gridHelper.rotation = new THREE.Euler( 45, 0, 0 );

        scene.add( gridHelper );*/

        var pointLightHelper = new THREE.PointLightHelper( pointLight, 10 );
        scene.add( pointLightHelper );

        //Add playing field
        tablegeometry = new THREE.BoxGeometry(origWidth, origHeight, 40);
        tablematerial = new THREE.MeshLambertMaterial({ color: 0xffff00, map: Textures.bg, side: THREE.DoubleSide });
        tableobj = new THREE.Mesh(tablegeometry, tablematerial);
        tableobj.position.set(0,0,-20); //TODO vec
        scene.add(tableobj);

        //ANNNND, Action !
        render();

    function render() {
        console.log("render");
        renderer.render(scene, camera);
    }

Answer 1

我也遇到了同样的问题。我在调用 OrbitControls 后定位相机。我在创建相机后刚刚调用了 OrbitControls，它工作得很好。

在你的情况下尝试添加: requestAnimationFrame(render);在渲染函数中。

function render() {
    console.log("render");
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}  

这样在第一次调用render()时；场景应该出现。