Bruno Simon’s Three.js journey is an exceptional resource for learning Three.js due to its comprehensive, engaging, and practical approach. The course covers everything from the basics of Three.js to advanced topics like shaders, lighting, and optimization. Bruno’s teaching style is clear, concise, and visual, making complex topics easy to understand. The course is highly practical, with each lesson building on the previous one to create real-world projects. Moreover, the course is frequently updated with new content, ensuring that learners have access to the latest information and techniques in the rapidly evolving world of 3D web development.
Raging Sea
Bruno Simon - Fall 2021
Creating big waves, manipulating the vertex shader.
Using the sin function based on x, to move the position in y. Delivered with GUI to play with.
3D Text
Bruno Simon - Fall 2021
In three.js 3D text geometries are supported with the TextGeometry class and the font is loaded with
FontLoader which works like the textureLoader.
For the texture I used MeshMatcapMaterial to get my favorite color.
Shitty Shadows
Bruno Simon - Fall 2021
For real-time 3D rendering, shadows have always been tricky. The challenge is to display realistic shadows at a reasonable frame rate. Shadow maps are used to store the light renders as textures. Every material uses these maps to receive shadows and project them on the geometry. Shadows in three.js are supported by PointLight, DirectionalLight and SpotLight.
Smooth Shadows
Bruno Simon - Fall 2021
For each light three.js renders a shadow map. First step for optimization is to adjust the size. Remember to keep the power of 2 because of the mipmaps. Next, the properties of the camera get defined. Adding a PCFSoftShadowMap on top to finally display smooth shadows. Go ahead and change the position to crop the shadows. You got a little helper here.
Tripple Shadow
Bruno Simon - Fall 2021
One, two, tripple nipple! This nice example let you play around with the DirectionalLight, SpotLight and PointLight. Value the GUI and benefit from your little helpers! Feel free to turn the lights on & off, change their position and/or intensity. Deploy your perfect settings.
Baking
Bruno Simon - Fall 2021
The right usage of light has the power to deploy perfect renders. When it comes to performance, light is expensive. Frankly, baking is the method for optimization. Instead of real-time rendering the shadow is a texture. Simply animated to light up the illusion.
Raycaster
Bruno Simon - Fall 2021
1842 John Strutt, 3. Baron Rayleigh was born. A english mathematician and physician who established the comprehension on how we see our world. Developers use the raycaster to
shoot a ray and test what is intersecting to trigger wanted actions. In this showcase,
the spheres change their color, the moment they intersect with the ray.
Orbit Control
Bruno Simon - Fall 2021
When it comes to the camera, there are many ways to give the user control & vision (Array, Orthographic, Perspective, etc). To get started with, the Orbit Control is mostly a good choice.
Super Spin
Bruno Simon - Fall 2021
To get animations started, the requestAnimationFrame is the key. The purpose is, to call the function provided on the next frame. This function will be called on each new frame to visualize movement.
Watch this super spin and enjoy another beautiful cube, touched by an appealing gradient.
The Triangle
Bruno Simon - Fall 2021
The triangle is the most stable geometry. Period.
Additionally, a set of linear equations is solved quickly, if it comes in 'TriangleShape'. Because we are all familiar with Pythagoras, Carl Friedrich Gauß set a good base to take it to the next step.
Debug UI
Bruno Simon - Fall 2021
The ability to change parameters without changing the code is a great tool - not only for the developer. This little Debug UI is a great feature for the customer, to explore and tweak his dreams. There are many libraries worth to check out regarding Debug UIs. Here we chose 'lil-gui' . Press 'h' to hide it.
Transformiang Textures
Bruno Simon - Fall 2021
You might think textures just show up whenever you need them but again, many ways to get access. A good one is to use loadingManager and a textureLoader to use the textures of your choice or a given door. This transformation was my favorite of many showcases playing with transformation. Using NearestFilter for better results.
Moiré Patterns
Bruno Simon - Fall 2021
In general, checkerboard textures are the way to check, if your uv unwrapping is matching. The Moiré Pattern should be avoided. Seeing this 'mistake' as a feature instead, this pattern can be quite fascinating. I added a slight rotation, nothing else needed, to get hooked. Give it a spin yourself or just watch what 0.01 can do.
Mesh Normal Material
Bruno Simon - Fall 2021
The standard MeshNormalMaterial displays the normal relative's orientation to the camera.This can be very useful to debug your normals - tweaking how the environment should reflect or refract on the geometries' surface.
Environment Map
Bruno Simon - Fall 2021
Instead of the texureLoader we are using the cubeTextureLoader to import six single images which will represent the environment map. Make yourself a mirror and take a look at this peaceful scenery.
Displacement Map
Bruno Simon - Fall 2021
When it comes to textures and reaching for the optimal results, many textureMaps are needed to create a certain feel of depth. This example does not include all maps but it gives you the possibility to check out metalness, roughness, ambient occlusion and most fun to play with, the displacement.
Ambient & Directional Light
Bruno Simon - Fall 2021
To instantiate light, you need a proper class and simply add it to the scene. The AmbientLight applies omnidirectional lightning.
All faces of the geometries will be lit equally.The DirectionalLight can be seen like sun rays, traveling in parallel. Give it a go and enjoy your Osram moment.
Explore Your Excitement - Wissenschaft and Action for the Next Transformation