https://github.com/shahramshakiba/3d-text-p02

3D Text ⁞|⁞ A cool "3D Text" pop right in the center of the scene, with a bunch of donut-shaped "floating objects" all around it ⁞|⁞ ⚪Three.js
https://github.com/shahramshakiba/3d-text-p02

3d-text threejs webgl

Last synced: 2 days ago
JSON representation

3D Text ⁞|⁞ A cool "3D Text" pop right in the center of the scene, with a bunch of donut-shaped "floating objects" all around it ⁞|⁞ ⚪Three.js

• Host: GitHub
• URL: https://github.com/shahramshakiba/3d-text-p02
• Owner: ShahramShakiba
• Created: 2024-06-09T12:30:20.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-06-17T13:06:53.000Z (5 months ago)
• Last Synced: 2024-11-16T03:16:12.580Z (2 days ago)
• Topics: 3d-text, threejs, webgl
• Language: JavaScript
• Homepage: https://webgl-3d-text-1gail42gq-shahramshakibas-projects.vercel.app/
• Size: 751 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
#    _3D Text_   

###   _Description_

> To begin with, it is important to note that, this project have been sourced from an exceptional `Three.js Journey` Course. 


 

> 👤 Instructed by a _proficient_ and _expert educator_, ` "Bruno Simon" ` .

 


#### _🫧 I'm so hyped for this awesome project I'm about to dive into❕ 
       Picture this: 👀 
 I'm gonna make a huge `  3D Text  ` pop right in the center of the scene, with a bunch of donut-shaped "floating objects" all around it. ☄️ 
 🌊 It's gonna be absolutely mind-blowing! Let's do this!_


 
 




> [!IMPORTANT]

>> - It is crucial to grasp that the project incorporates _"Three.js"_ and _"GSAP"_ to build a visually impressive 3D Text.





> _Which Concepts Have I Covered_: 


01. _
Three.js supports 3D text geometries using the TextGeometry class, but I need a font in a specific json format known as `  typeface  `.
_

02. _
Add Helvetiker_regular.typeface Font & Attach the Text to the Scene.
_

03. _
Utilizing the "Center Method" to centralize the text.
_

04. _
Include 1000 Donuts in the Scene.
_

05. _
Randomize the placement of the Donuts to cover the entire screen evenly.
_

06. _
"Rotate" the donuts randomly in all directions.
_

07. _
Include "GSAP" Animation in both the Camera View and the Text.
_


 





#### _Give it a go in real-time and give me a Star_       _3D Text_  






https://github.com/ShahramShakiba/Threejs-Journey-Part02/assets/110089830/a8201be7-16b4-4eae-b90f-c74469207906

  
 

***

 ##  Find me around the Web