ThreeJS模型透明出現遮擋

前言

threejs中想實現模型模型透明，顯示里面模型的效果。

嘗試

首先肯定是拿兩個幾何體進行嘗試，其實只要在材質中開啟透明和設置透明度就好了，如果沒效果，建議更換材質試試。

var material = new THREE.MeshBasicMaterial({ transparent: true, opacity: 0.1 });

實踐

首先當然把最外層的正方體改為從外部導入的模型文件，顯然半透明的效果是有的，但同時會產生一些問題。

從不同方向觀察模型，會發現從背面是看不到里面物體的，通過查閱資料后，發現只要在材質上設置 depthWrite 為 false就可以了，當然也可以設置side屬性。

無side屬性

var material = new THREE.MeshBasicMaterial({ 
  transparent: true,
  opacity: 0.1,
  depthWrite: false 
});

有side屬性

var material = new THREE.MeshBasicMaterial({ 
  transparent: true,
  opacity: 0.1,
  depthWrite: false,
  side: THREE.DoubleSide
});

通過對比也看得出來，雖然現在從背面能看到里面的物體，但是感覺更像是遮擋面不見了，物體裸露出來了(有可能是我燈光照射的問題)。