- 10 Open-Source Examples of Three.js In Action
- BestPysanky Revolving Carousel with Three Horses Musical Figurine
- Subscribe to RSS
BestPysanky Revolving Carousel with Three Horses Musical Figurine
Subscribe to RSS
The web has come a long way from dial-up Internet and GeoCities pages. Websites are now fully responsive and accessible from touchscreen devices. Start Downloading Now! Kepler Orbits. I cannot imagine how long it took to build this realistic model of a Kepler orbit path. This model shows the movement of a body relative to another in space, and in this case the developer Danie Clawson did an incredible job. This entire model uses CSS for visuals and Three. You might even notice that the orbiting object uses realistic light with shading based on which side is pointing towards the sun. This is wildly impressive and it belongs as 1 on this list for the immense attention to detail. Believe it or not this box animation was made with pure CSS3 transforms. The actual cubes are pretty easy to render using CSS and the alternating colors work with differing classes. The animation use looping keyframe animations to give the illusion of these boxes bouncing in 3D space. By clicking any of the perspective buttons in the top-right corner you can even view this 3D model from varying angles. Pretty cool! It uses a simple HTML container with four inner divs representing the four sides of each rectangle. The bars are easy enough to animate using CSS3 and they all grow to varying heights. But the most impressive part is how this entire animation rotates viewing angles even while the bar graph is growing. This uses a lot of Sass code to automate the animations with calculation functions so it is a bit technical. For a trippy Webkit browser experience take a look at this 3D tunnel created with just some CSS3 transforms and Sass properties. The alternating colors run through a Sass for loop which alternates the HSL color value after a certain time period. Pretty wild! But it is a testament to how much you can do with some creativity and coding knowledge. The iPhone 4 offered a radically new design and it got everyone hyped for the killer new smartphone. It does look like an iPhone and the outer band even reflects light with a realistic gradient. This lets you change the speed, size, and distance of various planets. You can even switch between the 3D view and an overhead 2D view with relative ease. Talk about a stellar use of frontend development! These simple shaded cubes may not seem like much. Image carousels are great to showcase graphics, photos, and even videos in rotation. And with this CSS3 carousel you can take these fun sliders to a whole new level. This very basic 3D carousel relies on click events to animate between different elements. The 3D style is surprisingly detailed and relies purely on CSS code. And this is actually something you could use on a real site so it may have a practical use in modern web design. This 3D lion render by Karim Maaloul uses Three. I hope these examples can inspire you to learn more about frontend development and maybe even create your own 3D projects.