三.JS是否可以在shapeGeometry上渲染纹理？

Question

是否可以在 shapeGeometry 上渲染纹理？我尝试了几种方法，但这是我所能得到的最接近的方法。看起来纹理正在加载。如果我将它应用于球体，它会起作用，但它仅在屏幕上显示为灰色和白色条纹。谢谢，大卫

<script>

        var container, stats;

        var camera, scene, renderer;

        var text, plane;

        var targetRotation = 0;
        var targetRotationOnMouseDown = 0;

        var mouseX = 0;
        var mouseXOnMouseDown = 0;

        var windowHalfX = window.innerWidth / 2;
        var windowHalfY = window.innerHeight / 2;

        init();
        animate();

        function init() {

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

            camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
            camera.position.set( 0, 150, 500 );

            scene = new THREE.Scene();

            parent = new THREE.Object3D();
            parent.position.y = 50;
            scene.add( parent );

                            var earthTexture = new THREE.Texture();
            var loader = new THREE.ImageLoader();
            loader.addEventListener( 'load', function ( event ) {

                earthTexture.image = event.content;
                earthTexture.needsUpdate = true;

            } );

            loader.load( 'textures/land_ocean_ice_cloud_2048.jpg' );

                            var triangleShape = new THREE.Shape();
            triangleShape.moveTo(  80, 20 );
            triangleShape.lineTo(  40, 80 );
            triangleShape.lineTo( 120, 80 );
            triangleShape.lineTo(  80, 20 ); // close path
                            var geometry = new THREE.ShapeGeometry( triangleShape );
                            var material = new THREE.MeshBasicMaterial( { map: earthTexture, overdraw: true } );
                            var mesh = new THREE.Mesh( geometry, material );
                            parent.add( mesh );

            function addShape( shape, color, lncolor, x, y, z, rx, ry, rz, s ) {

                // flat shape

                var geometry = new THREE.ShapeGeometry( shape );
                                    var material = new THREE.MeshBasicMaterial( { map: color, overdraw: true } );
                                  //var material = new THREE.MeshBasicMaterial( { color: color, overdraw: true} );


                var mesh = new THREE.Mesh( geometry, material );
                mesh.position.set( x, y, z );
                mesh.rotation.set( rx, ry, rz );
                mesh.scale.set( s, s, s );
                parent.add( mesh );

                // line

                var geometry = shape.createPointsGeometry();
                var material = new THREE.LineBasicMaterial( { linewidth: 2, color: lncolor, transparent: true } );

                var line = new THREE.Line( geometry, material );
                line.position.set( x, y, z );
                line.rotation.set( rx, ry, rz );
                line.scale.set( s, s, s );
                parent.add( line );

            }

            // California

            var californiaPts = [];

            californiaPts.push( new THREE.Vector2 ( 610, 320 ) );
            californiaPts.push( new THREE.Vector2 ( 450, 300 ) );
            californiaPts.push( new THREE.Vector2 ( 392, 392 ) );
            californiaPts.push( new THREE.Vector2 ( 266, 438 ) );
            californiaPts.push( new THREE.Vector2 ( 190, 570 ) );
            californiaPts.push( new THREE.Vector2 ( 190, 600 ) );
            californiaPts.push( new THREE.Vector2 ( 160, 620 ) );
            californiaPts.push( new THREE.Vector2 ( 160, 650 ) );
            californiaPts.push( new THREE.Vector2 ( 180, 640 ) );
            californiaPts.push( new THREE.Vector2 ( 165, 680 ) );
            californiaPts.push( new THREE.Vector2 ( 150, 670 ) );
            californiaPts.push( new THREE.Vector2 (  90, 737 ) );
            californiaPts.push( new THREE.Vector2 (  80, 795 ) );
            californiaPts.push( new THREE.Vector2 (  50, 835 ) );
            californiaPts.push( new THREE.Vector2 (  64, 870 ) );
            californiaPts.push( new THREE.Vector2 (  60, 945 ) );
            californiaPts.push( new THREE.Vector2 ( 300, 945 ) );
            californiaPts.push( new THREE.Vector2 ( 300, 743 ) );
            californiaPts.push( new THREE.Vector2 ( 600, 473 ) );
            californiaPts.push( new THREE.Vector2 ( 626, 425 ) );
            californiaPts.push( new THREE.Vector2 ( 600, 370 ) );
            californiaPts.push( new THREE.Vector2 ( 610, 320 ) );

            var californiaShape = new THREE.Shape( californiaPts );



            // addShape( shape, color, x, y, z, rx, ry,rz, s );

            addShape( californiaShape,earthTexture, 0x000000, -300, -100, 0, 0, 0, 0, 0.25 );


            //


            renderer = new THREE.CanvasRenderer( { antialias: true } );
            renderer.setSize( window.innerWidth, window.innerHeight );
            //renderer.sortObjects = false;
            //renderer.sortElements = false;
            container.appendChild( renderer.domElement );

            stats = new Stats();
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.top = '0px';
            container.appendChild( stats.domElement );

            document.addEventListener( 'mousedown', onDocumentMouseDown, false );
            document.addEventListener( 'touchstart', onDocumentTouchStart, false );
            document.addEventListener( 'touchmove', onDocumentTouchMove, false );

            //

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

        }

        function onWindowResize() {

            windowHalfX = window.innerWidth / 2;
            windowHalfY = window.innerHeight / 2;

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

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

        }
        function loadImage( path ) {

            var image = document.createElement( 'img' );
            var texture = new THREE.Texture( image, THREE.UVMapping )

            image.onload = function () { texture.needsUpdate = true; };
            image.src = path;

            return texture;

        }

        //

        function onDocumentMouseDown( event ) {

            event.preventDefault();

            document.addEventListener( 'mousemove', onDocumentMouseMove, false );
            document.addEventListener( 'mouseup', onDocumentMouseUp, false );
            document.addEventListener( 'mouseout', onDocumentMouseOut, false );

            mouseXOnMouseDown = event.clientX - windowHalfX;
            targetRotationOnMouseDown = targetRotation;

        }

        function onDocumentMouseMove( event ) {

            mouseX = event.clientX - windowHalfX;

            targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;

        }

        function onDocumentMouseUp( event ) {

            document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
            document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
            document.removeEventListener( 'mouseout', onDocumentMouseOut, false );

        }

        function onDocumentMouseOut( event ) {

            document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
            document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
            document.removeEventListener( 'mouseout', onDocumentMouseOut, false );

        }

        function onDocumentTouchStart( event ) {

            if ( event.touches.length == 1 ) {

                event.preventDefault();

                mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
                targetRotationOnMouseDown = targetRotation;

            }

        }

        function onDocumentTouchMove( event ) {

            if ( event.touches.length == 1 ) {

                event.preventDefault();

                mouseX = event.touches[ 0 ].pageX - windowHalfX;
                targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;

            }

        }

        //

        function animate() {

            requestAnimationFrame( animate );

            render();
            stats.update();

        }

        function render() {

            parent.rotation.y += ( targetRotation - parent.rotation.y ) * 0.05;
            renderer.render( scene, camera );

        }

    </script>

Answer 1

看看这个问题Texture mapping on extrude geometry ThreeJS

更具体地说是这个区域

mesh = THREE.SceneUtils.createMultiMaterialObject(geometry, [material, new     THREE.MeshBasicMaterial({
    color: 0x000000,
    wireframe: true,
    transparent: true
})]);