Var當我在three.js中使用加載程序時出現undefined

Question

//Script loader 
<script src="js/jquery.min.js"></script> 
<script src="js/three.min.js"></script> 
<script src="js/OrbitControls.js"></script> 
<script src="js/ColladaLoader.js" type="text/javascript"></script> 


<script> 
var loader = new THREE.ColladaLoader(); 
loader.load('texture/bigcube_hetre.dae', function (collada) { 

    window.cubeBigHetre = collada.scene; 

    var skin = collada.skins[ 0 ]; 

    cubeBigHetre.position.set(0, 0, 0); 
    cubeBigHetre.scale.set(1, 1, 1); 

}); 


var container; 
var camera, scene, renderer; 
var plane, cube; 
var cubeExport; 

init(); 
render(); 

function init() { 

    container = document.createElement('div'); 
    container.setAttribute("id", "container"); 

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

    camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 10000); 
    camera.position.set(0, 0, 2000); 
    camera.lookAt(new THREE.Vector3()); 

    controls = new THREE.OrbitControls(camera, renderer.domElement); 
    controls.damping = 0.2; 
    controls.addEventListener('change', render); 

    scene = new THREE.Scene(); 

    // grid 

    var size = 500, step = 50; 

    var geometry = new THREE.Geometry(); 

    for (var i = - size; i <= size; i += step) { 

     geometry.vertices.push(new THREE.Vector3(- size, i, 0)); 
     geometry.vertices.push(new THREE.Vector3( size, i, 0)); 

     geometry.vertices.push(new THREE.Vector3(i, - size, 0)); 
     geometry.vertices.push(new THREE.Vector3(i, size, 0 )); 

    } 

    var material = new THREE.LineBasicMaterial({ color: 0x000000, opacity: 0.2, transparent: true }); 

    var line = new THREE.Line(geometry, material, THREE.LinePieces); 
    scene.add(line); 

    // 

    raycaster = new THREE.Raycaster(); 
    mouse = new THREE.Vector2(); 

    var geometry = new THREE.PlaneBufferGeometry(1000, 1000); 


    plane = new THREE.Mesh(geometry); 
    plane.visible = false; 
    scene.add(plane); 



    // Lights 

    var ambientLight = new THREE.AmbientLight(0x606060); 
    scene.add(ambientLight); 

    var directionalLight = new THREE.DirectionalLight(0xffffff); 
    directionalLight.position.set(1, 0.75, 0.5).normalize(); 
    scene.add(directionalLight); 

    alert(cubeBigHetre);//Uncaught ReferenceError: cubeBigBrun is not defined 

    window.addEventListener('resize', onWindowResize, false); 
} 

function onWindowResize() { 

    camera.aspect = window.innerWidth/window.innerHeight; 
    camera.updateProjectionMatrix(); 

    renderer.setSize(window.innerWidth, window.innerHeight); 

} 

function render() { 

    renderer.render(scene, camera); 
} 
</script> 

這裏是代碼，問題來自alert（cubeBigHetre）; 它在Firefox和Internet Explorer中工作，但不與其他人一起工作。錯誤是：Uncaught ReferenceError：cubeBigBrun沒有定義，但不是在Firefox中！ Cordialy亞歷山大

Answer 1

。在你的代碼中的種族：

loader.load(..., function) 

會調用該函數當資源變爲可用。所以當你調用你的init()函數時，可能會加載資源，調用加載器回調函數並初始化變量，或者資源可能仍在下載，回調函數尚未調用，並且您的變量尚未初始化。這段代碼偶爾可以在IE和Firefox中使用。可能您正在本地測試和/或在瀏覽器中遇到Javascript引擎的細微差異。

您應該將依賴於要加載的資源的代碼從init()函數移動到加載器回調。

Answer 2

謝謝，我認爲你是真實的，但我不能移動它在加載器，所以我應該添加一個setTimeout（）。