Three.js材料未正确应用于六边形面

时间:2015-02-12 21:15:33

标签: three.js mesh material

我有一个网格,在blender中创建并导出到.obj。网格看起来有效并且应用了UV贴图并将其导出到同一个.obj中。出于某种原因,当我尝试将纹理材质,甚至基本材质应用于网格时,实际上只有一半的六边形被涂上了。

这是一个网格

enter image description here

这是代码

        var container;
        var camera, scene, renderer;

        init();
        animate();

        function init() {

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

            renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            container.appendChild( renderer.domElement );

            scene = new THREE.Scene();

            camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 0.5, 3000000 );
            camera.position.set( 2000, 750, 2000 );

            controls = new THREE.OrbitControls( camera, renderer.domElement );
            controls.userPan = false;
            controls.userPanSpeed = 0.0;
            controls.maxDistance = 5000.0;
            controls.maxPolarAngle = Math.PI * 0.495;
            controls.center.set( 0, 1, 0 );

            var light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 );
            light.position.set( - 1, 1, - 1 );
            scene.add( light );


            waterNormals = new THREE.ImageUtils.loadTexture( 'textures/waternormals.jpg' );
            waterNormals.wrapS = waterNormals.wrapT = THREE.RepeatWrapping; 

            water = new THREE.Water( renderer, camera, scene, {
                textureWidth: 512, 
                textureHeight: 512,
                waterNormals: waterNormals,
                alpha:  1.0,
                sunDirection: light.position.clone().normalize(),
                sunColor: 0xffffff,
                waterColor: 0x001e0f,
                distortionScale: 50.0,
            } );


            var loader = new THREE.OBJMTLLoader();
            loader.load( "models/world.obj", "models/world.mtl", function(object)
            {
                console.log(object.children[0].children[1].geometry);
                var mesh = new THREE.Mesh(
                    object.children[0].children[1].geometry,
                    new THREE.MeshBasicMaterial
                );                    

                scene.add(mesh);
            });
        }

        function animate() {

            requestAnimationFrame( animate );
            render();

        }

        function render() {

            controls.update();
            renderer.render( scene, camera );

        }

这就是它的样子:

enter image description here

当我将六边形分成两个四边形时,它完美地工作,事实是,我需要面部保持六边形进行拾取,我想要选择的面是六边形。

0 个答案:

没有答案
相关问题