1

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

enter image description here

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:

enter image description here

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.

Edric
  • 24,639
  • 13
  • 81
  • 91
user1617735
  • 451
  • 5
  • 16
  • 1
    The OBJLoader only supports faces with 3 or 4 vertices. – gaitat Feb 12 '15 at 21:41
  • Ouch! What other formats support polygons with more than 4 vertices? If any. – user1617735 Feb 12 '15 at 21:52
  • First, make sure the obj you export is triangulated, then also check your mesh normals. If normals are facing away from the camera they will not be rendered – George Profenza Feb 12 '15 at 22:08
  • I already had and overcame the problem of normals facing inwards, the only problem I have left was this. My faces are not tringulated, as I said, they have to be hexagonal for picking to work properly – user1617735 Feb 12 '15 at 22:15
  • Thanks, gaitat, you were right. I've tried JSONLoader and it works perfectly. Here's is the hexagonized sphere with THREE.Water material stretched on it: http://i.imgur.com/RebG3bg.jpg The only thing left is to UV map it properly, since it looks too stretched towards the equator, but I guess that's a new question, if I don't manate to overcome it alone. – user1617735 Feb 12 '15 at 22:16

0 Answers0