Three.jsの透過処理でつまずいた点

半透明な板で挟んだのに中身が見えない

外側のモデル（壁）はtransparent=true
内側のモデル（蝶）はtransparent=false
レンダリングのQueueでtransparent=falseが先に描画されるので、蝶だけは透けずに表示される。

位置がかぶるとうまくレンダリングされない

上の例で全てのモデルをposition.set(0,0,0)としていたところ、片方の壁が透過されない状態に。
https://mo49.github.io/qiita/20160908/opacity.html

これを解決するために片方の壁の位置を0.1ずらしてあげることで、両方の壁が透過されるようになった。
https://mo49.github.io/qiita/20160908/opacity.html

参考
JSONモデルを透過させた際に表示に差異がある

奥にあるモデルが手前のモデルを上書きしてしまう

depthTest = false;

depthTestにfalseを設定すると、奥の物体が手前の物体を上書きするのを防ぐ「陰面処理」が無効になる

参考
多彩な表現力のWebGLを扱いやすくする「Three.js」 (3/5)