Blender & Three.js - Animated 3D Social Media Button on Hover | HTML, CSS & JavaScript

preview_player
Показать описание
I hope you find this useful.

A simple 3d model made with blender is displayed on the browser using GLTFLoader.
The label is made using CSS2DRenderer.

▼Contents
00:00 Demo
00:17 Blender - Create 3D Social Media Button
01:27 HTML
04:46 setRenderer()
06:51 setCamera()
07:42 setLight()
08:12 onResize()
09:54 setFloor()
11:35 setModel()
13:46 setLight()
16:10 Create Label
19:12 Create Hover Animation
22:12 CSS

▼Please subscribe to my channel if you like.

▼You can see the demo and source code on my website.

▼Instagram

▼Pinterest

Below are past videos.

Claymorphism Effect with HTML & CSS

Neumorphism Toggle Switch with HTML & CSS

Neumorphism Button Hover Effects with HTML & CSS

Layered Image Hover Effects with HTML & CSS | Isometric Design

Simple CSS 3D Buttons

#3d
#blender
#threejs
#webgl
#3danimation
#blender3d
#html
#css
#csseffect
#javascript
#webdevelopment
#webdesign
#programming
#frontend
#metaverse
  1. Plantpot_works
  2. 3d
  3. blender
  4. threejs
  5. webgl
  6. 3danimation
Рекомендации по теме
How To Export 0:10:34

How To Export 3D Models With Their Animation From Blender And Import Them Into Your Three.js App

Threejs smooth camera 0:00:23

Threejs smooth camera animation with GSAP

Add Animations to 0:02:23

Add Animations to 3D Models | Blender, Mixamo, Three.js

Loading Models (using 0:05:32

Loading Models (using Three.js) - Both Static and Animated!

Import Blender Scene 0:04:49

Import Blender Scene To Three JS - Using ThreeJS Editor

Adding a 3D 0:05:55

Adding a 3D model to a website using THREE.JS

Gallery Scene blender 0:00:33

Gallery Scene blender + threejs

Blender to 3D 0:13:28

Blender to 3D website in minutes for free: Free tutorial 1, getting started

How to Learn 0:06:41

How to Learn Three.js in 2024 ( Full Guide )

My 3D Portfolio 0:00:35

My 3D Portfolio Website made using Three.js

Making a landing 0:02:59

Making a landing page scrolling experience with 3D physics (time-lapse)

Interactive Map Using 0:00:33

Interactive Map Using Three.js - Plateforme 10

Hand Pose Simulator 0:00:33

Hand Pose Simulator Using Three.js and Blender

Interactivity in threejs 0:05:25

Interactivity in threejs + Blender 3.6: hit area customization

Learning THREE.js - 0:25:04

Learning THREE.js - 17 -- Creating Blender Sprite Sheets for the Web

Professional Three js 0:01:52

Professional Three js course | Create stunning Portfolios with Three.js and Blender

Creating my Interactive 0:04:21

Creating my Interactive 3D portfolio: Getting sidetracked with Blender | Portfolio Journey 2

[ PROJECT + 0:00:45

[ PROJECT + SOURCE CODE ] Threejs Three Graces Design Concept

3D Scroll Animations 0:12:55

3D Scroll Animations Have Never Been Easier! React Fiber + Next.js 14 Tutorial

Build a Mindblowing 0:15:38

Build a Mindblowing 3D Portfolio Website // Three.js Beginner’s Tutorial

I Built a 0:08:28

I Built a 3D Developer Portfolio Website // Three.js + React + Tailwind

3D Room Portfolio 0:00:11

3D Room Portfolio with Three.js and Blender || #animation #css #threejs #coding #portfolio #blender

three.js Basic Character 0:09:15

three.js Basic Character Controls - GLTFLoader, AnimationMixer, 3rd Person Controller

Try this 3D 0:02:53

Try this 3D Animation Trick on your Portfolio

Комментарии
Автор

Thank you for watching this video!
I just started learning Blender and Three.js, so please let me know if you have any comments!
▼You can see the demo and source code on my website.

plantpot_works