こんにちは私はインタラクティブな3D球体をブラウザでレンダリングしたいと思います。その上のテクスチャは世界地図になるので、基本的に地図を使ってどの方向にも回転できる地球儀を作ろうとしています。私はSVGを使用して2D画像をレンダリングするのには慣れていますが、SVGで3Dシェイプをレンダリングする方法はわかりません。 SVGで3Dシェイプをレンダリングすることはできますか?そうでない場合、WebGlがより良い選択肢ですか?SVGまたはWebGLを使用した3Dシェイプ
答えて
WebGLはパフォーマンスのために最善の策です。 http://www.chromeexperiments.com/globe(http://data-arts.appspot.com/globe-search参照)のようなデモを利用することができます。 http://www.chromeexperiments.comには、その他の地球儀のデモもあります。
これは最適な解決策です。かなりのコードといくつかのOpenGL/GLSL /数学知識が必要です。 – Artefact2
実装を少し抽象化したthree.jsをご覧ください(WebGL/SVG/Canvasバックエンドに付属)。
SVGは2Dグラフィックス形式ですが、3D図形を2次元に投影することができます.3DオブジェクトをSVGでレンダリングすることができます。これはちょっとした作業です。
"SVGは2Dグラフィックス形式ですが、2D図形に3D図形を投影できます。"私は同意しますが、インタラクティブにすることは可能ですか?私はsvgで作成する3次元球を回転できますか? – alter
svg内の任意のシェイプはインタラクティブにできますが、SVG自体には、特定のシェイプが3Dオブジェクトを表現しているという手がかりがありません。簡単な例(マウスオーバーハンドラを備えた3Dキューブ):http://apike.ca/prog_svg_threed.html –
SVGを使用する場合、シェーディングが問題になります。適切なシェーディングは、SVGでは実際には不可能ですが、いくつかの選択された状況を偽装することができるかもしれません。 3Dの場合は、モデルにダースン以上のポリゴンがある場合は、必ずWebGLを使用してください。
これは私のためにwebGLをより良い解決策にしてくれる重要なポイントですが、*唯一の解決策です。たとえあなたがそれを一緒にハックすることができたとしても、あなたはwebGLとのマッチを作るのに費やす余分な時間よりも、svgの中で、ちょっとレゴ以外のように見えるようにします(クリッピングなど)インタラクティブ性のためのSVG。 –
@ posfan12私は質問の助けを探しています。 SOを検索すると、あなたはSVGグラフィックのシェーディングに関する意見を述べる唯一の人物です。 http://stackoverflow.com/questions/13905255/how-to-change-color-of-a-composite-svg-ojectをご覧ください。 –
あなたは突起がすべてのポイントを変換する必要があります 使用することをこれはPoint3Dの中のPoint2D(x、y)は(x、y、z)を変更するには:
// Language Javascript
// object Point
function Point(x,y,z){
this.x = x;
this.y = y;
this.z = z;
}
// Projection convert point 2D in 3D
function ProjectionPoint(point){
if (!(point instanceof Point))
throw new TypeError("ProjectionPoint: incorrect type parameter");
return { x: (point.x<<8)/(point.z+Zorig)+Xorig,
y: (point.y<<8)/(point.z+Zorig)+Yorig,
z:point.z }
}
を確認してください、あなたは下のあなたの原産地ポイントを定義しています変数Xorig、Yorig、Zorig
- 1. WebGL Bike Configurator用iPhone 3Dエンジン
- 2. Quartz(iOS)を使用したシェイプ変換
- 3. SVGのシェイプ継承
- 4. WebGLレンダラーを使用してthree.jsでsvgを表示
- 5. ChromeでWebGLでテクスチャアトラスを使用した人はいますか?
- 6. Windowsでは、WebGLはDirectX RuntimeまたはOpenGLランタイムを使用しますか?
- 7. Illustratorを使用した透明なSVG
- 8. SVGを使用したWebkitマスク
- 9. HTMLボタンを使用したSVGアニメーション
- 10. pythonを使用した3Dプロットのイメージオーバーレイ
- 11. Rを使用した3D視覚化
- 12. iOSでGLKitを使用して透明で3Dシェイプをレンダリングする方法
- 13. WebGLで3Dモデルをテクスチャリングする方法は?あなたはWebGLの中で3Dモデルをテクスチャにはどうすればよい
- 14. html5でオブジェクトを整理するthree.jsを使用したwebglキャンバスアニメーション
- 15. アンドロイドはSVGまたはTiny SVGをサポートしていますか?
- 16. webGLライブラリを使用したデータの可視化とデータ解析?
- 17. java3dを使用してシェイプ上にシェイプを構築する
- 18. SVG:アトリビュートまたはCSSを使用してスタイルを設定しますか?
- 19. KMZ/KML 3DオブジェクトのHTML5/JavaScript/WebGLビューア?
- 20. SVG:テキスト内のテキスト(またはCSSを使用)
- 21. iosアプリケーションでsvgまたはフォントアイコンを使用
- 22. Direct3DまたはOpenGLアプリケーション内でステージ3Dを使用する
- 23. Raphael/svgでシェイプの一部を操作する方法は?
- 24. html5と(キャンバスまたはsvg)を使用してグリッドを描画する方法
- 25. matplotlibを使った3Dグラフプロット
- 26. SVG - ジェットカラースキームを使用した塗りつぶしの長方形
- 27. アニメーションSVGまたはCanvas?
- 28. JOGLは、私は次のコードを使用してJOGLで3Dキューブを作成した3Dキューブ
- 29. AxiomまたはWPF 3D?
- 30. SVGシェイプで画像を伸ばして境界線を埋める方法は?
'私はブラウザでインタラクティブ3D球をレンダリングしたいですか? - どのブラウザですか? – atlavis
あなたはそれをサポートすることができる任意のブラウザhttp://kathack.com/ – Ibu
@atlavisを依頼しました.Cake – alter