three.jsで、影を受け取ることができる透明/不可視の平面を作成することは可能ですか? 私の目的は、背景なしで 3D キャンバスにオブジェクトを描画することです (したがって、キャンバス要素の背後に Web ページが表示されます)。オブジェクトが背景に影を落とすようにしたいのですが、目に見えない平面を作ることができれば、ウェブページの背景がまだ見えると思いました。平面に影が落ちて、Web ページに影ができたように見えます。現時点では、不透明度 0.5 (または同等) の白い平面を作成できますが、この方法では平面が表示されます。理想的には、平面は完全に見えないようにする必要があります (影を除く)。
編集:私は例を作成しました(これに基づいて): http://jsfiddle.net/s5YGu/2/
ここでは不透明度を 0.5 にしていますが、平面が見えます。不透明度を 0 に設定すると、平面全体と影が消えます。
基本的なシェーダーをハッキングしてこの作業を行いました。シェーダーコードの作業はhttp://pastie.org/5088640です
opacity: 0.1 のように、AFAIK に欠点はありません。
はい、必要な効果を得ることができます。少なくとも私のマシンではかなり良いように見えます。:-)
ここにフィドルがあります：http://jsfiddle.net/ZXdV3/25/
いくつかの問題があります。まず、alpha: trueレンダラー コンストラクターの引数を設定する必要があります。
2 つ目は、平面を完全に透明にしたいということですがmaterial.opacity = 0.1、 かそこらで妥協する必要があります。
第 3 に、Web ページの上にキャンバスを配置していて、Web ページをインタラクティブにしたい場合は、キャンバスでポインター イベントを抑制する必要があります (ただし、IE がこれをサポートしているかどうかはわかりません) container.style.pointerEvents = 'none'。
three.js r.67