翻轉球體上的three.js法線

Question

我一直在四處搜尋，還沒有找到任何真正好的答案，我的問題呢.. 事情是，我有這個球體..只是一個基本的球體，我想翻轉法線以便球體獲得某種「空心/雕刻效果」，然後將我的紋理應用到球體的「內部」。關於如何翻轉法線的任何想法？

另外..如果它不可能在three.js中做到這一點..是否有可能導入一個模型，其中法線已翻轉並獲得我正在尋找的效果？

Answer 1

在爲球體創建材質時，請指定{side：THREE.DoubleSide}。這將使臉部從雙方都可見。

您也可以在創建材料後隨時更改它。

Answer 2

您可以通過顛倒臉部的順序來翻轉幾何中的法線。然後你必須修復UV。

for (var i = 0; i < geometry.faces.length; i ++) { 

    var face = geometry.faces[ i ]; 
    var temp = face.a; 
    face.a = face.c; 
    face.c = temp; 

} 

geometry.computeFaceNormals(); 
geometry.computeVertexNormals(); 

var faceVertexUvs = geometry.faceVertexUvs[ 0 ]; 
for (var i = 0; i < faceVertexUvs.length; i ++) { 

    var temp = faceVertexUvs[ i ][ 0 ]; 
    faceVertexUvs[ i ][ 0 ] = faceVertexUvs[ i ][ 2 ]; 
    faceVertexUvs[ i ][ 2 ] = temp; 

} 

但是，你可以通過簡單的設置Material.side = THREE.BackSide，或Material.side = THREE.DoubleSide同樣的效果。

無論哪種情況，紋理都會翻轉。您可以預先翻轉紋理，也可以在three.js之外創建模型並導入它。

three.js所r.65

Answer 3

另一種方法是簡單地讓你的對象的幾何體動態手動翻轉法線。

mesh.geometry.dynamic = true 
mesh.geometry.__dirtyVertices = true; 
mesh.geometry.__dirtyNormals = true; 

mesh.flipSided = true; 

//flip every vertex normal in mesh by multiplying normal by -1 
for(var i = 0; i<mesh.geometry.faces.length; i++) { 
    mesh.geometry.faces[i].normal.x = -1*mesh.geometry.faces[i].normal.x; 
    mesh.geometry.faces[i].normal.y = -1*mesh.geometry.faces[i].normal.y; 
    mesh.geometry.faces[i].normal.z = -1*mesh.geometry.faces[i].normal.z; 
} 

mesh.geometry.computeVertexNormals(); 
mesh.geometry.computeFaceNormals();