17a How to make 3d text in three.js
Learn how to convert font to TypeFace JSON.
Learn how to create 3D Text.
Learn how to turn on shadows for renderer and objects.
Learn how to control emissive light and RectAreaLight to simulate reflection of emissive light.
Timestamps:
00:00 Intro/demo
00:07 How to get FontLoader.js & TextGeometry.js
01:48 How to get free fonts
02:29 How to convert font to typeface JSON
03:07 Import statements for modules
03:18 Declare global variable
03:25 Declare scene and camera
03:34 Renderer: how to set alpha background to make CSS background
03:59 How to make RectAreaLight and PointLight
04:33 Make ground plane to receive shadows
04:41Orbit controls
04:43 How to make 3D text three.js
06:43 Animate function to control text emissive light and RectAreaLight
Resources:
Three.js TextGeometry Doc:
https://threejs.org/docs/#examples/en...
Three.js Text Examples:
https://threejs.org/examples/?q=text#...
Free Fonts @ Google Fonts:
https://fonts.google.com/
Convert Font to TypeFace JSON:
https://gero3.github.io/facetype.js/
