[英]How to texture a three.js Mesh created with ShapeGeometry
我正在尝试将位图纹理材质放置在从three.js ShapeGeometry 创建的网格上。
几何图形是一个简单的八边形(我最终会添加曲线使其成为圆角矩形)。
网格被创建并显示得很好,除了位图纹理显示为四个巨大的方块,这似乎是加载图像的超级低分辨率版本。
这是它的样子:
(加载的图片实际上是一张 512x512 的法国国旗图片)
如何让纹理使用加载图像的全分辨率? (顺便说一句,当将此纹理作为材质应用于由 THREE.PlaneGeometry 制成的网格时,效果很好。)
这是我的代码...
var shape = new THREE.Shape();
shape.moveTo(-width/2 + radius, height/2);
shape.lineTo(width/2 - radius, height/2);
shape.lineTo(width/2, height/2 - radius);
shape.lineTo(width/2, -height/2 + radius);
shape.lineTo(width/2 - radius, -height/2);
shape.lineTo(-width/2 + radius, -height/2);
shape.lineTo(-width/2, -height/2 + radius);
shape.lineTo(-width/2, height/2 - radius);
shape.lineTo(-width/2 + radius, height/2);
var myGeometry = new THREE.ShapeGeometry( shape );
var myMesh = new THREE.Mesh(myGeometry, myMaterial);
谢谢!!!
THREE.ExtrudeGeometry.WorldUVGenerator
是默认紫外线发生器THREE.ShapeGeometry
。
此默认 UV 生成器将 UV 设置为等于顶点坐标。
您需要将自己的 UV 生成器传递给THREE.ShapeGeometry
。 请参阅源代码了解其工作原理。
解决方法是将模型参数放大 10 倍,然后通过设置mesh.scale.set( 0.1, 0.1, 1 )
进行补偿。
第三个选项是调整形状几何体,使其顶点覆盖 [0, 1] 范围 - 如果需要,然后应用mesh.scale
。
三.js r.61
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.