I use the ExtrudeGeometry class to stretch shapes along a path. Since the stretching axis is not just in one direction, the texture appears to have rotated. How can I fix the texture angle in this situation. thank you.
const extrudePath = new THREE.LineCurve3(new THREE.Vector3(), new THREE.Vector3(6, 5, -7));
const extrudeSettings = {
bevelEnabled: false,
extrudePath
};
const shape = new THREE.Shape([
new THREE.Vector2(1, 1),
new THREE.Vector2(-1, 1),
new THREE.Vector2(-1, -1),
new THREE.Vector2(1, -1)
]);
const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
var texture = new THREE.TextureLoader().load("./colors.png");
texture.repeat = new THREE.Vector2(0.5, 0.5);
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
const material = new THREE.MeshPhongMaterial({
color: 0xffffff,
map: texture,
wireframe: false
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
I have customized the UVGenerator method and rotated the coordinates by 40 degrees in the generateTopUV method. It seems to be working, but this is not a good solution. I don’t know why I need to rotate by 40 degrees. I hope everyone can give me a revised solution. Thank you again! Here is an example:
Hmm I see what you mean, but perhaps you can always extrude in a single direction, and then just change .rotation of the output mesh to align it to your points in space?
When people build houses they don’t cut all the wood at the angle that the house is facing yeah?
Ohhhh gotcha. Hmm yeah that’s gonna be tricky. The first line segment is what is going to dictate the orientation of the UV mapping from extrusion. Perhaps you can rotate the extrusion path so the first segment is always straight, and then rotate the result to align with the first segment?