3

WebGL を有効にした場合と無効にした場合のこのデモをご覧ください。

WebGL とキャンバス レンダリングを切り替えると (WebGL があるかどうかを JavaScript が検出すると自動的に行われます)、ワイヤーフレームのみの球体 (左側の最初のもの) が変化します。

WebGL が有効になっているため、球体の背面にあるワイヤーフレームも見ることができます (他の球体には不透明なマテリアルがあるため、他の球体では隠されている部分)。

WebGL が無効になっているため、透過性を理解できなくなります。

デモを準備していて、WebGL をサポートしていないブラウザーにサポートを提供したいと考えています。私の考えは完全に WebGL に基づいているため、透明性を確保することが重要です。私のプレゼンテーションには 6 面の立方体しかありません。古い CPU でさえ、透明なワイヤーフレームで表示するのに問題はないと思います。

three.js はこれをサポートしていますか? それを行う方法はありますか？キャンバス レンダリングでも機能するようにするには、どのようにマテリアルを設定すればよいですか?

私の主張をさらに証明するために、2 つ目のデモを示します。WebGL とキャンバスを切り替えるのと同じ問題。

現在のワイヤフレーム マテリアルは次のように宣言されます。

new THREE.MeshBasicMaterial( { color: 0x00ee00, wireframe: true, transparent: true } );

ただし、WebGL でのみ期待どおりに動作します。

ここでJsfiddle

読んでくれてありがとう！

ps Three.js で必要なことができない場合は、Three.js に代わるものを喜んで採用します。このデモを準備する必要がありますが、3D 立方体を回転させるのと同じくらい簡単であっても、自分でこれを行うための数学/幾何学の知識がありません。

webgl を使用:

ここに画像の説明を入力 ここに画像の説明を入力

キャンバス レンダーを使用:

ここに画像の説明を入力 ここに画像の説明を入力

4

1 に答える 1

10

を使用する場合に機能するトリックCanvasRendererは、同じ場所に2つの同一の立方体を作成することです.2つ目は裏返しです。便宜上、両方を親オブジェクトに追加できますが、必須ではありません。

var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x00ee00, wireframe: true, transparent: false, opacity: 1 } ); 

var wireframeMaterial2 = new THREE.MeshBasicMaterial( { color: 0x00ee00, wireframe: true, transparent: false, opacity: 1, side: THREE.BackSide } ); 

var cube = new THREE.Mesh( geometry, wireframeMaterial );
            parent.add( cube );

var cube2 = new THREE.Mesh( geometry, wireframeMaterial2 );
            parent.add( cube2 );

編集: 更新されたフィドル: http://jsfiddle.net/k0vcnkqh/

three.js r.70

于 2013-04-05T08:09:48.550 に答える