Learning three.js 04 :: Textures, Normal, and Bump Maps

Channel:
New Zealand xSaucecode
Subscribers:
1,090
Published on ● Video Link: https://www.youtube.com/watch?v=VdnN5nuxj-s


Duration: 4:22
25,190 views
192

The process of adding texture, normal, and bump maps to a Mesh's material. Sources included below.

Source code - https://github.com/saucecode/threejs-demos/tree/master/04_Textures

These textures were downloaded online. You don't need to have bump or normal maps, but they help to make surfaces look more pleasant.
They were downloaded from http://opengameart.org/

If you are running this from the file (opening index.html in your browser) it will not work in Chrome. Chrome doesn't allow local files to load local images via Javascript. You must run this demo in Firefox OR run a local HTTP server and connect to it.

The textures are loaded with a TextureLoader object, and added to the MeshPhongMaterial. Because Javascript is very asynchronous, so your code will run while the texture is loading. So when you play the live demo, the crate will appear black while the textures are downloaded.

I burned my finger shortly after I uploaded video 3, and typing has been painfully impossible for a while.


https://rawr.nz/

Email me: cahill.julian@gmail.com



Other Videos By xSaucecode


2017-11-19Pizza Birds Gameplay Trailer | XKCD Game Jam Submission
2017-07-02Point Light Shadowmapping :: GLFW + OpenGL 3.2
2017-05-11(Proof of Concept) Writing Custom Discord Clients (in Java)
2016-12-12Boop: LD37 14 Hour Development Timelapse
2016-12-11Boop - Ludum Dare 37 Submission (Java)
2016-08-30Learning three.js 09 :: Shooting & Projectiles
2016-08-26Learning three.js 08 :: First Person Gun View
2016-08-23Learning three.js 07 :: Instancing & Multiple Models
2016-08-05Learning three.js 06 :: Adding a Loading Screen
2016-07-23Learning three.js 05 :: Model & Material loading (OBJ/MTL)
2016-07-15Learning three.js 04 :: Textures, Normal, and Bump Maps
2016-07-07Learning three.js 03 :: Light/Shadows in 60 seconds
2016-07-06Learning three.js 02 :: Movement and Floors
2016-07-05Learning three.js 01 :: Getting Started
2016-07-05three.js :: Simple 3D Scene
2015-02-20LWJGL :: 3D Top-down View
2015-02-14Java LWJGL :: Font and Texture Loader
2014-11-18Halo MCC :: Is It A Spider?
2014-04-23CS:GO :: Heart Attack on Vertigo
2013-12-23Java LWJGL :: Particles, Shooting, Jumping Demo
2013-12-17Java LWJGL :: Heightmap, Lightmap and Particles Demo


Tags:
javascript
webgl
opengl
textures
bump
normal
maps
map
images
threejs
three.js
three
js
chrome
firefox