Wie geclippte Flächen als feste Objekte gerendert werden

Question

In Three.js habe ich ein 3D-Objekt, bei dem ich lokale Schnittebenen verwende, um nur einen Teil des Objekts zu rendern.

Da 3D-Objekte jedoch "hohl" sind (was bedeutet, dass nur die äußere Oberfläche gerendert wird), können wir, wenn wir etwas von dieser Oberfläche abschneiden, das Objekt "sehen". Hier ist ein Beispiel, was ich meine, clipping a corner off a cube. Beachten Sie, wie wir die Rückseite der gegenüberliegenden Ecke sehen können.

Ich möchte das Aussehen des Objekts als solide geben. Basierend auf this issue scheint es, dass der beste Weg, dies zu erreichen, darin besteht, eine Oberfläche über dem ausgeschnittenen Bereich zu erzeugen, wodurch das Loch abgedeckt wird und das Objekt so erscheint, als wäre es nicht hohl.

Meine Frage ist, woher weiß ich, wo diese Oberfläche zu bauen? Bietet Three.js eine Möglichkeit, eine Liste von Scheitelpunkten zu erhalten, die sich zwischen einer Ebene und einer beliebigen Oberfläche schneiden? Wenn nicht, wie könnte ich dieses Problem selbst angehen?

Ich fand this question, aber der Autor hat nicht beschrieben, wie sie das Problem gelöst haben, das ich hier habe.

Answer 1

Sie möchten eine abgeschnittene Oberfläche so wiedergeben, als wäre sie ein Volumenkörper - d. H. Nicht hohl.

Sie können diesen Effekt mit MeshPhongMaterial - oder einem beliebigen three.js-Material - mit einem einfachen Hack zum Material-Shader erreichen.

Ersetzen Sie diese Zeile in /src/renderers/shaders/ShaderLib/meshphong_frag.glsl:

gl_FragColor = vec4(outgoingLight, diffuseColor.a); 

mit

if (gl_FrontFacing) { 

    gl_FragColor = vec4(outgoingLight, diffuseColor.a); 

} else { 

    gl_FragColor = diffuseColor; 

} 

Dies sollte ziemlich gut aussehen. Es wird benötigt material.side = THREE.DoubleSide;

three.js r.76

Answer 2

Ich machte eine THREE.SectionHelper Klasse, die interessant sein könnte, wenn Sie ein anderes Material/Farbe für das Innere des Netzes festlegen möchten, dass Sie Clipping. Überprüfen Sie a demo in this fiddle.

var sectionHelper = new THREE.SectionHelper(mesh, 0xffffff); 
scene.add(sectionHelper);