紋理形狀擠壓在three.js

Question

我想紋理Three.js中的擠壓形狀。在下面的代碼中，我創建一個彎曲的形狀，擠出形狀，然後創建一個網格與我從Jpg文件加載的幾何和材質。線框顯示，但紋理不顯示。紋理尺寸爲512 * 512px。

我使用正確的方法嗎？我是否需要手動UV貼圖紋理？我希望紋理能夠包裹到整個擠壓面而不是每個單獨的四邊形。

var x = -50, y = 20, z = 150; 
var rx = 0, ry = Math.PI/4, rz = 0; 
var scale = 1; 
var color = 0x00ff00; 

var shape = new THREE.Shape(); 

shape.moveTo(x, y); 
shape.quadraticCurveTo(x+50, y, x+100, y+50); 
shape.quadraticCurveTo(x+50, y, x, y);  

var texture = new THREE.ImageUtils.loadTexture('images/checkerboard.jpg');   
var material = new THREE.MeshBasicMaterial({ map:texture, doubleSided:true }); 

/* 3D */ 
var extrudeSettings = { amount: 100 }; 
extrudeSettings.bevelEnabled = false; 
extrudeSettings.steps = 1; 

var geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);  

//var mesh = new THREE.Mesh(geometry, material); 
var mesh = THREE.SceneUtils.createMultiMaterialObject(geometry, [ material, new THREE.MeshBasicMaterial({ color: 0x000000, wireframe: true, transparent: true }) ]); 
mesh.position.set(x, y, z); 
mesh.rotation.set(rx, ry, rz); 

scene.add(mesh); 

Answer 1

ExtrudeGeometry最初編寫擠出字體，它可能會爲您創建的UV將無法正常工作。你必須手動提供UV。

檢查來源，你會看到你可以選擇用你自己的替換THREE.ExtrudeGeometry.WorldUVGenerator。