24a Waving Reeds three.js
Learn how to export and import using modules in three.js.
Learn how to texture objects in three.js.
Learn how to make a noise function in vertex shader three.js.
Learn how to use fog in three.js.
Learn how to make reeds using instanced mesh in three.js.
Learn how to animate reeds in three.js.
Learn how to make and animate water in three.js.
Timestamps:
00:00 Intro/demo
00:10 To do list
00:16 File structure layout
01:03 Vertex shader three.js
03:03 Fragment shader three.js
03:31 Export and import vertex shader and fragment shader three.js
03:49 Make rocky cliff background three.js
06:45 Import water shader
06:57 Make scene, scene background, scene fog three.js
07:47 Make camera, renderer, lights three.js
08:08 Make reeds using instanced mesh three.js
10:42 Make water three.js
12:08 Animating reeds and water using time in animate loop three.js
Resources:
Rock Cliff Mountain textures:
https://www.textures.com/search?q=cli...
Ocean shader image texture:
https://raw.githubusercontent.com/mrd...
Ocean shader js file:
https://raw.githubusercontent.com/mrd...
Noise function shader:
https://thebookofshaders.com/11/
Original code for instanced grass:
https://jsfiddle.net/prisoner849/n1em...
Free textures:
https://www.textures.com/
Fog three.js doc:
https://threejs.org/docs/#api/en/scen...
Instanced Mesh three.js doc:
https://threejs.org/docs/#api/en/obje...
Ocean shader three.js example:
https://threejs.org/examples/webgl_sh...
https://github.com/mrdoob/three.js/bl...
PBR Materials three.js example:
https://threejs.org/examples/?q=dis#w...
