Как применить радиальную текстуру к кольцу с помощью тр.js r67?

Question

Я пытаюсь применить текстуру к ringGeometry в three.js r67. Я не могу правильно настроить текстуру. Я хотел бы применить следующую текстуру к сетке ringGeometry радиально, так что синий конец текстуры появится на внутренней окружности кольца, а красный край появится на внешней окружности. Вот соответствующая часть моего кода с JSFiddle ссылкой на запущенном например:

geometry = new THREE.RingGeometry(100, 192, 60); 
material = new THREE.MeshPhongMaterial({ map: texture }); 
mesh = new THREE.Mesh(geometry, material); 
scene.add(mesh); 

http://jsfiddle.net/mareid/8t4cz/4/

Я не могу получить текстуру (а) поток в радиальном направлении, (б) линия с радиальным протяженность кольца, чтобы отображалась вся текстура, и (c) появляются с обеих сторон кольца. Я хочу, чтобы это появилось больше, как это:

http://astro.utoronto.ca/~mreid/ring_gradient.png

У меня есть очень шаткое схватывание УФ отображения. Обратите внимание, что текстура, которую я предоставил, является лишь примером. Я хотел бы иметь возможность сделать это в общем случае радиальных текстур на кольцах.

Кто-то разместил подобный вопрос, но я не могу понять, как адаптировать отображение УФ на их примере помоему:

Non-radial texture mapping over a ring geometry in WebGL using Three.js

Спасибо за вашу помощь!

Answer 1

После нескольких экспериментов я могу подтвердить, что решение, разделенное на поток, который я связал и защищал by @vals, действительно работает, но в решении, которое было необходимо для новичков, таких как я, была одна деталь. Таким образом, чтобы подвести итог, чтобы применить радиальную текстуру к RingGeometry, вам необходимо изменить отображение ультрафиолетовый в three.js (R67, в данном случае), чтобы быть похожим на это:

//uvs.push(new THREE.Vector2((vertex.x/outerRadius+1)/2, (vertex.y/outerRadius + 1)/2)); 
uvs.push(new THREE.Vector2(i/(thetaSegments-1), o/ (phiSegments-1))); 

Вы тогда должны также обеспечить что, когда вы звоните в RingGeometry, вы устанавливаете тетаборы и phiSegments на один и тот же номер. В противном случае на ринге появится только часть текстуры. Я надеюсь, что это помогает кому-то. Спасибо @vals и @WestLangley за вашу помощь.

Answer 2

Мой прецедент должен был отображать кольца вокруг Сатурна, используя радиальную текстуру. Следующий код представляет собой прямую выдержку, основанную на файле three.js r84.

var segs = 96; 
var ii = radius * 1.200; 
var oo = radius * 1.950; 

var geometry = new THREE.RingBufferGeometry(ii, oo, segs); 

var uvs = geometry.attributes.uv.array; 
// loop and initialization taken from RingBufferGeometry 
var phiSegments = geometry.parameters.phiSegments || 0; 
var thetaSegments = geometry.parameters.thetaSegments || 0; 
phiSegments = phiSegments !== undefined ? Math.max(1, phiSegments) : 1; 
thetaSegments = thetaSegments !== undefined ? Math.max(3, thetaSegments) : 8; 
for (var c = 0, j = 0; j <= phiSegments; j ++) { 
    for (var i = 0; i <= thetaSegments; i ++) { 
     uvs[c++] = i/thetaSegments, 
     uvs[c++] = j/phiSegments; 
    } 
}