关于THREEJS加载obj大模型问题?

冰点青蛙 2015-02-09 03:13:11

使用OBJMTLLoader(）一加载大的obj模型浏览器就崩溃，是不是方法没有用对？加载几兆的模型没问题，十几兆以上浏览器就到蹦的时候了。如何破？

	



/**

	功  能：index页面主要js代码

	创建者：goodnew

	日  期：2015.02.09

*/

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();



var camera, scene, material, renderer;



init();

animate();



function init() {



	container = document.createElement( 'div' );

	document.body.appendChild( container );



	// set the camera

	camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);

	camera.position.set(100, 200, 400);





	// scene



	scene = new THREE.Scene();





	// texture



	var manager = new THREE.LoadingManager();

	manager.onProgress = function ( item, loaded, total ){ 

		console.log( item, loaded, total );

	};			



	var texture = new THREE.Texture();



	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 ) {

	};



	// model



	var loader = new THREE.OBJMTLLoader();

	loader.load( 'obj/02/02.obj', 'obj/02/02.mtl', function ( object ) {



        object.traverse( function ( child ) {



            if ( child instanceof THREE.Mesh ) {

                //child.material.map = texture;

            }

        } );



        object.position.x = 0;

        object.position.y = 0;

        object.position.z = 0;



        object.scale.x = 0.5;

        object.scale.y = 0.5;

        object.scale.z = 0.5;

  

        scene.add( object );



	}, onProgress, onError );



    // add subtle ambient lighting

    var ambiColor = "#1c1c1c";

    var ambientLight = new THREE.AmbientLight(ambiColor);

    scene.add(ambientLight);  



    light = new THREE.DirectionalLight( 0xdfebff, 1.75 );

    light.position.set( 50, 200, 100 );

    light.position.multiplyScalar( 1.3 );



    light.castShadow = true;

    //light.shadowCameraVisible = true;



    light.shadowMapWidth = 1024;

    light.shadowMapHeight = 1024;



    var d = 300;



    light.shadowCameraLeft = -d;

    light.shadowCameraRight = d;

    light.shadowCameraTop = d;

    light.shadowCameraBottom = -d;



    light.shadowCameraFar = 1000;

    light.shadowDarkness = 0.5;



    scene.add( light );







	renderer = new THREE.WebGLRenderer( { antialias: true } );

	renderer.setPixelRatio( window.devicePixelRatio );

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

	renderer.setClearColor(0xEEEEEE);

	container.appendChild( renderer.domElement );







	var controls = new THREE.OrbitControls( camera, renderer.domElement );

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

}



function animate() {

	requestAnimationFrame( animate );

	render();

}



function render() {

	renderer.render( scene, camera );

}	



function onWindowResize() {

	camera.aspect = window.innerWidth / window.innerHeight;

	camera.updateProjectionMatrix();



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

}