javascript - 在Three.js中纹理圆柱体

我已经很长时间了。
我只是在任何地方都找不到任何解决方案。
我正在尝试在圆柱体上应用3种不同的纹理(2个盖帽和一个侧面)
但是我绝对不知道如何实现这一目标。
可以让我定向吗？
这是我现在正在做的事情:

var coin1_geo = new THREE.CylinderGeometry( 100, 100, 10, 100, 100, false );
var coin1_texture = THREE.ImageUtils.loadTexture("./assets/avers.png");
var coin1_mat = new THREE.MeshLambertMaterial({map:coin1_texture});
var coin1 = new THREE.Mesh( coin1_geo, coin1_mat );
coin1.rotation.x = 20;
coin1.position.set(0,0,0);
coin1.castShadow = true;
coin1.receiveShadow = false;
scene.add( coin1 );

如您在这里看到的，我只在所有面上应用一种纹理。
但是即使是大写字母，也没有真正显示出来，我只有一个完整的圆圈。
请帮助，如果您不知道，我正在赚钱。
即使您只给我一个教程的链接，我也将非常感谢。
我什么都找不到，而且我在3D/OpenGL编程方面的知识非常有限。
非常感谢。

最佳答案

[edit]由于瓶盖UV是伪造的，所以三个圆柱体都无法工作。
您需要滚动自己的瓶盖几何形状。没有太多的工作，只是烦人。这是制作带自定义盖的无盖圆柱的方法:

var coin_sides_geo =
  new THREE.CylinderGeometry( 10.0, 10.0, 1.0, 100.0, 10.0, true );
var coin_cap_geo = new THREE.Geometry();
var r = 10.0;
for (var i=0; i<100; i++) {
  var a = i * 1/100 * Math.PI * 2;
  var z = Math.sin(a);
  var x = Math.cos(a);
  var a1 = (i+1) * 1/100 * Math.PI * 2;
  var z1 = Math.sin(a1);
  var x1 = Math.cos(a1);
  coin_cap_geo.vertices.push(
    new THREE.Vertex(new THREE.Vector3(0, 0, 0)),
    new THREE.Vertex(new THREE.Vector3(x*r, 0, z*r)),
    new THREE.Vertex(new THREE.Vector3(x1*r, 0, z1*r))
  );
  coin_cap_geo.faceVertexUvs[0].push([
    new THREE.UV(0.5, 0.5),
    new THREE.UV(x/2+0.5, z/2+0.5),
    new THREE.UV(x1/2+0.5, z1/2+0.5)
  ]);
  coin_cap_geo.faces.push(new THREE.Face3(i*3, i*3+1, i*3+2));
}
coin_cap_geo.computeCentroids();
coin_cap_geo.computeFaceNormals();

var coin_sides_texture =
  THREE.ImageUtils.loadTexture("./coin_sides.png");
var coin_cap_texture =
  THREE.ImageUtils.loadTexture("./coin_face.png");

var coin_sides_mat =
  new THREE.MeshLambertMaterial({map:coin_sides_texture});
var coin_sides =
  new THREE.Mesh( coin_sides_geo, coin_sides_mat );

var coin_cap_mat = new THREE.MeshLambertMaterial({map:coin_cap_texture});
var coin_cap_top = new THREE.Mesh( coin_cap_geo, coin_cap_mat );
var coin_cap_bottom = new THREE.Mesh( coin_cap_geo, coin_cap_mat );
coin_cap_top.position.y = 0.5;
coin_cap_bottom.position.y = -0.5;
coin_cap_top.rotation.x = Math.PI;

var coin = new THREE.Object3D();
coin.add(coin_sides);
coin.add(coin_cap_top);
coin.add(coin_cap_bottom);

关于javascript - 在Three.js中纹理圆柱体，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8315546/