17b How to animate individual letters of 3d text three.js
Learn how to separate a string of text into individual letters,
how to make individual letters into 3d text,
and animate each letter using raycasting and tween.js.
Timestamps:
00:00 Intro/demo
00:25 Get TextGeometry.js and FontLoader.js (in Resources below)
00:38 Get Tween.js CDN script tag (in Resources below)
00:48 Download font and convert it to TypeFace JSON
01:57 Import statements
02:24 Global variables, scene, camera, renderer
03:10 Lights: ambient (no shadows) and directional (shadows)
03:23 Ground plane and orbit controls
03:37 How to create a 3d object for each character of text three.js
07:37 How to animate each letter of text using tween.js
11:15 How to make hoverover effect for each letter using raycasting three.js
Resources:
Three.js TextGeometry Doc:
https://threejs.org/docs/#examples/en...
Three.js Text Examples:
https://threejs.org/examples/?q=text#...
Tween.js - tween.umd.js CDN:
https://cdnjs.com/libraries/tween.js/...
Three.module.js (examples jsm folder)
Orbit controls: https://github.com/mrdoob/three.js/bl...
FontLoader.js:
https://github.com/mrdoob/three.js/bl...
TextGeometry.js:
https://github.com/mrdoob/three.js/bl...
Three.js (examples js folder)
Orbit controls:
https://github.com/mrdoob/three.js/bl...
FontLoader.js:
https://github.com/mrdoob/three.js/bl...
TextGeometry.js:
https://github.com/mrdoob/three.js/bl...
Free Fonts @ Google Fonts:
https://fonts.google.com/
Convert Font to TypeFace JSON:
https://gero3.github.io/facetype.js/
