2011-05-23 17 views
4

こんにちは私はインタラクティブな3D球体をブラウザでレンダリングしたいと思います。その上のテクスチャは世界地図になるので、基本的に地図を使ってどの方向にも回転できる地球儀を作ろうとしています。私はSVGを使用して2D画像をレンダリングするのには慣れていますが、SVGで3Dシェイプをレンダリングする方法はわかりません。 SVGで3Dシェイプをレンダリングすることはできますか?そうでない場合、WebGlがより良い選択肢ですか?SVGまたはWebGLを使用した3Dシェイプ

+1

'私はブラウザでインタラクティブ3D球をレンダリングしたいですか? - どのブラウザですか? – atlavis

+4

あなたはそれをサポートすることができる任意のブラウザhttp://kathack.com/ – Ibu

+2

@atlavisを依頼しました.Cake – alter

答えて

6

実装を少し抽象化したthree.jsをご覧ください(WebGL/SVG/Canvasバックエンドに付属)。

SVGは2Dグラフィックス形式ですが、3D図形を2次元に投影することができます.3DオブジェクトをSVGでレンダリングすることができます。これはちょっとした作業です。

+0

"SVGは2Dグラフィックス形式ですが、2D図形に3D図形を投影できます。"私は同意しますが、インタラクティブにすることは可能ですか?私はsvgで作成する3次元球を回転できますか? – alter

+3

svg内の任意のシェイプはインタラクティブにできますが、SVG自体には、特定のシェイプが3Dオブジェクトを表現しているという手がかりがありません。簡単な例(マウスオーバーハンドラを備えた3Dキューブ):http://apike.ca/prog_svg_threed.html –

4

SVGを使用する場合、シェーディングが問題になります。適切なシェーディングは、SVGでは実際には不可能ですが、いくつかの選択された状況を偽装することができるかもしれません。 3Dの場合は、モデルにダースン以上のポリゴンがある場合は、必ずWebGLを使用してください。

+0

これは私のためにwebGLをより良い解決策にしてくれる重要なポイントですが、*唯一の解決策です。たとえあなたがそれを一緒にハックすることができたとしても、あなたはwebGLとのマッチを作るのに費やす余分な時間よりも、svgの中で、ちょっとレゴ以外のように見えるようにします(クリッピングなど)インタラクティブ性のためのSVG。 –

+0

@ posfan12私は質問の助けを探しています。 SOを検索すると、あなたはSVGグラフィックのシェーディングに関する意見を述べる唯一の人物です。 http://stackoverflow.com/questions/13905255/how-to-change-color-of-a-composite-svg-ojectをご覧ください。 –

1

あなたは突起がすべてのポイントを変換する必要があります 使用することをこれは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

関連する問題