Question

（我正在学习:-）我正在加载obj并通过mousemove旋转该对象（y轴）。工作正常，但控制台给我一个TypeError： worldscene在以下位置未定义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

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

对此的快速解决方案可以如下更新您的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 );

三个js错误：渲染器中未定义场景，但一切正常

1 个答案: