I can't get the light or material right | Three.js | Page 1

strong plume Aug 11, 2023, 5:42 PM

#

Hello guys, I'm currently working on a project where I need to reproduce the attached picture in three.js with other colors, and z movement wave (i'm fine with all of this) but I'm stugling to make it looks as good. I'm really bad with materials and lights and cant get the same effect.

The closest I could get looks like a really cheap version of the original image (see attached).

Can anyone knows what I'm doing that's definitely wrong ? Thanks.

rustic dragon Aug 11, 2023, 5:44 PM

#

sset your materials metalness to one

#

add an environment map

#

use vsm shadows

strong plume Aug 11, 2023, 5:46 PM

#

Ok I'm gonna try and text you back. thanks.

rustic dragon Aug 11, 2023, 5:47 PM

#

ofc

#

also drop the roughness to 0ish

#

maybe 0.1

strong plume Aug 11, 2023, 8:59 PM

#

rustic dragon add an environment map

I have no idea of wich one to take ? do you have an advise ? Is there like some default one to use ?

rustic dragon Aug 11, 2023, 9:00 PM

#

Search royal esplianade

#

https://threejs.org/examples/?q=envma#webgl_materials_envmaps or just use the ones in threejs examples

strong plume Aug 11, 2023, 9:03 PM

#

rustic dragon https://threejs.org/examples/?q=envma#webgl_materials_envmaps or just use the on...

on it

rustic dragon Aug 11, 2023, 9:05 PM

#

u can find em here https://github.com/mrdoob/three.js/tree/0b169138a99655148ed9601f87c685da54997155/examples/textures/equirectangular

GitHub

three.js/examples/textures/equirectangular at 0b169138a99655148ed96...

JavaScript 3D Library. Contribute to mrdoob/three.js development by creating an account on GitHub.

strong plume Aug 11, 2023, 9:11 PM

#

rustic dragon use vsm shadows

should i use direction light or point is ok ?

rustic dragon Aug 11, 2023, 9:12 PM

#

strong plume should i use direction light or point is ok ?

point will be slower and not suport vsm - use direction

strong plume Aug 11, 2023, 9:13 PM

#

ok, i will replace the lights and show you how it looks now

#

thank you btw

rustic dragon Aug 11, 2023, 9:21 PM

#

ofc

strong plume Aug 11, 2023, 9:25 PM

#

Ok so... haha

#

It's a disaster

#

#

I dont even get why now some are black and some are red, its the same material...

rustic dragon Aug 11, 2023, 9:32 PM

#

shadows probably, or normals

#

try reducing envmap intensity a LOT

strong plume Aug 11, 2023, 9:32 PM

#

(i fix the color bug, it was on my side)

#

ok i'm reducing

#

#

Couild it be too metalic ?

#

or maybe my lights are not enough strong or something

#

or maybe an ambiant light ?

#

(i have only theses two directional lights)

rustic dragon Aug 11, 2023, 9:49 PM

#

yes

#

increase roughness maybe

strong plume Aug 11, 2023, 9:53 PM

#

I removed all, you still can't see nothing

#

ok if i push the intensity to 1000 i start to see again

#

stuff is with the directional light in the end I cannot specify a distance

#

so all the up faces becames blue till the end

#

on the model, only on left you see some higher blue then it reduce by distance

#

😢

rustic dragon Aug 11, 2023, 10:58 PM

#

this is weird idk what 2 do

strong plume Aug 11, 2023, 11:02 PM

#

me neither lol

rustic dragon Aug 11, 2023, 11:53 PM

#

sry abt that

dry snow Aug 12, 2023, 2:07 AM

#

strong plume me neither lol

Did you figure it out? If not maybe send the .glb file here and I can take a look.

vague tinsel Aug 12, 2023, 5:01 PM

#

the ref image has global illumination + and the edges of the triangles have beveled edges

you won't get the same result in three js
but
the closest you can get is to experiment with

carefully place point, dirlight, spotlight light to get the bright highlights
tune material roughness,
tune angle of the triangles
try rectAreaLight https://threejs.org/examples/?q=rect#webgl_lights_rectarealight
use n8ao postprocessing or bake the ao in the model to make the crevices darker

strong plume Aug 30, 2023, 1:49 PM

#

dry snow Did you figure it out? If not maybe send the .glb file here and I can take a lo...

Yes I think I got something little bit closer of what I wanted by fixing the shadows: