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（）时;场景应该出现。

Answer 2

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

controlsObj.update();

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

2 个答案: