为什么在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);
    }

- Jeremy Dicaire

---

这可能与此无关，但请将 gridHelper.position = new THREE.Vector3( 10, 10, 0 ); 更改为 gridHelper.position.set( 10, 10, 0 )，并将 gridHelper.rotation = new THREE.Euler( 45, 0, 0 ); 更改为 gridHelper.rotation.set( 45, 0, 0 );。 - mrdoob

谢谢mrdoob，我会这样做的。但是我想我从你的文档中引用了那些代码（可能有点过时了）。很高兴“见到”你!!! :) - Jeremy Dicaire

谢谢！已经整理干净了 :) - mrdoob

很可能是因为相机没有对准场景。尝试使用单个调用camera.lookAt(scene.position)进行实验。更好的方法是尝试使用最近版本的three.js r.67。 - WestLangley

谢谢WestLangley，我会的！ :) - Jeremy Dicaire

Answer 1

我曾经遇到过同样的问题。在调用OrbitControls之后，我定位了相机。我只是在创建相机后调用了OrbitControls，然后它就正常工作了。

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

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

因此，在第一次调用render()时，场景应该出现。

- Kabylzki

---

静态场景不需要动画循环。最好不要不必要地添加动画循环。 - WestLangley

Answer 2

在渲染(render())函数之前，您需要更新轨道控制(Orbit control)对象，以下是解决方案！

controlsObj.update();

- Siddharth Deore