[SRC] Dessin et animation 3D en CSS

**circular17** · 07/07/2009, 13h25

Bonjour,

J'ai pris le temps récemment de paufiner une librairie de dessin en Javascript utilisant le CSS uniquement pour dessiner des triangles. Je vous invite à voir le résultat et à me proposer des améliorations !

Adresse :
http://consume.free.fr/prog/js3d/

**phfle1** · 07/07/2009, 22h24

Malgré les problèmes de fluidité, je suis étonnement surpris.

Good job!

**circular17** · 09/07/2009, 13h37

Merci

Effectivement, il y a des ralentissements. C'est dû au fait que quand il y a des diagonales à tracer, on ne peut pas le faire avec quelques triangles, il faut en faire toute une série le long de la diagonale. Je n'ai pas trouvé de solution à ce problème.

**circular17** · 17/07/2009, 15h03

J'ai limité les problèmes de ralentissement. Cela ne "coince" presque plus. Il reste juste encore un peu de paufinage à faire (jonctions des contours avec Opera et IE, et jonctions des bords lisses avec Chrome et Firefox).

**Auteur** · 18/07/2009, 14h04

j'en reste bouche bée....

**circular17** · 21/07/2009, 13h07

Merci

**danielhagnoul** · 22/07/2009, 00h50

Bonsoir.

Très fluide avec Chrome.

La représentation graphique d'équations est très bien également.

On peut utiliser les codes ?

**circular17** · 25/07/2009, 23h51

Envoyé par danielhagnoul

On peut utiliser les codes ?

Oui, j'en serais très content. Je souhaiterais juste que vous le mentionnez par exemple dans cet article si vous réalisez quelque chose de joli à partir de ce code avec un lien pour qu'on puisse aussi voir.

La représentation graphique d'équations est très bien également.

Puisque cela t'intéresse, je l'ai paufinée afin d'enlever qq artéfacts. Maintenant, le rendu est parfait dans tous les cas, enfin je crois. Sinon, tu peux faire varier la taille de pixels du graph dans le code javascript (constantes sizex et sizey)

**Sergejack** · 30/07/2009, 14h43

C'est sympa.

Mais comment tu fais pour dessinner un triangle ?

**circular17** · 03/08/2009, 14h30

J'ai rajouté des modèles 3d dont le robot qui marche de http://gunnm.is.free.fr.

Envoyé par Sergejack

Mais comment tu fais pour dessinner un triangle ?

Avec des styles CSS appliqués à des DIV. Si tu mets 3 bords en invisible, il te reste un trapèze, et avec ça tu peux faire des triangles rectangles alignés sur le quadrillage des pixels.

**Sergejack** · 05/08/2009, 14h00

Je ne vois pas comment faire n'importe quel triangle avec ça.

Ici, par exemple je ne vois pas comment avec des triangles rectangles (angle rectangle formé sur la vertical et l'horizontale) je pourrais finir la forme.

Y a quelque chose que je n'aurais pas bien compris ?

**circular17** · 05/08/2009, 21h26

C'est un cas justement où il y a un ralentissement parce que pour dessiner le triangle en question, il faut utiliser une suite de triangles de plus en plus petits, et quand ils sont trop petits, finir le remplissage avec une série de lignes horizontales.

**kimjoa** · 06/08/2009, 03h39

ouhaou !! le choc en voyant la démo

après réflexion rapide , je vois pas à quoi ton script peux servir, on ne peux pas mettre du texte , ni d'image, de plus on atteint vite le nombre maxi de polygone sur une page ...

tu connais o3d ??

le travaille que tu as réalisé est sans doute excellent (hors de mes compétence),mais perso, étant donnée le mal que tu t'es données , et le peu de d'utilisation possible (pour le moment ? ), j'aurais fait la même chose, mais avec les css3... ils sont pas pour bientôt d'actualité, mais les possibilités sont plus grande... faire des div en triangle, des dégradées, des rotations ect ...
en plus , si le travaille en css3 est aussi impressionnant que sans, tu pourrais d'une te faire connaitre, mais surtout pousser le boulet qu'est ie, à intégrer les css3 et respecter les normes ...

je connais pas bien les autre scripts de 3d en js, utilises tu les même base que les autres pour dessiner des triangles ?

bonne continuation a toi !!

**circular17** · 07/08/2009, 14h05

Envoyé par kimjoa

ouhaou !! le choc en voyant la démo

Choc positif je souhaite.

après réflexion rapide , je vois pas à quoi ton script peux servir, on ne peux pas mettre du texte , ni d'image, de plus on atteint vite le nombre maxi de polygone sur une page ...

C'est vrai. On pourrait rajouter du texte et des images mais seulement en changer la taille et pas effectuer de rotations. Donc on ne pourrait pas les plaquer sur les faces.

tu connais o3d ??

Je ne connaissais pas. Ca à l'air pas mal, mais nécessite un plugin.

j'aurais fait la même chose, mais avec les css3... ils sont pas pour bientôt d'actualité, mais les possibilités sont plus grande... faire des div en triangle...

Avec quels code html peut-on faire un triangle en css3 ?

en plus , si le travaille en css3 est aussi impressionnant que sans, tu pourrais d'une te faire connaitre, mais surtout pousser le boulet qu'est ie, à intégrer les css3 et respecter les normes ...

Tu es très amibitieux

je connais pas bien les autre scripts de 3d en js, utilises tu les même base que les autres pour dessiner des triangles ?

Ben je ne crois pas qu'il y a d'autre moyen que d'utiliser les bords CSS, ou alors de tracer d'innombrables div rectangulaires ou horizontaux.

bonne continuation a toi !!

Merci.

**kimjoa** · 07/08/2009, 16h55

la propriete css3 est transform avec un scale , mais en faite meme pas necessaire , etant donne que l on peut faire des parralepipede , y a plein de video css3 montrant l usage de la 3d et meme un projet de webkit de l integre ...

bye