2009-07-17 3 views
2

Y a-t-il une bibliothèque JavaScript qui modélise 3D polyhedra en utilisant la balise canvas ou SVG? Dire que je voulais produire des rendus de Platonic solids, comment pourrais-je le faire mieux? FWIW, je ne suis concerné que par les navigateurs Web basés sur WebKit tels que Safari et Chrome.Utiliser JavaScript pour modéliser des polyèdres 3D

J'ai vu cette démo cool de comment rendre 3D triangles, mais comment puis-je l'étendre aux polyèdres avec un nombre arbitraire de côtés?

Répondre

4

Jetez un oeil à cette bibliothèque: SVG-VML-3D

Il utilise SVG et retombe à VML sur MSIE. Ils ont une démo avec des solides platoniques. Je n'ai pas de navigateur Webkit à portée de main, mais je présume qu'il devrait fonctionner aussi.

+0

Cela pourrait bien être le billet. Merci, Andrew! –

0

La plupart des bibliothèques 3D généralisent les triangles. Si vous voulez un polygone avec plus de 3 côtés, vous le subdivisez en triangles et dessinez ces triangles. Si vous êtes intéressé par les solides platoniques, alors vous allez avoir un temps assez facile, car vous pouvez facilement obtenir une triangluation de chaque face en faisant d'abord la moyenne des sommets de chaque face, puis en utilisant ce centre et deux adjacents sommets du visage pour vous donner une triangularisation.

+0

À vrai dire, je veux modéliser des polyèdres avec «n'importe quel» nombre de côtés (jusqu'à au moins 100). Je suis nouveau à la 3D, donc j'espérais qu'il y avait un lib où je peux juste dire, donnez-moi un polyèdre avec 17 côtés, s'il vous plaît. :-) –

+0

Je n'ai jamais rien vu de tel. Mais il n'y a que 5 solides platoniques. Pour les polyèdres arbitraires, vous n'obtiendrez rien d'aussi beau qu'un solide platonique. Vous pouvez lancer un certain nombre de points sur une sphère et les faire se pousser jusqu'à ce qu'ils se stabilisent, je suppose. – Nosredna

+0

Je me contenterais de chiffres pairs. Le point est, je veux obtenir des polyèdres avec autant de côtés que l'utilisateur demande. La solution SVG semble assez solide. –

1

Pas une réponse directe à votre question, mais vu que vous avez mentionné WebKit seulement, je pensais que je signalerais le nouveau support 3D CSS Transform qui a été récemment ajouté à webkit. Cela vous permet de faire ce que vous voulez sans utiliser de Javascript. Je n'ai pas vu d'exemple de polyèdres 3D, mais il existe des exemples de cubes, etc., par exemple here.

Il y a une démo légèrement plus complexe here qui a un anneau de rectangles. Pour un vrai goût de ce que vous pourriez faire (bien que cela utilise Javascript pour l'animation) - voir la démo Snow Stack.

+0

C'est intrigant. J'ai beaucoup expérimenté ces derniers temps avec les transformations 2D (http://segdeha.com/experiments/css-transitions/). Comment cela pourrait-il être appliqué à la construction de polyèdres avec un nombre arbitraire de côtés? –

+0

@Andrew: pass, je n'ai pas encore implémenté quoi que ce soit avec ça, j'en ai juste entendu parler récemment. Il est possible que vous deviez commencer par des carrés et les déformer en triangles (il semble que vous ayez accès à la matrice de transformation brute, donc cela devrait être possible). – DaveR

+0

J'aime cette idée. Devrait être très léger à mettre en œuvre (éventuellement tous les CSS). Si la solution SVG ci-dessus s'avère lourde, je vais poursuivre et bloguer. –

Questions connexes