Three.js material isn't applied correctly to hexagonal faces

问题

I have a mesh, created in blender and exported to .obj. The mesh looks valid and has UV map applied and exported into the same .obj as well. For some reason, when I try to apply a texture material, or even basic material to the mesh, only half of the hexagon is actually painted.

This is a mesh

This is the code

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

        }

And this is how it looks:

When I split the hexagons into 2 quads it works perfectly, thing is, I need faces to stay hexagons for picking, the faces I want to be selected are hexagons.

来源：https://stackoverflow.com/questions/28487916/three-js-material-isnt-applied-correctly-to-hexagonal-faces

标签

three.js

mesh

material