javascript - 添加纹理到 ExtrudeGeometry

Question

三.js v53

在 JSFiddle 上的 Three.js v 53 中，制作自定义形状，对其进行挤压并应用纹理和线框，显示挤压的面是完整的、完整的正方形。

JSFiddle:custom shape extruded in v53 with complete, un-split extrusion faces

三.js v74

完全相同的代码，但 Three.js v 74 将拉伸(stretch)面分割成三 Angular 形。

JSFiddle:custom shape extruded in v74 with segmented (into triangles) extrusion faces

问题 1:如何消除 v74 中挤出面的三 Angular 形分割？

额外问题 2: 如何消除我挤出的形状主面上的三 Angular 形分割(当我注意到 Three.js 之间的挤出差异时，我最初试图解决这个问题版本)

两者都让我的纹理之旅变得更加困难。非常感谢。

两个 JSFiddle 的代码:

(从另一个 JS Fiddle 借用了一些代码，但我无法再次找到它)

/****
Create the texture as I can't use an image on my server
*****/
var canvas = document.getElementById("texture"),
  context = canvas.getContext("2d");

canvas.width = 50;
canvas.height = 50;

context.strokeStyle = "#5588ff";
context.lineWidth = 2;
context.moveTo(0, 10);
context.lineTo(50, 10);
context.moveTo(0, 20);
context.lineTo(50, 20);
context.moveTo(0, 30);
context.lineTo(50, 30);
context.moveTo(0, 40);
context.lineTo(50, 40);
context.stroke();
/***********/

var scene, camera, renderer, shape;

scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, 2, 1, 10000);
camera.position.z = 200;
scene.add(this.camera);

var light = new THREE.AmbientLight(0xffffff);
scene.add(light);

renderer = new THREE.WebGLRenderer({
  antialias: true, alpha:true
});
document.getElementById("scene").appendChild(renderer.domElement);
renderer.setSize(document.getElementById("scene").scrollWidth, document.getElementById("scene").scrollHeight);



var points = []

points.push(new THREE.Vector2(100, 0));
points.push(new THREE.Vector2(100, 60));
points.push(new THREE.Vector2(40, 90));
points.push(new THREE.Vector2(-40, 90));
points.push(new THREE.Vector2(-100, 60));
points.push(new THREE.Vector2(-100, 0));

// var path = new THREE.LineCurve3(new THREE.Vector3(45, 0, 0), new THREE.Vector3(-45, 0, 0));

var extrusionSettings = {
  steps: 1,
  bevelEnabled: false,
  amount: 90
};

shape = new THREE.Shape(points);
var geometry = new THREE.ExtrudeGeometry(shape, extrusionSettings),
  texture = new THREE.Texture(canvas);
texture.needsUpdate = true;

var material = new THREE.MeshBasicMaterial({
  color: 0xFF00FF,
  map: texture
});

// *** UVMapping stuff I copied off an example. I don't know what it's doing but the texture won't work without it.
geometry.faceUvs = [
  []
];
geometry.faceVertexUvs = [
  []
];

for (var f = 0; f < geometry.faces.length; f++) {

  var faceuv = [
    new THREE.Vector2(0, 1),
    new THREE.Vector2(1, 1),
    new THREE.Vector2(1, 0),
    new THREE.Vector2(0, 0)
  ];

  geometry.faceUvs[0].push(new THREE.Vector2(0, 1));
  geometry.faceVertexUvs[0].push(faceuv);
}

// add a wireframe to highlight the segmentation (or lack of in this v53 demo)
mesh = THREE.SceneUtils.createMultiMaterialObject(geometry, [material, new THREE.MeshBasicMaterial({
  color: 0x000000,
  wireframe: true,
  transparent: true
})]);
mesh.position.z = -50;
mesh.position.y = -40;
mesh.rotation.y = 0.8;
mesh.rotation.z = 0.4;

scene.add(mesh);


animate = function() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  mesh.rotation.y += 0.02;
  mesh.rotation.x += 0.02;

};
animate();

Answer 1

THREE.ExtrudeGeometry 根据拉伸(stretch)形状的坐标为您创建默认 UV。 (查看拉伸(stretch)形状的几何形状并检查为您计算的 UV。)

自动生成的 UV 可能会超出 [ 0, 1 ] 的正常范围。您可以通过使用如下模式来适应这一点:

texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.offset.set( 0, 0.5 );
texture.repeat.set( 0.01, 0.01 );

更新的 fiddle :http://jsfiddle.net/vxr3Ljf3/4/

或者，您可以指定自己的自定义 UV 发生器，如下所示:

var extrusionSettings = {
  steps: 1,
  bevelEnabled: false,
  amount: 90,
  UVGenerator: myUVGenerator
};

您的自定义 UV 生成器基于 THREE.ExtrudeGeometry.WorldUVGenerator。

三.js r.74