我試圖創建一個「透明」的材料,它不呈現並在屏幕上留下一個空的alpha區域,以便您可以看到畫布後面的內容,但我也希望材質能夠接收陰影並仍然呈現他們。如何在Three.js中獲取仍然接收陰影的渲染材質?
我有一個實驗JSFiddle page這個確切的目的。
我只設法獲得半透明效果,但沒有正確處理陰影。在材質中看到的橙色實際上是渲染背後的橙色div。渲染需要在對象背後的黑色廣告牌保持背景黑色,並顯示我真正想要的東西。使用我的自定義材質渲染飛機,渲染器可以向目標添加一個Alpha,以便它可以在畫布後面顯示事物。我的目標是允許這一點,但在相同的材料上留下陰影,掩蓋背後的因素。
核心代碼允許效果如下圖所示:
var plane = new THREE.PlaneGeometry(10, 10, 1, 1);
var material = new THREE.MeshPhongMaterial({
color:'gray',
blending: THREE.NoBlending,
opacity: 0,
side: THREE.DoubleSide
});
我也試圖添加劑調合而成,但它並沒有實質性的影響。
我想知道是否需要使用簡單的着色器將高值更改爲alpha值並保留低值。
更新: 我有什麼,我要尋找一個here幾乎工作版本。畫龍點睛就是將陰影貼圖添加到對象以獲得我想要的效果。但是,我希望陰影遮擋場景背景。我打算混合CSS3D和WebGL,但寧願如果我能保持我的陰影。 (遺憾的是,我打算將CSS3D的內容轉換爲紋理/對象)。
我很高興/很榮幸能夠得到三個人的幫助。 –
哈哈!那有沒有做到這一點? – mrdoob
對不起,永遠不會迴應。暫時拋棄這個想法。決定我需要一個特殊的着色器來獲得我想要的確切效果。不過謝謝你的建議。它讓我最接近我想要的答案! –