104 THREE.JS 实现merge后显示相应的材质

2018-11-02 19:11:11 人阅读

案例查看有问题?
全屏试试!

案例源代码


                        
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js webgl - glTF loader</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                font-family: Monospace;
                background-color: #000;
                color: #fff;
                margin: 0px;
                overflow: hidden;
            }
            #info {
                color: #fff;
                position: absolute;
                top: 10px;
                width: 100%;
                text-align: center;
                z-index: 100;
                display:block;
            }
            #info a {
                color: #75ddc1;
                font-weight: bold;
            }
        </style>
    </head>

    <body>
        
    
        <script src="three92.js"></script>
        <script src="OrbitControls.js"></script>
        <script src="GLTFLoader.js"></script>
        <script src="Detector.js"></script>
        <script src="stats.min.js"></script>
        <script>

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

            var container, stats, controls;
            var camera, scene, renderer, light;

            init();
            animate();

            function init() {

                container = document.createElement( 'div' );
                document.body.appendChild( container );

                camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
                camera.position.set( 0, 1, 3 );

                controls = new THREE.OrbitControls( camera );
                controls.update();

                scene = new THREE.Scene();
                

                light = new THREE.HemisphereLight( 0xbbbbff, 0x444422 );
                light.position.set( 0, 1, 0 );
                scene.add( light );

                // model
             
                var loader = new THREE.GLTFLoader();
                loader.load( 'zhuozi.gltf', function ( gltf ) {
                
                    //创建材质数组和几何体数组
                    var meshArr = [];
                    var materialArr = [];
                    
                    //遍历获取到所有网格的材质和几何体
                    gltf.scene.traverse(function(child){
                        if(child.isMesh){
                            meshArr.push(child);
                            materialArr.push(child.material);
                        }
                    });
                    
                    //融合几何体,并设置几何体的材质下标
                    var geometry = new THREE.Geometry();
                    for(var i=0; i<meshArr.length; i++){
                        meshArr[i].updateMatrix();
                        geometry.merge(new THREE.Geometry().fromBufferGeometry(meshArr[i].geometry), meshArr[i].matrix, i);
                    }
                    
                    geometry.center();
                    
                    //通过当前的合并的几何体和材质数组创建新的网格
                    var mesh = new THREE.Mesh(geometry, materialArr);
                    
                    
                    //添加到场景
                    mesh.rotation.x = -Math.PI/2;
                    
                    console.log(mesh);
                    
                    scene.add(mesh); 

                });  

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

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

                console.log(renderer.info.render);

                // stats
                stats = new Stats();
                container.appendChild( stats.dom );

            }

            function onWindowResize() {

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

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

            }

            function animate() {

                requestAnimationFrame( animate );

                renderer.render( scene, camera );

                stats.update();

            }
            
            </script>
    
    </body>
</html>
 
展开内容

联系我们

一个人的力量不如两个人的,两个人的力量不如一群人的。欢迎加入大家庭一起共同学习,共同进步。

查看更多