Flip normals in three.js on sphere

Question

Я искал вокруг и еще не нашел действительно хорошего ответа на мой вопрос. Дело в том, что у меня есть эта сфера .. просто базовая сфера, и я хочу чтобы перевернуть нормали, так что сфера получает вид «полый/резной эффект», а затем plater накладывает мои текстуры на «внутри» сферы. любые идеи о том, как перевернуть нормали?

Также .., если его невозможно сделать в 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();