Javascript 向挤出计量添加纹理

three.js v53

在JSFIDLE上的three.js v 53中，制作一个自定义形状，拉伸它并应用纹理和线框，显示拉伸的面是完整的正方形

JSFiddle：

three.js v74

代码完全相同，但three.js v 74将挤出面拆分为三角形

JSFiddle：

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

附加问题2:我如何消除挤出形状主面的三角形分割（当我注意到三个.js版本之间的挤出差异时，我最初试图解决的问题）

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

两个JSIDdle的代码：

（有些代码是从另一个JS Fiddle借来的，但我再也找不到了）

/****
创建纹理，因为我无法在服务器上使用图像
*****/
var canvas=document.getElementById（“纹理”），
context=canvas.getContext（“2d”）；
宽度=50；
高度=50；
context.strokeStyle=“#5588ff”；
context.lineWidth=2；
上下文。移动到（0,10）；
上下文。lineTo（50,10）；
上下文。移动到（0,20）；
上下文。lineTo（50,20）；
上下文。移动到（0,30）；
上下文。lineTo（50,30）；
上下文。移动到（0,40）；
上下文。lineTo（50,40）；
stroke（）；
/***********/
var场景、摄影机、渲染器、形状；
场景=新的三个。场景（）；
摄像机=新的三个透视摄像机（75,2,1,10000）；
摄像机位置z=200；
场景.添加（此.camera）；
var灯光=新的三个环境灯光（0xffffff）；
场景。添加（灯光）；
renderer=new THREE.WebGLRenderer({
反别名：true，alpha:true
});
document.getElementById（“场景”）.appendChild（renderer.doElement）；
renderer.setSize（document.getElementById（“场景”）.scrollWidth，document.getElementById（“场景”）.scrollHeight）；
变量点=[]
点推（新的三矢量2（100,0））；
点.推（新的三矢量2（100,60））；
点.推（新的三点矢量2（40,90））；
点.推（新的三点矢量2（-40,90））；
点.推（新的三矢量2（-100,60））；
点推（新的三矢量2（-100,0））；
//var path=new THREE.LineCurve3（new THREE.Vector3（45,0,0），new THREE.Vector3（-45,0,0））；
变量拉伸设置={
步骤：1，
bevelEnabled:错，
金额：90
};
形状=新的三个形状（点）；
var geometry=新的三个。挤出计量法（形状、挤出设置），
纹理=新的三个纹理（画布）；
texture.needsUpdate=true；
var材料=新的三网格基本材料({
颜色：0xFF00FF，
贴图：纹理
});
//***我从一个例子中复制了UVMapping的东西。我不知道它在做什么，但是没有它纹理就不能工作。
geometry.faceUvs=[
[]
];
geometry.faceVertexUvs=[
[]
];
对于（var f=0；f

THREE。挤出几何测量术

基于挤出形状的坐标为您创建默认UV。（查看拉伸形状的几何图形并检查为您计算的UV。）

自动生成的UV可能超出正常范围[0,1]。您可以使用这样的模式来适应这种情况：

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

更新小提琴：

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

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

根据

THREE.ExtradeGeometry.WorldUVGenerator

创建自定义UV生成器

---

three.js r.74

FYI-three.js的旧版本支持四边形面。现在，three.js只支持三角形面。如果你想要一个没有对角线的线框，请使用

THREE.EdgesHelper

。噢，哇，非常感谢@WestLangley，太完美了。添加纹理包装和重复，移除我在互联网上盲目复制的UV内容，解决了三角形面之后的纹理问题。正如您的代码所示，问题不在于面，而在于如何处理整个纹理。你刚刚提高了我的纹理知识。再次感谢你。

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