javascript - 用螺旋线包裹圆环

Question

我正在尝试使用 Three.js 创建类似于用胶带覆盖的呼拉圈的效果。

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

您必须将纹理应用到无缝的圆环上才能实现该效果。纹理应该与此类似:

然后使用此代码模式:

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 );

三.js r.77