こんにちは私はインタラクティブな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. Unity WebGLを使用したKii認証を使用したシステムスレッディングエラー
- 3. 非長方形のキャンバスまたはSVGシェイプの背景アニメーション?
- 4. 3D WebGLコンテンツなしのイオニックスクリーンショット
- 5. Quartz(iOS)を使用したシェイプ変換
- 6. WebGL/ThreeJSを使用したHololensアプリケーション
- 7. WebGLレンダラーを使用してthree.jsでsvgを表示
- 8. SVGのシェイプ継承
- 9. スケールイン&センタSVGのシェイプ
- 10. WebGLクロムを更新した後は使用できません
- 11. ChromeでWebGLでテクスチャアトラスを使用した人はいますか?
- 12. PythonまたはJavaScriptを使用したインタラクティブな3Dグラフィック
- 13. Helix Toolkitを使用して単純な3Dシェイプをアニメーション化する方法は?
- 14. SVGシェイプとクリップパスでトランスフォームアニメーションを使用する際の問題
- 15. Windowsでは、WebGLはDirectX RuntimeまたはOpenGLランタイムを使用しますか?
- 16. SharpDXを使用した3Dエンジン
- 17. matplotlibを使用した3Dアニメーション
- 18. 3D座標を使用したSCNShape
- 19. ステレオカメラを使用した3D再構成
- 20. pythonを使用した3Dプロットのイメージオーバーレイ
- 21. Rを使用した3D視覚化
- 22. Three.jsを使用した3Dインタラクティブマップ
- 23. Kinectを使用した3Dオブジェクトトラッキング検出
- 24. iOSでGLKitを使用して透明で3Dシェイプをレンダリングする方法
- 25. SVGを使用したWebkitマスク
- 26. ストロークプロパティを使用したSVGマスク
- 27. SVGタグのみを使用したドーナツチャート
- 28. CSSを使用したSVGのアニメーション
- 29. JavaScriptを使用したSVGパスのクリッピング
- 30. Illustratorを使用した透明なSVG
'私はブラウザでインタラクティブ3D球をレンダリングしたいですか? - どのブラウザですか? – atlavis
あなたはそれをサポートすることができる任意のブラウザhttp://kathack.com/ – Ibu
@atlavisを依頼しました.Cake – alter