11
votes

Formes 3D utilisant SVG ou WebGL

Bonjour, je veux rendre une sphère 3D interactive dans le navigateur. La texture sur elle sera d'une carte du monde, donc essentiellement, j'essaie de créer un globe qui est rotatif dans n'importe quelle direction à l'aide de la carte. Je suis à l'aise pour rendant les images 2D en utilisant SVG mais je ne sais pas comment rendant des formes 3D dans SVG. Est-il possible de rendre une forme 3D en SVG, si oui, comment? Sinon, webgl est une meilleure option?


3 commentaires

Je veux rendre une sphère 3D interactive dans le navigateur - quel navigateur?


Vous avez demandé cela Kathack.com


@atlavis, n'importe quel navigateur pouvant supporter la solution.common


4 Réponses :


9
votes

Jetez un coup d'œil à trois.js qui résume un bit un peu (livré avec webgl / Backends svg / canvas).

SVG est un format graphique vectoriel 2D, mais vous pouvez projeter des formes 3D sur 2D, il est donc possible de rendre des objets 3D avec SVG, il est un peu de travail (mieux à gauche aux bibliothèques JavaScript).


2 commentaires

"SVG est un format graphique vectoriel 2D, mais vous pouvez projeter des formes 3D sur 2D". Je suis d'accord mais est-il possible de leur faire interactif? Puis-je faire pivoter la sphère 3D que je crée dans SVG?


Toute forme dans SVG peut être interactive, mais SVG elle-même n'a aucune idée que certaines formes représentent un objet 3D. Voici un exemple simple (cube 3D avec des gestionnaires de mouseover): apke.ca/prog_svg_threed.html



10
votes

Webgl est votre meilleur pari en raison de la performance. Vous pourrez peut-être exploiter (ou au moins apprendre de) démos comme http://www.chromeeilexperiments.com/globe < / a> (voir http://data-arkspot.com/globe-Search). Il existe également d'autres démos globes à http://www.chromeeilexperiments.com .


1 commentaires

C'est la meilleure solution. Cela nécessite beaucoup de code et de certaines connaissances OpenGL / GLSL / mathématiques.



4
votes

Si vous utilisez SVG, alors ombrage va être un problème. L'ombrage correct n'est pas vraiment possible dans SVG, même si vous pourrez peut-être simuler quelques circonstances de sélection. Pour 3D utilisez définitivement Webgl si vous avez plus d'une douzaine de polygones dans le modèle.


2 commentaires

Ceci est un tel point clé que pour moi, il fait que WebGL n'est pas la meilleure solution, mais la solution . Même si vous parvenez à pirater ensemble, vous passerez beaucoup plus de temps à le rendre compte même légèrement non lego - comme (sans parler du travail correctement - Coupure, etc.) dans SVG, que vous passez le temps supplémentaire que vous passez à faire du match WebGL SVG pour l'interactivité.


@ Posfan12 Je cherche de l'aide pour une question. Vous recherchez donc, vous êtes la seule personne à offrir une opinion sur l'ombrage Graphics SVG. S'il vous plaît jeter un oeil à Stackoverflow.com/Questtions/13905255/...



2
votes

Vous devez transformer tout point avec une projection Utilisez ceci pour modifier Point2D (x, Y) dans point3d (x, y, z): xxx

Assurez-vous que vous avez défini votre point d'origine sous la variable Xorig, Yorig, Zorig


0 commentaires