MODIFICA: sembra che la prossima versione di three.js (R71) avrà un modo più semplice per farlo, quindi se puoi usare il ramo dev (o semplicemente aspettare), puoi farlo molto più facilmente. Vedi questo post: three.js transparent object occlusion
mia risposta iniziale (senza utilizzare le nuove funzionalità di R71):
Penso che il modo migliore per farlo è (per evitare lavoro extra con la creazione di nuovo il rendering passa per esempio) per modificare il renderer WebGL (src/renderers/WebGLRenderer.js) e aggiungere il supporto per un nuovo tipo di oggetto, magari chiamandoli "occlusionObjects".
Se si guarda nel renderer, verranno visualizzati due elenchi di oggetti correnti, opaqueObjects e transparentObjects. Il renderer ordina gli oggetti renderizzabili in questi due elenchi, in modo che possa eseguire il rendering degli oggetti opachi per primi e quindi degli oggetti trasparenti dopo di essi. Quello che devi fare è archiviare tutti i tuoi nuovi oggetti nell'elenco di OcclusionObjects piuttosto che questi due. Vedrai che gli oggetti opachi e trasparenti sono ordinati in base alle loro proprietà materiali. Penso che qui potresti voler aggiungere una proprietà a un oggetto che vuoi essere un occlusore ("myObject.occluder = true", forse), e tirare fuori quegli oggetti.
Una volta visualizzate le tre liste, osservare cosa fa la funzione render() con questi elenchi di oggetti. Vedrete un paio di posti con le chiamate di rendering come questo:
renderObjects(opaqueObjects, camera, lights, fog, true, material);
aggiungere qualcosa di simile prima che la linea, per spegnere la scrittura in buffer del colore, rendono gli oggetti di occlusione nel buffer di profondità unica, e quindi attiva nuovamente il buffer dei colori prima di eseguire il rendering degli oggetti rimanenti.
context.colorMask(false, false, false, false);
renderObjects(occluderObjects, camera, lights, fog, true, material);
context.colorMask(true, true, true, true);
Avrete bisogno di farlo in un paio di posti, ma dovrebbe funzionare.
Ora è possibile contrassegnare qualsiasi oggetto nella scena come "occluder = true" e verranno visualizzati solo nel buffer di profondità, consentendo al video di mostrare e occludere qualsiasi oggetto opaco o trasparente reso dietro di essi.
Vedere http://stackoverflow.com/questions/28869268/three-js-transparent-object-occlusion. – WestLangley
Grazie @WestLangley: Ho aggiornato la mia risposta qui sotto per indicare qui. Non lo sapevo, perché non ho usato/seguendo la versione di sviluppo. Roba buona! –