在three.js中的Smooth Ring 3D

Question

我想在ExtrudeGeometry的帮助下绘制一个环。

Ring3D = function(innerRadius, outerRadius, heigth, Segments) {

    var extrudeSettings = {
        amount: heigth,
        bevelEnabled: false,
        curveSegments: Segments
    };
    var arcShape = new THREE.Shape();
    arcShape.moveTo(outerRadius, 0);
    arcShape.absarc(0, 0, outerRadius, 0, Math.PI * 2, false);

    var holePath = new THREE.Path();
    holePath.moveTo(innerRadius, 0);
    holePath.absarc(0, 0, innerRadius, 0, Math.PI * 2, true);
    arcShape.holes.push(holePath);

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

    var material = new THREE.MeshPhongMaterial({
        color: 0x00ffff
    });

    var mesh = new THREE.Mesh(geometry, material);
    mesh.rotation.x = Math.PI / 2;
    mesh.position.y = heigth / 2;

    var object = new THREE.Object3D;
    object.add(mesh);

    return object;

}

结果图有明显的伤疤。圆筒和圆环这样的伤痕没有。如何摆脱它们？示例here。

geometry.computeVertexNormals();

Answer 1

        var shape = new THREE.Shape();
        shape.moveTo(0, 0);
        shape.lineTo(0, 10);
        shape.quadraticCurveTo(35, 30, 0, 50);
        shape.lineTo(0, 60);
        shape.quadraticCurveTo(48, 30, 0, 0);           

        var extrudeSettings = {
            amount : 20,
            steps : 10,
            bevelEnabled: false,
            curveSegments: 8
        };

        var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
        var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { color: '0x804000' ,transparent: true,opacity: 0.2} ) );
        scene.add( mesh );

Answer 2

您需要从几何图形中.computeVertexNormals()。但似乎这里解释了一些问题（解决方案）：https://github.com/mrdoob/three.js/issues/323。我不确定它是否适用于您的情况。

Answer 3

我在ExtrudeGeometry的代码中找到了注释：

this.computeFaceNormals();
// can't really use automatic vertex normals
// as then front and back sides get smoothed too
// should do separate smoothing just for sides
//this.computeVertexNormals();

所以现在似乎不支持:(