Three.js Realistic Lighting Setup Tutorial

In this video we will learn how to setup lighting and shadow in three.js scene and more your 3D model looks realistic
Source Code: redstapler.co/threejs-realist...
3D Model: skfb.ly/JM9u
=== Follow us on ===
Facebook: / theredstapler
Website: redstapler.co/
Twitter: / redstapler_twit
#ThreeJS #JavaScript #WebDesign

[@theman7050]

The best Three JS channel. Please make more advanced Three JS tutorials. You take us line by line on a great journey :D

[@Trazynn]

This made me realise this could add a lot of value to restaurant websites who want to show their food in 3D but also in the backdrop of their own interior. Like how would you go about blending a physical object, like a cake, sitting on a table, with the camera constrained into one direction but with a little wiggle room and then as a background image of a website?
Do you see where I'm going with this? These 3D images would create a ton of interactions with visitors which boosts the SEO more than when they merely check the menu. This could be a huge value proposal and maybe even trigger an arms race amongst restaurants who all want this.
As a freelance designer with too much time on my hands I would love to get my camera, visit each restaurant, 3D scan their food and integrate it into their website.Would be a cool niche to have.

[@pleasecontactme4274]

woah thats a genius idea!

[@kamaljeetsingh0001]

That looks so beautiful 😍

[@sumanth3036]

The possibilities in web is soooo facinating

[@RoanRossey]

Thanks man, nice video! Keep up the good work.

[@johncreativeproducts5688]

You explain so well, thank you!

[@alvarobyrne]

Nice ralistic shadows and lighting in three.js with a lot of concepts involved: anisotropy (texture quality, texture filtering quality) -property of mesh-, gltf mesh loading details -traversing and re positioning included-, hemisphere light -similar to sun light-, color desaturation with color tone mapping (Reinhard tone mapping amog other available) and tone mapping exposure -renderer property-, useful trick: spot light following the camera that simulates dynamic light sources; casting and receiving shadows, shadow biasing (pointLight.shadow.bias), and shadow resolution (pointLight.shadow.mapSize). Wow! Thank you so much: this is knowledge sharing!!!!!!!!!

[@trafficface]

Thank you so much! Saved my day.

[@mirok82]

Thank you very much! Interesting tutorial!

[@cptairwolf]

These tutorials are amazing

[@fortedexe8273]

Super useful thank you. Subscribed.

[@spikethea2630]

It's wild that this video isn't super popular

[@kashifaliansari2535]

It's too awesome, Thanks

[@namtong577]

hope can see more three.js tutorial

[@ChandanaBandara]

Thank you!

[@javifontalva7752]

Oh my god. I can't believe you can make this by using three.js . I wish I could do that.

[@musicvideosf0ryou]

How could someone dislike this 🤯

[@harisansari378]

awesome

[@SergioEnriqueAguilarDelgadillo]

Wow ¡ it is very awesome ¡

[@VeteranTuner]

siiiiick, nice :D

[@Andy-lr1gx]

Nice

[@user-vf1sc7pq8w]

Very good tutorial, easy to understand, how to set the transparent material of gltf? PBR material? Can I have a tutorial about this material setting? Now we can't find more application materials in this area, thank you!

[@aptechkamran4049]

great

[@pist5343]

Pretty cool, but why didn't you use HDR Image Based Lighting for the static model?

[@vrtech473]

More tutorial on threejs plz

[@aseel1024]

nice, it will be better if write a comments so we can follow ur steps.

[@wavecoders]

Looks great. I’m looking to have a model created for 3js, what is the best format and will it support textures like your demo

[@maasnicolas]

gLTF is the fastest and most optimised for the web

[@ANTIWOKE]

What if the model also has several texture maps such as a Normal Map, Specular Map, Roughness Map, etc. Are you able apply those maps onto the 3D model and showcase them in the viewer?

[@LakiLOOP]

