Three.Js Journey

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.

Three.Js Projects

Raging Sea. A ThreeJS Project.
Creating big waves, manipulating the vertex shader.Using the sinus function based on x, to move the position in y. Delivered with GUI to play with.

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.

Animated Galaxy. A Three.Js Project. To create this animated galaxy, I replaced PointsMaterial with ShaderMaterial to enable realtime customization and optimized performance.It comes with a GUI to play with.

Animated Galaxy

Bruno Simon - Fall 2021

To create this animated galaxy, I replaced PointsMaterial with ShaderMaterial to enable realtime customization and optimized performance.
It comes with a GUI to play with.

vUV Cube. A Three.Js Project. Because we all love cubes: my favorite. After varying and retrieving to get access, we then use the vUV inside the fragment shader to produce this beauty.

vUV Cube

Bruno Simon - Fall 2021

Because we all love cubes: my favorite. After varying and retrieving to get access, we then use the vUV inside the fragment shader to produce this beauty.

Explore Your Excitement. A Three.Js Project. In three.js 3D text geometries are supported with the TextGeometry class and the font is loaded withFontLoader which works like the textureLoader.For the texture I used MeshMatcapMaterial to get my favorite color.

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.

Simple Particle Sphere. A Three.Js Project. Particles are initiated like other geometries, too.The main difference is the PointMaterial, a verySpecific Three.Js class. In this showcase, distant particles appear smaller than close particles, using sizeAttenuation.

Simple Particle Sphere

Bruno Simon - Fall 2021

Particles are initiated like other geometries, too.
The main difference is the PointMaterial, a very
Specific Three.Js class. In this showcase, distant particles appear smaller than close particles, using sizeAttenuation.

Particle Stars. A Three.Js Project. Two triangles form one particle which faces towards the camera. They may come in millions, yet, frame rate stays smooth.There is no fire without smoke. There is no galaxy without stars.

Particle Stars

Bruno Simon - Fall 2021

Two triangles form one particle which faces towards the camera. They may come in millions, yet, frame rate stays smooth.
There is no fire without smoke. There is no galaxy without stars.

Shitty Shadow. A Three.Js Project. 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.

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 Shadow. A Three.Js Project. 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.

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. A Three.Js Project. 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.

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.

Mouse Hover. A Three.Js Project. The raycaster technique can be used to detect if the hunting bow hit a deer, the player is running into a wall or if something currently is under your mouse to simulate events. Make sure to normalize your rayDirection - always.

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. A Three.Js Project. 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.

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.

Mouse Hover. A Three.Js Project. The raycaster technique can be used to detect if the hunting bow hit a deer, the player is running into a wall or if something currently is under your mouse to simulate events. Make sure to normalize your rayDirection - always.

Mouse Hover

Bruno Simon - Fall 2021

The raycaster technique can be used to detect if the hunting bow hit a deer, the player is running into a wall or if something currently is under your mouse to simulate events. Make sure to normalize your rayDirection - always.

Orbit Control. A Three.Js Project. 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.

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.

Haunted House. A ThreeJS Project. This real-time environment is made out of primitives as geometries - all textures are given.The atmosphere is created by simply using multicolor lights, floating around and passing through the surroundings.

Haunted House

Bruno Simon - Fall 2021

This real-time environment is made out of primitives as geometries - all textures are given.
The atmosphere is created by simply using multicolor lights, floating around and passing through the surroundings.

Easy Physics. A ThreeJS Project. Playing with easy Physics because we all love to see primitives collide, collapse, fall and bounce along.Click the GUI while playing to create as many primitives you want and watch the spheres floating away.

Easy Physics

Bruno Simon - Fall 2021

Playing with easy Physics because we all love to see primitives collide, collapse, fall and bounce along.
Click the GUI while playing to create as many primitives you want and watch the spheres floating away.

Super Spin. A Three.Js Project. 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.

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. A Three.js Project. 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.

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.

DebugUi. A Three.Js Project. 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.

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.

Transforming Textures. A Three.Js Project. 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 as well.

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é Pattern. A Three.Js Project. 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.

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.

Magnification Filter. A Three.Js Project. How a pixel appears on a screen dependend on many factors. Using magnification and nearest filter, as a result, the given minecraft texture looks pixel perfect.

Magnification Filter

Bruno Simon - Fall 2021

How a pixel appears on a screen dependend on many factors. Using magnification and nearest filter, the given minecraft texture looks pixel perfect.

$Mesh Normal Material. A Three.Js Project. 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.$

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. A Three.Js Project. 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.

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. A Three.Js Project. 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.

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. A Three.Js Project. 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.

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.

Hemisphere Light. A Three.Js Project. The HemisphereLight is alike the AmbientLight. The light coming from the sky differs from the light coming from the ground. A gradient, created by light.

Hemisphere Light

Bruno Simon - Fall 2021

The HemisphereLight is alike the AmbientLight. The light coming from the sky differs from the light coming from the ground. A gradient, created by light.

Rect Area Light. A Three.Js Project. The RectAreaLight can be seen like the big rectangle lights, known from photoshoot sets. It is a mixture between diffuse and directional light but be careful! It works with MeshStandardMaterial and MeshPhysicalMaterial only.

Rect Area Lights

Bruno Simon - Fall 2021

The RectAreaLight can be seen like the big rectangle lights, known from photoshoot sets. It is a mixture between diffuse and directional light but be careful! It works with MeshStandardMaterial and MeshPhysicalMaterial only.

Connect

Strategy Lean Design Thinking Development

EyeWant

Explore Your Excitement - Wissenschaft and Action for the Next Transformation

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

SonjaUnger@EyeWant.Space Technical Artist

LinkedIn || Instagram || GitHub

Impressum & Datenschutz

Copyright EyeWant.Space || 2023 All rights reserved.