如何在three.js中创建完美的环形几何体？

Question

我需要在three.js中创建完美的环形几何体。我正在寻找像这样的东西：

我花费了一整天的时间来寻找如何做到这一点，但是我卡在了像这样的代码上：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
var controls = new THREE.OrbitControls( camera, renderer.domElement );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
ring = '';
var loader = new THREE.TextureLoader();
loader.load('img/water.jpg', function ( texture ) {
    var geometry = new THREE.TorusGeometry( 5, 1, 8, 1900 );
    ring = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({map: texture, wireframe: true}));
    scene.add(ring);
});

camera.position.z = 20;

var render = function () {
    requestAnimationFrame( render );
    ring.rotation.y = 0.4;

    renderer.render(scene,camera);
};

render();

编辑：

我的代码已经更改，现在看起来像这样：

            var container, stats;

        var camera, scene, renderer;

        var group;

        var targetRotation = 0;
        var targetRotationOnMouseDown = 0;

        var windowHalfX = window.innerWidth / 2;
        var windowHalfY = window.innerHeight / 2;

        init();
        animate();

        function init() {

            container = document.createElement( 'div' );
            document.body.appendChild( container );

            scene = new THREE.Scene();

            camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
            camera.position.set( 100, 350, 00 );
            scene.add( camera );

            var light = new THREE.PointLight( 0xffffff, 0.9 );
            camera.add( light );

            group = new THREE.Group();
            group.position.y = 0;
            scene.add( group );

            var loader = new THREE.TextureLoader();
            var texture = loader.load( "img/metal.png" );
            texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
            texture.repeat.set( 0.008, 0.008 );

            function addShape( shape, extrudeSettings, color, x, y, z, rx, ry, rz, s ) {

                // flat shape with texture
                // note: default UVs generated by ShapeGemoetry are simply the x- and y-coordinates of the vertices

                var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );

                var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { color: color } ) );
                mesh.position.set( x, y, z );
                mesh.rotation.set( rx, ry, rz );
                mesh.scale.set( s, s, s );
                group.add( mesh );

            }

            // Arc circle 1
            var x = 0, y = 0;
            var arcShape1 = new THREE.Shape();
            arcShape1.moveTo( 0, 0 );
            arcShape1.absarc( 10, 10, 11, 0, Math.PI*2, false );

            var holePath1 = new THREE.Path();
            holePath1.moveTo( 20, 10 );
            holePath1.absarc( 10, 10, 10, 0, Math.PI*2, true );
            arcShape1.holes.push( holePath1 );
            //

            // Arc circle 2
            var x = 0, y = 0;
            var arcShape2 = new THREE.Shape();
            arcShape2.moveTo( 0, 0 );
            arcShape2.absarc( 10, 10, 13, 0, Math.PI*2, false );

            var holePath2 = new THREE.Path();
            holePath2.moveTo( 25, 10 );
            holePath2.absarc( 10, 10, 12, 0, Math.PI*2, true );
            arcShape2.holes.push( holePath2 );
            //

            var extrudeSettings = { amount: 1.6, bevelEnabled: true, bevelSegments: 30, steps: 30, bevelSize: 0.3, bevelThickness: 1.5, curveSegments: 100 };

            // addShape( shape, color, x, y, z, rx, ry,rz, s );

            //addShape( heartShape,       extrudeSettings, 0xf00000,   60,  100, 0, 0, 0, Math.PI, 1 );
            addShape( arcShape1, extrudeSettings, 0xffc107,  -35, -30, -20, 0, 0, 0, 4 );
            addShape( arcShape2, extrudeSettings, 0xffc107,  -40, -22, -50, 0, 0.6, 0, 4 );

            //

            renderer = new THREE.WebGLRenderer( { antialias: true } );
            renderer.setClearColor( 0xf0f0f0 );
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            renderer.shadowMapEnabled = true;
            renderer.shadowMapType = THREE.PCFSoftShadowMap;
            group.castShadow = true;
            group.receiveShadow = false;

            container.appendChild( renderer.domElement );
            var controls = new THREE.OrbitControls( camera, renderer.domElement );
        renderer.setSize( window.innerWidth, window.innerHeight );

        }

        function animate() {

            requestAnimationFrame( animate );

            render();

        }

        function render() {

            renderer.render( scene, camera );

        }

结果如下所示：

现在的问题是：如何让戒指上的这条线消失，如何让我的戒指更加闪亮，如何使我的戒指在左右两侧更加“圆形”？

- szymeo

---

也许这个链接可以帮到你：http://stackoverflow.com/questions/11397545/extruding-with-three-js - guardabrazo

我已经尝试过了.. :/ - szymeo

你能详细说明一下你的代码出了什么问题吗？你原本期望的是什么，实际上又发生了什么？如果你遇到了异常，请在帖子中标明它发生的行数和异常详情。请编辑这些细节，否则我们可能无法提供帮助。 - Kyll

“完美环形几何体”应包含多少个多边形/顶点？ - Ramil Kudashev

Answer 1

应该可以正常工作。问题是在PI*2交汇处的斜角导致了“线”状物。您可以通过重叠曲线的两个边缘来解决问题。

        arcShape1.absarc( 10, 10, 11, 0, Math.PI*1.99, false );
        holePath1.absarc( 10, 10, 10, 0, Math.PI*2.01, true );

        arcShape2.absarc( 10, 10, 13, 0, Math.PI*1.99, false );
        holePath2.absarc( 10, 10, 12, 0, Math.PI*2.01, true );

! 请点击查看截图。我没有足够的声望在此处发布图片。

- jasonloj

---

“应该可以正常工作。” 如何以及为什么？请在您的回答中说明，伙计。 - Harshith Rai

Answer 2

我发现在不同的位置和颜色中添加更多的光源可以增加被感知的反射率和光泽，但前提是它是场景中唯一的物体。

- ttaylordev