Question

three.js v53

在JSFiddle的three.js v 53中，制作自定义形状，挤出它并应用纹理和线框显示挤出的面是整体，完整的正方形。

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

three.js v74

完全相同的代码但是three.js v 74将拉伸面分割成三角形。

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

问题1：如何在v74中消除分割成挤出面的三角形？

奖金问题2：如何消除我挤出的形状主面上的三角形分割（当我注意到three.js之间的挤压差异时，我原本试图解决的问题版本）的

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

两个JSFiddles的代码：

（有些代码是从另一个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根据拉伸形状的坐标为您创建默认UV。（查看拉伸形状的几何图形并检查为您计算的UV。）

自动生成的UV可能会超出[0,1]的正常范围。你可以通过使用这样的模式来适应它：

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

更新了小提琴：http://jsfiddle.net/vxr3Ljf3/4/

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

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

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

three.js r.74

向ExtrudeGeometry添加纹理

1 个答案: