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