在 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 编程方面的知识也非常有限。 多谢。
I'm looking after this for a long time now.
I just can't find any solution, anywhere.
I'm trying to apply 3 different textures on a cylinder (2 caps, and side)
But I have absolutely no idea on how to achieve this.
Can you orient me?
Here's what I'm doing for now :
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 );
As you can see here, I only apply one texture on all faces.
But even on caps, it's not really displaying, I only have a piece of the full circle.
Please help, I'm achieving a coin, if you didn't figure out.
Even if you just give me a link to a tutorial I would be really thanksfull.
I can't find anything, and my knowledge in 3D/OpenGL programming is quite limited.
Thanks a lot.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
[编辑] 三个圆柱体不起作用,因为帽 UV 是假的。
您需要滚动自己的帽子几何形状。工作量不大,只是烦人。以下是使用定制盖制作无盖气缸的方法:
[edit] Three cylinders didn't work since the cap UVs are bogus.
You need to roll your own cap geometries. Not a lot of work, just annoying. Here's how to do an uncapped cylinder with custom caps:
在现代 Three.js 中,您可以使用 3 种材质的数组创建一个圆柱体:
In modern Three.js you can create a cylinder with an array of 3 materials:
TypeScript 函数变体,创建具有 3 个网格的 Object3D:side、topCap 和 BottomCap。
适用于 lib 版本:
“三”:“0.102.1”
TypeScript function variant, that creates Object3D with 3 meshes: side, topCap and bottomCap.
Works with lib version:
"three": "0.102.1"