英文:
Set texture for custom shape
问题
我是新手三.js，我遇到了这样的问题
我有一个自定义形状，就像这样
// 创建一个自定义形状路径
const flapPath = new THREE.Path();
flapPath.moveTo(0, 0); // 0
flapPath.lineTo(12, 50); // 1
flapPath.lineTo(17, 70); // 2
flapPath.lineTo(20, 77); // 3
flapPath.lineTo(25, 85); // 4
flapPath.lineTo(30, 90); // 5
flapPath.lineTo(38, 95); // 6
flapPath.lineTo(43, 97); // 7
flapPath.lineTo(48, 98); // 8
flapPath.lineTo(55, 100); // 9
flapPath.lineTo(145, 100); // 10
flapPath.lineTo(152, 98); // 11
flapPath.lineTo(157, 97); // 12
flapPath.lineTo(162, 95); // 13
flapPath.lineTo(170, 90); // 14
flapPath.lineTo(175, 85); // 15
flapPath.lineTo(180, 77); // 16
flapPath.lineTo(183, 70); // 17
flapPath.lineTo(188, 50); // 18
flapPath.lineTo(200, 0); // 19
flapPath.closePath(); // 关闭路径
const flapShape = new THREE.Shape(flapPath.getPoints());
const flapGeometry = new THREE.ShapeGeometry(flapShape);
纹理的画布假设如下
请帮助我使用这个设置纹理
谢谢
英文:
I’m new to three.js, and I have an issue like this
I have a custom shape like this
// Create a custom flap path
const flapPath = new THREE.Path();
flapPath.moveTo(0, 0); // 0
flapPath.lineTo(12, 50); // 1
flapPath.lineTo(17, 70); // 2
flapPath.lineTo(20, 77); // 3
flapPath.lineTo(25, 85); // 4
flapPath.lineTo(30, 90); // 5
flapPath.lineTo(38, 95); // 6
flapPath.lineTo(43, 97); // 7
flapPath.lineTo(48, 98); // 8
flapPath.lineTo(55, 100); // 9
flapPath.lineTo(145, 100); // 10
flapPath.lineTo(152, 98); // 11
flapPath.lineTo(157, 97); // 12
flapPath.lineTo(162, 95); // 13
flapPath.lineTo(170, 90); // 14
flapPath.lineTo(175, 85); // 15
flapPath.lineTo(180, 77); // 16
flapPath.lineTo(183, 70); // 17
flapPath.lineTo(188, 50); // 18
flapPath.lineTo(200, 0); // 19
flapPath.closePath(); // Close the path
const flapShape = new THREE.Shape(flapPath.getPoints());
const flapGeometry = new THREE.ShapeGeometry(flapShape);
and the canvas for texture let assume like this
Please help me setting texture with this
Thank you
答案1
得分: 0
在ShapeGeometry上应用纹理如果需要精确的纹理映射可能会有些棘手。通常可以像这样定义纹理：
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 0.005, 0.005 );
在使用这些设置与您的形状和一个占位纹理时，可以得到可接受的结果，就像在以下实时示例中演示的那样：https://jsfiddle.net/5zknr9s2/2/
然而，纹理坐标可能对您的用例不够精确。如果是这样的话，我建议您在Blender中创建网格并应用纹理，然后导出为glTF文件，通过THREE.GLTFLoader导入资源。
英文:
Applying a texture on a ShapeGeometry can be tricky if you require exact texture mapping. The texture is usually define like so:
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 0.005, 0.005 );
Using these settings with your shape and a placeholder texture provides acceptable results like demonstrated in the following live example: https://jsfiddle.net/5zknr9s2/2/
However, the texture coordinates might no be precise enough for your use case. If so, I suggest you create the mesh and apply the texture in Blender, export to glTF and import the asset via THREE.GLTFLoader.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论