Question

我想在我的项目中使用加载栏预加载所有模型和纹理。为此，我使用了three.js中的LoadingManger，但是我在预加载json模型时遇到了问题。他们加载但我无法显示它们。这是一个example。

您可以在控制台中看到创建了200个网格。 100对于小行星和100为船舶。

使用LoadingManger我可以显示模型（小行星），因此模型应该没有问题。您可以在没有加载管理器的情况下加载示例Asteroids。

这里是问题的简化代码

$(function(){
        if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

        var debugScene = true;
        var controler, camera, controls, scene, renderer;
        var objectControls;
        var ship1geometry,ship1material;

        ////////////////////////////////////////////////////////
        //LOADMANGER
        ////////////////////////////////////////////////////////
        var manager = new THREE.LoadingManager();
        manager.onProgress = function ( item, loaded, total ) {
            $('#loader').css({width:(Math.round(loaded / total *100))+"%"});
            console.log( item, loaded, total );
        };
        manager.onLoad = function () {
            $('#loaderholder').fadeOut(function(){
                init();
                animate();
            });
            console.log('all items loaded');
        };
        manager.onError = function () {
            console.log('there has been an error');
        };

        var loader = new THREE.JSONLoader(manager); // init the loader util
        loader.load('models/shiptest.json', function (ship1geometry) {
            var ship1material = new THREE.MeshFaceMaterial();
        }, "models");

        function init() {
            var width = window.innerWidth;
            var height = window.innerHeight;

            camera = new THREE.PerspectiveCamera( 45, width / height, 1, 10000000 );
            camera.position.x = 0;
            camera.position.y = 0;
            camera.position.z = 1500;

            scene = new THREE.Scene();

            renderer = new THREE.WebGLRenderer();
            renderer.setClearColor("black");
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            renderer.autoClear = false;

            var container = document.getElementById( 'container' );
            container.appendChild( renderer.domElement );

            controls = new THREE.OrbitControls( camera, renderer.domElement );
            controls.enableDamping = true;
            controls.dampingFactor = 0.25;
            controls.enableZoom = false;
            controls.minDistance  = 50;
            controls.maxDistance  = 300000;
            controls.autoRotate = false;
            controls.autoRotateSpeed = 0.05;

            controls.target.x = 0;
            controls.target.y = 0;
            controls.target.z = 0;

            light = new THREE.AmbientLight( 0x666666 );
            scene.add( light );

            light = new THREE.PointLight( 0xffffff, 1, 10000 );
            light.position.set( 0, 0, 0 );

            var params = { recursive: true };
            objectControls = new ObjectControls( camera, params );

            shipCount = 100;
            for (var p = 0; p < shipCount; p++) {
              var pX = Math.random() * 5000 - 2500;
              var pZ = Math.random() * 5000 - 2500;
              var ship = createShipMesh(pX,0,pZ,0,0,0,ship1geometry,ship1material);
              scene.add(ship);
            }

            var loader = new THREE.JSONLoader();
            loader.load('models/asteroid.json', function (geometry, mat) {
                var material = new THREE.MeshFaceMaterial( mat );
                asteroidCount = 100;
                for (var p = 0; p < asteroidCount; p++) {
                      var pX = Math.random() * 5000 - 2500;
                      var pZ = Math.random() * 5000 - 2500;
                      var mesh = new THREE.Mesh(geometry,material);
                      mesh.rotation.y = -Math.PI/Math.random();
                      mesh.position.set( pX, 0, pZ );
                      scene.add(mesh);
                }
            }, "textures");

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

            if(debugScene){
                var gridHelper = new THREE.GridHelper( 900000, 10000 );
                gridHelper.setColors( 0x0000ff, 0x808080 );
                scene.add( gridHelper );
                var axisHelper = new THREE.AxisHelper( 500 );
                scene.add( axisHelper );
                console.log(scene);
            }
        }
        function onWindowResize() {

            var width = window.innerWidth;
            var height = window.innerHeight;

            camera.aspect = width / height;
            camera.updateProjectionMatrix();

            renderer.setSize( window.innerWidth, window.innerHeight );
        }
        var lastTimeMsec= null;
        var nowMsec= null;
        function animate() {
            requestAnimationFrame( animate );
            render();
            update();
        }
        function update(){
            controls.update();
            objectControls.update();
        }

        function render() {
            renderer.render( scene, camera );
        }
        function createShipMesh(positionX,positionY,positionZ,centerX,centerY,centerZ,geometry,material){
            positionX = centerX + positionX;
            positionY = centerY + positionY;
            positionZ = centerZ + positionZ;
            var mesh = new THREE.Mesh(geometry,material);
            mesh.rotation.y = -Math.PI/Math.random();
            mesh.position.set( positionX, positionY, positionZ );

            objectControls.add( mesh );
            mesh.select = function(){
                controls.target.x = position.x;
                controls.target.y = position.y;
                controls.target.z = position.z;
                controls.dollyIn(2);
                controls.minDistance  = 20;
            }
            return mesh;
        }
    });

Answer 1

好的，我自己发现了这个问题。加载管理器与json一起工作，但我的错误是将变量ship1geometry设置为全局，并且认为加载器将覆盖此变量，以便我可以在以后的场景中使用它。那是错的。我只需要在我的globaly set变量中分配来自加载器的响应。所以这是正确的代码

var ship1geometry,ship1material
var manager = new THREE.LoadingManager();
manager.onProgress = function ( item, loaded, total ) {
    $('#loader').css({width:(Math.round(loaded / total *100))+"%"});
    console.log( item, loaded, total );
};
manager.onLoad = function () {
    $('#loaderholder').fadeOut(function(){
        init();
        animate();
    });
    console.log('all items loaded');
};
manager.onError = function () {
    console.log('there has been an error');
};

var loader = new THREE.JSONLoader(manager); // init the loader util
loader.load('models/shiptest.json', function (geometry,mat) {
    ship1geometry = geometry;
    ship1material = new THREE.MeshLambertMaterial({map:mat });
}, "textures");
function init(){
     ...
}

three.js json loadingmanager模型未显示

1 个答案: