background preloader

Canvas 3D (WebGL) plus facile avec Three.js

Canvas 3D (WebGL) plus facile avec Three.js
Nous avons tous déjà vu des sites de grandes marques nous en mettant plein la vue avec des animations 3D interactives, ou des démonstrations technologiques qui font rêver. On pense ici à quelques berlines allemandes parfaitement modélisées qu’il est possible d’inspecter sous tous ses angles avec un simple mouvement de la souris... Bien souvent développées en Flash avec la librairie Papervision3D ces animations en jettent un max, mais restent dépendantes du plug-in d'Adobe qui est de moins en moins populaire et "incompatible" tablette et smartphone. Aujourd’hui la tendance est au HTML5 et CSS3, parsemé d’un peu de JavaScript. Ô chance, le W3C et ses contributeurs ont justement prévu de passer par Canvas (qui permet déjà de dessiner dans une page web en 2D) pour exploiter une scène 3D avec les standards du web. Comment et pour qui ? Pour ceux qui ne le savent pas, il existe deux composants HTML5 pour dessiner : La librairie Three.js <! Démonstration “Tout ça pour ça” me direz-vous ? Et voilà ! Related:  Javascript et 3DWebdesignAPPRENDRE

three.js - Javascript 3D library Unheap - A tidy repository of jQuery plugins OnePageScroll.js: - Parallax Tutorials On the 9th of September, 2013, Apple announced 2 new versions of the iPhone called the iPhone 5S and the iPhone 5C. Like all new product announcements these days, the releases were accompanied with beautiful websites to showcase their products. Today, I have decided to build a simple plugin called One Page Scroll that will let you quickly create a similar website to the iPhone 5S and iPhone 5c page, with one JS call. Note: This plugin has been tested on Windows’, OSX’s, iOS’s, Android’s Chrome, Firefox, Safari and IE10. Using OnePageScroll.js in Website Design How Does It Work? Basically, the plugin will detect your mouse wheel and swipe gestures (Thanks to Eike Send's jQuery Swipe Events) and determine which way the page should scroll. You can see this in action in demos 2 and 3 where all you need to change is one line of CSS code and the animation will change accordingly. How-Tos Now, put the function call inside a document ready like this: For Further Customization Conclusion

Simplifiez vos développements JavaScript avec jQuery Si vous avez déjà programmé en JavaScript, vous savez que ce langage est puissant, mais aussi « verbeux » et souvent assez complexe à mettre en œuvre. Si vous voulez accéder à toute la puissance de JavaScript en utilisant des instructions simples, logiques, faciles à comprendre et à maintenir, jQuery est vraiment fait pour vous ! Avec ce cours, je vous propose de découvrir les multiples facettes du framework jQuery. De la sélection d'éléments à la manipulation du DOM, en passant par l'animation, les requêtes AJAX, l'utilisation et la création de plugins, la création de jeux et bien d'autres choses encore ! N'ayez crainte, votre apprentissage se fera en douceur et de très nombreux exemples de code documentés viendront consolider vos connaissances. Si vous lisez ces lignes, c'est parce que vous avez décidé d'aller plus loin dans vos développements Web.

WebGL Un article de Wikipédia, l'encyclopédie libre. Fonctionnement[modifier | modifier le code] WebGL permet d'afficher, de créer et de gérer dynamiquement des éléments graphiques complexes en 3D dans la fenêtre du navigateur web d'un client. Il est actuellement implémenté dans la plupart des grands navigateurs modernes, mais cette implémentation est récente, d'où le fait que cette technologie reste assez méconnue du grand public. Lorsqu’un élément graphique de type WebGL est inclus dans une page web, le navigateur exécute un programme en JavaScript utilisant l'interface WebGL. Implémentations[modifier | modifier le code] Si, en septembre 2009, aucun navigateur web ne permettait l'affichage 3D directement dans le navigateur sans greffon, ça n'est plus le cas aujourd'hui[3]: Limitations[modifier | modifier le code] WebGL est basé sur OpenGL ES 2.0 (OpenGL for Embedded Systems), une version d'OpenGL destinée aux systèmes embarqués. Problèmes de jeunesse[modifier | modifier le code]

Introduction au jargon de la 3D et à WebGL Le monde de la 3D suscite souvent l’admiration et la curiosité des gens. Pourtant, lorsque l’on souhaite se lancer dans l’aventure, on a l’impression que ce monde nous reste fermé et obscur. À vrai dire, les spécialistes de la 3D forment une sorte de caste. Et pour rentrer dans cette caste, il faut souvent avoir été initié par l’un d’entre eux. C’est vraiment la désagréable sensation et frustration que j’ai eu pendant des années. Les bases de la 3D La première difficulté que vous risquez de rencontrer est le jargon. Commençons par comprendre comment on modélise un objet 3D. Ce mesh est constitué à partir d’un nuage de points. Prenons l’exemple du fameux cube pour illustrer cela. Tout cela est bien beau, mais comment maintenant retranscrire cette réalité 3D vivant dans le ventre de votre ordinateur vers la 2D désespérément plate de votre écran ? Pour le comprendre, il faut simplement vous imaginer comme étant un réalisateur du cinéma. Voici le processus que nous opérons alors :

How to Create a Circular Progress Button A tutorial on how to implement the circular progress button concept by Colin Garven. We are using the SVG line drawing animation technique as described by Jake Archibald to animate the circular progress and provide a success and error state to indicate the final status. View demo Download source Today we are going to show you how to implement a nifty progress button concept. There are quite some possibilities for creating this button and the effect. Note that animating SVGs can be problematic for some browsers so it might not work everywhere as expected. So, let’s get started! The Master plan If you have carefully observed Colin’s Dribbble shot, you might have noticed that we’ll need to take care of several states of the button. When we click on the button (in order to, for example, submit a form), we want to fade out the text, decrease the button’s width to become a circle, make the border thicker and start a progress animation on the border. The Markup The CSS …by setting the opacity to 0:

Le SVG - SVG Animation It is possible to animate the shapes in an SVG image. There are several different ways to animate SVG shapes. In this text I will go through the various possibilities. SVG Animation Example Here is a simple SVG animation example: Notice how the <rect> element has a <animateTransform> element nested inside it. Here is the resulting SVG animation: Overview of Animation Options Animation is done by manipulating the attributes of shapes over time. Each of these SVG animation elements sets or animates different aspects of SVG shapes. set The set element is the simplest of the SVG animation elements. Here is a <set> element example: Notice the <set> element nested inside the circle element. The <set> element sets the value of an attribute at a certain time. The example above sets the attribute r to 100 after 5 seconds. attributeType The previous example also had an attributeType attribute inside the <set> element. You can also animate CSS properties of a shape. animate animateTransform animateMotion

Algorithmique pour l'apprenti programmeur Vous venez d'apprendre les bases d'un langage de programmation ? Vous vous êtes peut-être rendu compte que parfois, en modifiant un peu votre programme, vous pouvez obtenir le même résultat mais 2, 10 ou 1000 fois plus vite ? De telles améliorations ne sont pas le fruit du hasard, ni même dues à une augmentation de la mémoire vive ou à un changement de processeur : il y a plusieurs manières de programmer quelque chose et certaines sont incroyablement meilleures que d'autres. Avec un peu de réflexion, et des outils théoriques de base, vous serez vous aussi en mesure de faire de bons choix pour vos programmes. But du tutoriel Les deux notions clés de ce tutoriel sont les suivantes : la complexité, et les structures de données. Chaque algorithme résout un problème donné. Prérequis Le but de ce tutoriel n'est pas de vous apprendre à programmer. Le langage que vous utilisez n'est pas très important, car on tentera de formuler les algorithmes d'une manière qui en est indépendante. Historique

3Dbop, une visionneuse WebGL Collada Une problématique récente a vu le jour avec la venue de WebGL : comment utiliser dès à présent cette technologie sans devoir ré-apprendre un nouveau langage complexe, et sans devoir tout coder "à la main" ? Ne trouvant aucun système permettant d'utiliser de manière facile et satisfaisante la technologie WebGL, Nicolas Barre a décidé de créer sa propre visionneuse d'objets 3D. 3Dbop est une visionneuse d'objets 3D pour le web basée sur le moteur Open Source CubicVR. Elle est conçue pour afficher plus facilement des objets 3D créés avec votre logiciel favori (SketchUp, Blender...) dans les navigateurs web compatibles avec la technologie WebGL. Fonctionnement Créez votre modèle avec votre logiciel favori (SketchUp, Blender...) Ceci est compatible avec Chrome, Firefox et IE 11. Démonstrations et tutoriels

Creating Round, Flat and Flip-Style CSS Toggle Switches Get SourceView Demo The Reasoning Often times, we find ourselves needing users to check/uncheck a checkbox to signify a yes/no answer to some question or statement. But wait! Laying The Foundations The HTML is nothing we haven’t seen before. Round style toggle (similar to iOS toggle switches)Round style with a flat finishYes/no flip style switch Each style will be targeted by a class that is attached to the input element. Nothing major there. All of our switches will require a little math to get right, but scaling up and scaling down is a breeze once you wrap your head around it. Example 1 – Round Style CSS Toggle Switch Our label, acting as our container, has a width and height. Example 2 – Round Style Switch With Flat Finish This example is fairly similar to example 1, the main difference being the aesthetic presentation of it. Example 3 – Yes/No Flip Style CSS Toggle Switch Now we’re gonna do something a little different. Sass For Math Browser Support Wrap Up

Related: