スパイラルでトーラスを包み込む

Question

私は3つのjを使ってテープで覆われたフラフープに似た効果を作り出そうとしています。

3Dモデルは、以下のようなものになります。

私の周りにパンする能力をTorusGeometryを使用して3D空間内でフープを作成することができますが、私は第二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

トーラスにテクスチャを適用すると、シームレスのになります。テクスチャはこの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