Three.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 
})]);