three.js中的光滑环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

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

Answer 2

我发现在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(); 

如此看来它不支持现在:(

Answer 3

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