你好我是ThreeJS和纹理映射的新手,
假设我有一个尺寸为(1000x1000x1)的3D平面。当我对它应用纹理时,它将被重复或者将被缩放,以至少填充整个平面。
我试图实现的是,在运行时更改平面上图片的缩放比例。我希望Image变小并停止适合整个平面。
我知道有一种方法可以将每张脸部映射到图片的一部分,但是也可以将它映射到图片中的负数,这样它就会透明吗?
我的问题是:
我在Blender中对一个模型进行UV映射,并将其与UV-Coords一起导入到我的ThreeJS-Code中。现在我需要缩小纹理,如前所述。我是否必须重新映射UV-Cords,还是必须操纵图像并添加透明边缘?
此外,我能以同样的方式在图片上移动图像吗?
我已经通过操作bufferedImages并将它们绘制到透明的上来在java3d中实现了这种用法。我不确定这是否可以使用javascript,所以我想知道它是否可以通过纹理映射。
感谢您的时间和建议!
答案 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的回答中所述。然后你也可以在运行时修改它。