Three.js - Geometria na wierzchu innego

Question

Czy w przypadku Three.js można wyświetlać siatkę zawsze wyświetlaną na górze sceny, nawet jeśli jej pozycja znajduje się za wszystkimi obiektami? Wprowadzam wybór lasso z siatką i muszę wyrenderować pole wyboru na górze reszty sceny.

Answer 1

Tak.

Pierwszy to zrobić:

renderer.autoClear = false; 

Następnie utworzyć drugą scenę, która zawiera tylko te obiekty, które mają być na szczycie. Następnie w renderowanie pętlę:

renderer.clear();      // clear buffers 
renderer.render(scene, camera);  // render scene 1 
renderer.clearDepth();    // clear depth buffer 
renderer.render(scene2, camera); // render scene 2 

---

EDIT: Innym rozwiązaniem jest mieć tylko jedną scenę, ale korzystać z tego wzoru:

mesh.renderOrder = 999; 
mesh.onBeforeRender = function(renderer) { renderer.clearDepth(); }; 

Jeżeli siatka ma pojedynczy materiał, to będzie renderuj "na wierzchu".

Three.js r.85

Answer 2

Jeśli chcesz uczynić tylko jedno oczko z przodu można również zarządzać poprzez ustawienie depthTest dla materiału tego obiektu false:

var onTopMaterial = new THREE.MeshStandardMaterial({ 
    color: 'red', 
    depthTest: false 
}); 

mesh.material = onTopMaterial; 

Sprawdź demonstation w this fiddle

---

Uwaga: Sprawdź, czy masz renderer.sortObjects ustawiono domyślną wartość true.