Javascript 如何对使用ShapeGeometry创建的three.js网格进行纹理处理
我正在尝试将位图纹理材质放置在由three.js ShapeGeometry创建的网格上 几何体是一个简单的八角形(我最终会添加曲线,使其成为一个圆角矩形) 网格被创建并显示得很好,除了位图纹理显示为四个巨大的正方形,这似乎是加载图像的超复制低分辨率版本 下面是它的样子: (加载的图像实际上是法国国旗的512x512张照片) 如何获得纹理以使用加载图像的完整分辨率?(顺便说一句,将此纹理作为材质应用于由3.PlaneGeometry组成的网格时,效果良好。) 这是我的密码Javascript 如何对使用ShapeGeometry创建的three.js网格进行纹理处理,javascript,three.js,Javascript,Three.js,我正在尝试将位图纹理材质放置在由three.js ShapeGeometry创建的网格上 几何体是一个简单的八角形(我最终会添加曲线,使其成为一个圆角矩形) 网格被创建并显示得很好,除了位图纹理显示为四个巨大的正方形,这似乎是加载图像的超复制低分辨率版本 下面是它的样子: (加载的图像实际上是法国国旗的512x512张照片) 如何获得纹理以使用加载图像的完整分辨率?(顺便说一句,将此纹理作为材质应用于由3.PlaneGeometry组成的网格时,效果良好。) 这是我的密码 var shape =
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设置为等于顶点坐标
您需要将自己的UV生成器传递到THREE.ShapeGeometry
。请参阅源代码了解其工作原理
解决方法是将模型参数放大一个因子,例如10,然后通过设置mesh.scale.set(0.1,0.1,1)
进行补偿
第三个选项是调整形状几何体,使其顶点覆盖[0,1]范围,然后根据需要应用mesh.scale
three.js r.61我知道这与紫外线有关,但我无法理解。非常感谢。我想我现在可以让它工作了。现在工作得很好!我选择了2号门后面的选项:)