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中工作，但不与其他人一起工作。错误是：未捕获的ReferenceError：未定义cubeBigBrun但在Firefox中没有定义; Cordialy Alexander

Answer 1

您的代码中存在竞争：

loader.load(..., function)

当资源可用时，

将调用该函数。因此，当您调用init()函数时，可能会加载资源，调用加载程序回调并初始化您的变量，或者资源可能仍在下载，尚未调用回调，并且您的变量仍未初始化。这段代码在IE和Firefox中偶然发挥作用。可能您正在本地测试和/或在浏览器中遇到Javascript引擎的细微差别。

您应该将依赖于要加载的资源的代码从init()函数移动到加载程序回调。

Answer 2

谢谢，我认为你是真的，但是我无法在加载器中移动它，所以我应该添加一个setTimeout（）。

当我在three.js中使用加载器时，Var未定义

2 个答案: