three.js所材料不正确地应用到六边形表面(Three.js material isn'

2019-10-21 21:17发布

我有一个网格,并在混合器中创造并出口到.OBJ。 网格看起来有效,并已应用UV贴图,并出口到相同的obj为好。 出于某种原因,当我尝试纹理材料,甚至是基本的材质应用到网格中,只有六边形的一半实际上是画的。

这是一个网

这是代码

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

        }

这是它的外观:

当我分裂成六边形2个四边形它完美的作品,问题是,我需要的面孔留六边形的采摘,我要选择的面是六边形。

文章来源: Three.js material isn't applied correctly to hexagonal faces