May you make tutorial how to use scripts in three.js Editor?

[@OlaoluwaJesubanjo]

Hi I added this code but it doesn't rotate from the centre of the model, it offsets the model.
function animate() {
if (model) {
model.rotation.z += 0.01;
}
requestAnimationFrame( animate );
renderer.render( scene, camera );
}

[@janusjordan1159]

Hi, Where do we get that skybox images from (posx.jpg, negx.jpg)?

[@BMikel]

How can I make smth similar with a simple plain svg logo?

[@anmolrawat555]

Hey bro i want to make stock market charting website but i am stuck in chart part can u guide me how to add candelstick chart in website ?

[@greenking9125]

this "new THREE.OrbitControls(camera)" code is error, this "new THREE.OrbitControls(camera, renderer.domElement)" is right. The reason is missing element

[@tadkatechno]

Nothing happen still got error

[@SoloElROY]

Thanks!

[@UnityWorksIndia]

how to create a diamond shader for three.js? any code available for diamond shader?

[@andream9722]

hello RedStapler. I followed your tutorial. But when updating the spot light position inside the render loop, the shadow quality becomes horrible. If I let the spot at a fixed position, everything looks fine but the idea of having shadows moving according to the camera, is pretty cool. Any ideas on how to solve this problem?

[@andream9722]

ok i got my own answer. Adding +10 in world units to the light position was too much for my model scale ;) now adding just a +0.1 to each coordinates, works fine

[@bestapps4709]

My RectAreaLight is not working in my .obj model, can you help buddy?

[@OlaoluwaJesubanjo]

Doesn't work from the first stage, console says "Uncaught TypeError: Cannot read property 'domElement' of undefined"

[@OlaoluwaJesubanjo]

If there is anyone out there having the same problem, just move the "controls = new THREE.OrbitControls( camera, renderer.domElement );" line to the line after "init()"

[@mr-fister]

@@OlaoluwaJesubanjo you're a real life saver

[@afxcrush41]

@@OlaoluwaJesubanjo Thank you sir, You deserve a medal

[@melonisferco]

Very nice tutorial. But i have a problem, i get a blank screen when i test it. Any solutions?

[@RedStapler_channel]

check console

[@tokyo-re9nw]

for some reason, the first part does not work for me, the one with XYZ axes, could not follow through. Anyone else has the same problem?

[@goout88]

model is deleted, do someone have a copy ?

[@sadmanyasar17]

Some problems I faced and fixed:
1) 1:09 Import scripts like this below if you install threejs using npm and rename installation folder to "three"


import {GLTFLoader} from "./three/examples/jsm/loaders/GLTFLoader.js";

import { OrbitControls } from './three/examples/jsm/controls/OrbitControls.js';
//Rest of the scripts here
2) 2:35 add a renderer.domElement as a parameter along with camera in OrbitControls
3) 4:13 if you get black screen create a variable called "loader" and type as follows
// Instantiate a loader
loader = new GLTFLoader();
// Load a glTF resource
loader.load(
// resource URL
'scene.gltf',
// called when the resource is loaded
function ( gltf ) {
scene.add( gltf.scene );
Hope this helps :)

[@tadkatechno]

Why i got THREE as error

[@ghq3150]

Hi bro.You were my first subscriber and I learned a lot from your tutorials.But on the camera side, it confused me.
This is what I want to achieve:
there are many objects in the scene, and when I click on one of them, the camera looks to it and centers the object.
Could you share a tutorial or give me a project link/example?

[@webd5300]

How to create own 3d model ??

[@AyanCreations]

Blender.org

[@oxymonster1337]

Your script isn't working!
You can't load three with it. Doesnt matter what you do! Its broken...

[@Giovanni00831]

the file has been deleted

[@aptechkamran4049]

1st

[@marcboffinjuan5482]

2 xD

[@user-jt7wb3zc1m]

Do you realize that your stapler is actually white? :)