Как расположить плоскую текстуру сегмента на кольцо?

Question

[News_Bot]

У меня есть текстура сегмента кольца(выделена синим), бесшовная, как мне расположить её на кольце?



вот мой код создания кольца

class Rings {
    constructor(innerRadius, outerRadius, textureUrl) {
        const textureLoader = new THREE.TextureLoader();
        const texture = textureLoader.load(textureUrl);
        
        texture.wrapS = THREE.RepeatWrapping; 
        texture.wrapT = THREE.RepeatWrapping; 

        const geometry = new THREE.RingGeometry(innerRadius, outerRadius, 32);
        const material = new THREE.MeshBasicMaterial({
            map: texture,
            side: THREE.DoubleSide,
            transparent: true,
            depthWrite: false,
        });

        material.blending = THREE.NormalBlending;

        this.mesh = new THREE.Mesh(geometry, material);
        this.mesh.rotation.x = Math.PI / 2; 
    };
}

Answer 1

[Wataru]

Не знаю, как UV-маппинг задается в этом вашем JS, но формулы для получения координат в прямоугольной текстуре по координатам на кольце такие:

x_r = (sqrt(x^2+y^2)-r0)/(r1-r0)*Width
y_r = (atan(y/x)/pi+1/2)*Height

Тут (x,y) - координаты на кольце. Центр кольца в (0,0), внутренний радиус r0, внешний r1. Width, Height - размеры прямоугольной текстуры.

Comments

[News_Bot]

Прекрасно. Вот код преобразования на JS

const texture = textureLoader.load(textureUrl, (texture) => {
    const width = texture.image.width;
    const height = texture.image.height;
    const positions = geometry.attributes.position;
    const uvs = geometry.attributes.uv;
    for (let i = 0; i < positions.count; i++) {
        const x = positions.getX(i);
        const y = positions.getY(i);
        const r = Math.sqrt(x * x + y * y); 
        const angle = Math.atan2(y, x);
        const x_r = (r - innerRadius) / (outerRadius - innerRadius) * width;
        const y_r = (angle / Math.PI + 0.5) * height;
        uvs.setXY(i, x_r / width, y_r / height); 
    }
    geometry.attributes.uv.needsUpdate = true;
});