用螺旋形包裹圆环

Question

我尝试使用three.js创建类似于磁带覆盖的呼啦圈的效果。

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