用collada模型和网格闪烁

时间:2012-10-02 08:59:35

标签: three.js flicker collada doublebuffered

我是three.js的新手,所以我需要一些帮助。

    init();
    animate();

    function init()
    {
         container = document.getElementById( 'container' );

         renderer = new THREE.WebGLRenderer();

         renderer.setClearColorHex(0xc2c2c2, 1.0);
         renderer.clear();
         renderer.setSize( container.clientWidth, container.clientHeight);
         renderer.shadowMapEnabled = true;
         renderer.shadowMapSoft = true;

         scene = new THREE.Scene();

         camera = new THREE.PerspectiveCamera( 70, container.clientWidth /                                       container.clientHeight,0.001, 10000 );
         camera.position.z = 5000;


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

         controls.rotateSpeed = 1.0;
         controls.zoomSpeed = 1.2;
         controls.panSpeed = 0.2;

         controls.noZoom = false;
         controls.noPan = false;

         controls.staticMoving = false;
         controls.dynamicDampingFactor = 0.3;

         controls.minDistance = 0.001;
         controls.maxDistance = 10000;

         controls.keys = [ 65, 83, 68 ]; // [ rotateKey, zoomKey, panKey ]

         pointLight = new THREE.PointLight( 0xffffff ,5,10000);

         pointLight.position.set(0,400,-500);

         scene.add(pointLight);

         relief(classes[0].value);
         load_model(classes[0].models[2].name);

         container.appendChild( renderer.domElement );
    }


    function animate() 
         {
            requestAnimationFrame( animate );
            render();

         }



    function render() 
         {
             controls.update();

             renderer.render( scene, camera );
         }

//加载区域

    function relief( vertices )
    {   

         var geometry = new THREE.Geometry();
         var array = vertices;

         for(var i=0 ; i <array.length; i += 3)
            {
               geometry.vertices.push (new THREE.Vector3 (array[i],array[i+1],array[i+2]));                
            }

         var h_php = 409 ;
         var w = 409 ;

         var h = h_php;

         for(i = 0;i < (geometry.vertices.length-1)/2 ;i++)
            {  
                if(i != h_php)
                {
                    geometry.faces.push(new THREE.Face4(i*2,i*2+1,i*2+3,i*2+2));
                }
                else
                {
                    h_php += h+1;
                }               
            }

         for(var j=0 ; j < w;j++)
            {  
                for(i=h; i > 0; i--)
                { 
                    geometry.faceVertexUvs[0].push([ new THREE.UV( j/w,   (i)/h ),           
                                                     new THREE.UV((j+1)/w, (i)/h ),
                                                     new THREE.UV((j+1)/w, (i-1)/h ),
                                                     new THREE.UV( j/w,   (i-1)/h ), ]);                              
                }
            }   

         geometry.computeFaceNormals();         
         geometry.computeCentroids()    
         var texture = THREE.ImageUtils.loadTexture('t.jpg');
         texture.needsUpdate = true;

         var mat = new THREE.MeshPhongMaterial( { map:texture, side: THREE.DoubleSide,} );
         mat.transparent = false;
         mesh = new THREE.Mesh( geometry ,mat );
         mesh.dynamic = true;
         mesh.rotation.x = -Math.PI/2;

         mesh.castShadow = true;
         mesh.receiveShadow  = false;


         scene.add(mesh);
    }


    function load_model( name )
    {    
         loader = new THREE.ColladaLoader();
         loader.load( name, function ( collada ) {

         model = collada.scene;
         model.scale.set(10,10,10);
         model.position.set(1000,150,700);
         model.rotation.x = -Math.PI/2;
         scene.add(model);

        } );

    }

      function Rel_vec(name,value)
    {
         this .name = name;
         this .value = value;
         this .models = [];
    }

    function child_vec(name,value)
    {
         this .name = name;
         this .value = value;
    }

classes [0] .value ---它是面积(约350K顶点)
classes [0] .models [2] .name ---它是collada模型的链接,

three.js中是否有任何工具可以进行双重缓冲? 如何避免闪烁?

这是截图。浏览器Chrome v 22.0.1229.79 m enter image description here

0 个答案:

没有答案