用螺旋包裹圓環

Question

我正在嘗試使用three.js創建類似於使用磁帶覆蓋的呼啦圈的效果。

三維模型應該看起來像下圖。

我可以創建使用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