ThreeJS - 缩小纹理尺寸(不重复 - 使用UV-Coords)

时间:2016-05-12 16:07:25

标签: three.js textures texture-mapping

你好我是ThreeJS和纹理映射的新手,

假设我有一个尺寸为(1000x1000x1)的3D平面。当我对它应用纹理时,它将被重复或者将被缩放,以至少填充整个平面。

我试图实现的是,在运行时更改平面上图片的缩放比例。我希望Image变小并停止适合整个平面。

我知道有一种方法可以将每张脸部映射到图片的一部分,但是也可以将它映射到图片中的负数,这样它就会透明吗?

我的问题是:

我在Blender中对一个模型进行UV映射,并将其与UV-Coords一起导入到我的ThreeJS-Code中。现在我需要缩小纹理,如前所述。我是否必须重新映射UV-Cords,还是必须操纵图像并添加透明边缘?

此外,我能以同样的方式在图片上移动图像吗?

我已经通过操作bufferedImages并将它们绘制到透明的上来在java3d中实现了这种用法。我不确定这是否可以使用javascript,所以我想知道它是否可以通过纹理映射。

感谢您的时间和建议!

2 个答案:

答案 0 :(得分:1)

这可以通过将3d平面映射到绘制图像的画布来完成(fabric.js可用于画布绘图).Inshort将画布设置为3d模型的纹理

yourmodel.material.map = document.getElementById("yourCanvas");

希望有所帮助:)

答案 1 :(得分:1)

是。在THREE中,纹理对象上有一些控件..

texture.repeat和texture.offset ..它们都是Vector2()s。

要重复纹理两次,可以执行texture.repeat.set(2,2);

现在,如果您只想缩放但不重复,那么还有"包装模式"纹理。

texture.wrapS(U轴)和texture.wrapT(V​​轴),这些可以设置为:

texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping;

这将使纹理的边缘像素在采样时延伸到无穷大,因此您可以在uv映射对象的表面上的任何位置放置单个小纹理。

https://threejs.org/docs/#api/textures/Texture

在这两个选项(包括texture.rotation)之间,您可以非常灵活地定位/重复纹理。

如果你需要更复杂的东西......比如扭曲纹理或改变它的颜色,你可能想要改变你的建模器中的UV,或者将纹理图像绘制到画布中,修改画布,并使用画布作为纹理图像,如ArUns的回答中所述。然后你也可以在运行时修改它。