Using 3D and animations are a great anhancement for websites. In my learning process I came up with this playground site in order to improve my skills for 3D effects and animations in the webdevelopment.
Inspired by Wael Yasmina (Youtube) I experimented with Three.js and implemented a 3D Model from Sketchfab.
The main source for my 3D CSS and animations effects was Kevin Powell who gave great insides and inspiration by his videos 3D CSS - lighting, animations, and more! and 3D Tilting Card Effect with Mouse Tracking // HTML, CSS & JS on his youtube-channel.
Using Vite as a build tool in this project, I tried to manage my assets based on the folder structure I like and found a nice solution by Khalid Abuhakmeh in his blog-post Manage Vite Assets Like A Pro.
- Using the Intersection Observer API for animation processes
- Using 3D library Three.js
- Using Swiper, a modern and open-source mobile touch slider
- Using modern CSS commands
- Assets Management in vite
- 3D-model implemented with Three.js
- Slider using Swiper.js with images loaded from Json-file
- Slide-Ins of content with CSS
- Rotation of content with CSS
{
"name": "threedee-website",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite --host",
"build": "vite build --mode production",
"preview": "vite preview",
"serve": "vite build && vite preview --host",
"compile:sass": "sass --watch ./src/css/style.scss ./src/css/style.css"
},
"devDependencies": {
"sass": "^1.69.7",
"vite": "^4.3.2"
},
"dependencies": {
"dat.gui": "^0.7.9",
"dotenv": "^16.3.1",
"swiper": "^11.0.5",
"three": "^0.152.2"
}
}
- Three.js Tutorial For Absolute Beginners by Wael Yasmina Youtube
- Import glTF/GLB Models with Three.js by Coffee Code Create Youtube
- Three.js Realistic Lighting Setup Tutorial by Red Stapler Youtube
- 3D Model Cars 2 The Video Game - FIllmore by maximilian
- 3D Tilting Card Effect with Mouse Tracking // HTML, CSS & JS by Kevin Powell Youtube
- Intersection Observer API Mozilla
- Manage Vite Assets Like A Pro by Khalid Abuhakmeh