Обертывание тора со спиралью

Question

Я пытаюсь создать эффект, похожий на обруч обруча, покрытый лентой, используя three.js.

Эта 3d модель должна выглядеть примерно так, как показано ниже.

Я могу создать обруча в 3D пространстве, используя TorusGeometry с возможностью панорамирования вокруг, но я не смог решить, как получить второй TorusGeometry разбить на разделы.

Каков наилучший способ создания этого эффекта?

// hoop 
hoop = new THREE.TorusGeometry(20, .5, 100, 50); 
var hoopMaterial = new THREE.MeshPhongMaterial({ 
    ambient: 0xffffff, 
    color: 0x028fde, 
    specular: 0x555555, 
    shininess: 0 
}); 
hoopMesh = new THREE.Mesh(hoop, hoopMaterial); 
hoopMesh.position.z = 0; 
scene.add(hoopMesh); 

hoopTape1 = new THREE.TorusGeometry(20.1, .6, 0, 50); 
var hoopTapeMaterial = new THREE.MeshPhongMaterial({ 
    ambient: 0xffffff, 
    color: 0xDE5102, 
    specular: 0x555555, 
    shininess: 0 
}); 
hoopTape1Mesh = new THREE.Mesh(hoopTape1, hoopTapeMaterial); 
hoopMesh.position.z = 0; 
scene.add(hoopTape1Mesh); 

jsfiddle с действующим рабочим кодом.

Answer 1

Для достижения этого эффекта вам необходимо нанести текстуру на ваш тор, то есть .. Текстура должна быть похожа на это:

Затем используйте этот код шаблона:

var geometry = new THREE.TorusBufferGeometry(6, 0.4, 16, 64); 

var loader = new THREE.TextureLoader(); 
var texture = loader.load('stripe.jpg', function (texture) { 
    texture.wrapS = texture.wrapT = THREE.RepeatWrapping; 
    texture.repeat.set(16, 0.5); // or whatever you like 
    render(); 
}); 

var material = new THREE.MeshPhongMaterial({ 
    color: 0x998877, 
    specular: 0x050505, 
    shininess: 50, 
    map: texture 
}); 

var mesh = new THREE.Mesh(geometry, material); 
scene.add(mesh); 

Three.js R.77