Exploring 3D Effects with 2D Optical Illusions
A brief tutorial that guides you through creating a 3D visual effect using a 2D optical illusion with CSS and JavaScript.
134 posts tagged with
Case Study: Ronin161’s Portfolio – 2024
A look into the making of Ronin161’s new portfolio for 2024, from ideas to code. Plus an in-depth explanation about the custom Toon Shader.
3D Glass Portal Card Effect with React Three Fiber and Gaussian Splatting
In Playground, by Yuri Artiukh
Explore the creation of a 3D glass portal with React Three Fiber, with optimized rendering using Gaussian Splatting and integrating real-world objects.
On-Scroll Perspective Grid Animations
In Playground, by Manoela Ilic
On-scroll animations for perspective image grids with different layouts.
Crafting a Dice Roller with Three.js and Cannon-es
In Tutorials, by Ksenia Kondrashova
This tutorial will guide you through the process of creating a 3D dice roller using Three.js and Cannon-es.
Rotating Twisted 3D Typography with Three.js and Shaders
In Playground, by Yuri Artiukh
A brief exploration into how to twist and rotate text in 3D using Three.js and Shader magic.
Getting Creative with Infinite Loop Scrolling
In Tutorials, by Manoela Ilic
A quick look at how to recreate the infinite loop scrolling animation seen on Bureau DAM with GSAP and Lenis.
How to Add More Fun to a Game: Extending “The Aviator”
In Tutorials, by Michel Helms
A tutorial that explores some hands-on changes of “The Aviator” game to make it more fun and engaging.
Creating the Effect of Transparent Glass and Plastic in Three.js
In Tutorials, by Kelly Milligan
Learn how to create convincing transparent, glass-like and plastic-like materials in Three.js.
Creating 3D Characters in Three.js
In Tutorials, by Michelle Barker
Are you looking to get started with 3D on the web? In this tutorial we’ll walk through creating a three-dimensional character using Three.js, adding some simple but effective animation, and a generative color palette.
Rotated 3D Letters and Image Hover Effect
In Playground, by Manoela Ilic
A rotated 3D like letters hover effect combined with a tilted image for a menu.
Magnetic 3D Grid Interaction with Content Preview
In Playground, by Manoela Ilic
A grid layout with a magnetic 3D interaction effect and a content preview animation.
Rotating Loading Animation of 3D Shapes with Three.js
In Playground, by Yuri Artiukh
Some rubber-like 3D shape rotations that are perfect for loading animations.
Kinetic Typography with Three.js
In Tutorials, by Mario Carrillo
Discover how to use Three.js to render kinetic 3D typography.
How to Create a Physics-based 3D Cloth with Cannon.js and Three.js
In Tutorials, by Arno Di Nunzio
Learn how to create a physics-based 3D cloth with Cannon.js and Three.js and use simplex noise to create a wind effect.
3D Folding Layout Technique for HTML Elements
In Tutorials, by Daniel Velasquez
A tutorial on an experimental 3D layout technique for HTML elements with endless possibilities.
Playing with Texture Projection in Three.js
In Tutorials, by Marco Fugaro
In this tutorial, you’ll learn how to project a texture onto an object in Three.js with some interesting examples.
Building a Physics-based 3D Menu with Cannon.js and Three.js
In Tutorials, by Arno Di Nunzio
Learn the basics of doing physics in WebGL by building a 3D menu with Cannon.js and Three.js as renderer.
