为什么在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，它运行得很好。

在您的情况下，尝试添加：requestAnimationFrame（渲染）；在render函数中。

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

因此，在render（）的第一个调用中；场景应该出现。

Answer 2

您需要在render（）函数之前更新Orbit控制对象，这里是解决方案！

controlsObj.update();