three js error: undefined scene in renderer but everything works fine

Question

（我正在学习 :-) 我正在加载一个对象并通过 mousemove 旋转该对象（y 轴）。工作正常，但控制台给了我一个 TypeError：世界场景未定义 main.js 在：

function render() {
    worldscene.rotation.y = Math.PI*2*mouseX/window.innerWidth*2;
    scene.updateMatrix();
    renderer.render(scene,camera );
}

这里是我的全部代码：

var worldscene, camera, scene, renderer, container;
var mouseX = 0, mouseY = 0;
var group = new THREE.Group;
var mouse = new THREE.Vector2();
var raycaster = new THREE.Raycaster();

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;


init();
animate();

function init() {

container = document.getElementById('buehne');

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 ); 
camera.position.set( 0, 2, 150 );
scene.add( camera );



var manager = new THREE.LoadingManager();
manager.onProgress = function ( item, loaded, total ) {
    console.log( item, loaded, total );
};
var onProgress = function ( xhr ) {
    if ( xhr.lengthComputable ) {
        var percentComplete = xhr.loaded / xhr.total * 100;
        console.log( Math.round(percentComplete, 2) + '% downloaded' );
    }
};
var onError = function ( xhr ) {
};





scene.background = new THREE.Color().setHex(0xffffff );
scene.fog = new THREE.Fog( scene.background, 100, 300 );

hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.6 );
hemiLight.color.setHSL( 0.6, 0.25, 0.3 ); 
hemiLight.groundColor.setHSL( 0.095, 1, 0.75 ); 
hemiLight.position.set( 0, 50, 0 );
scene.add( hemiLight );


dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
dirLight.color.setHSL( 0.1, 1, 0.95 ); //
dirLight.position.set( -1, 1.75, 1 );
dirLight.position.multiplyScalar( 100 );
scene.add( dirLight );
dirLight.castShadow = true;
dirLight.shadow.mapSize.width = 1024;
dirLight.shadow.mapSize.height = 1024;
var d = 50;
dirLight.shadow.camera.left = -d;
dirLight.shadow.camera.right = d;
dirLight.shadow.camera.top = d;
dirLight.shadow.camera.bottom = -d;
dirLight.shadow.camera.far = 3500;
dirLight.shadow.bias = -0.00001;


var earth = new THREE.MeshPhongMaterial( { color: 0x3B0B0B } );
var glas  = new THREE.MeshPhongMaterial( { color: 0xE0ECF8 } );


var loader = new THREE.OBJLoader(manager);
loader.load( 'res/worldscene.obj', function ( object ) {
    worldscene = object;
    worldscene.traverse( function ( child ) {


        if ( child instanceof THREE.Mesh ) {
            child.geometry.computeVertexNormals(); 
            if(child.name=='earth'){child.material = earth;} 
            if(child.name=='glas'){child.material = glas;} 
            child.castShadow = true;
            child.receiveShadow = true;

        }
        worldscene = object;
        console.log(worldscene);
    });

    worldscene.rotation.x = Math.PI/7;
    worldscene.rotation.y = 0;
     scene.add(worldscene);


}, onProgress, onError );


renderer = new THREE.WebGLRenderer( { alpha: false, antialias: true });
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight);
container.appendChild( renderer.domElement );

renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; 

window.addEventListener('resize', onWindowResize, false );
container.addEventListener( 'mousemove', onDocumentMouseMove, false );


} 

function onDocumentMouseMove( event ) {
        mouseX = ( event.clientX - windowHalfX ) / 2;
        mouseY = ( event.clientY - windowHalfY ) / 2;
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
}

function animate() {
    requestAnimationFrame(animate);
    render();
}
function render() {
    worldscene.rotation.y = Math.PI*2*mouseX/window.innerWidth*2;
    scene.updateMatrix();
    renderer.render(scene,camera );
}

Answer 1

这是因为在定义worldscene之前调用了render()方法。

快速解决此问题的方法是更新您的 render() 方法，如下所示：

function render() {
    if(worldscene) {
        // Only access worldscene if it's defined
        worldscene.rotation.y = Math.PI*2*mouseX/window.innerWidth*2;
    }
    scene.updateMatrix();
    renderer.render(scene,camera );
}

同时考虑重构对象加载代码如下：

loader.load( 'res/worldscene.obj', function ( object ) {

    object.traverse( function ( child ) {

        if ( child instanceof THREE.Mesh ) {
            child.geometry.computeVertexNormals(); 
            if(child.name=='earth'){child.material = earth;} 
            if(child.name=='glas'){child.material = glas;} 
            child.castShadow = true;
            child.receiveShadow = true;

        }
    });

    object.rotation.x = Math.PI/7;
    object.rotation.y = 0;
    scene.add(object);

    // Assign worldscene once, rather than twice as is the case in
    // your code
    worldscene = object;

}, onProgress, onError );

three js error: undefined scene in renderer but everything works fine

three js error: undefined scene in renderer but everything works fine

three.js

mousemove