How to set lighting position to a diamond model?

Questions
, , ,
#1

Hello everyone!

This is my first time trying Three.js and I’m making a React website with some 3D models rotating.
I downloaded this Diamond 3D model from Sketchfab.

When I put it in my Canvas, maybe the lighting is not in the correct position or I’m using the wrong lights. It looks more like the lights are pointing to the diamond and behind the diamond.
The texture is more like emissive even though it has 3 textures .png in the download folder.

I want it to render out a proper clear shiny diamond like in the 3D Model on Sketchfab.

Can anyone please help me with this? Thank you guys so much :pray:

Here’s what on the screen:
1

Here are the lights that I use:

const Lights = () => {
  return (
    <>
      <ambientLight intensity={0.3} />
      <directionalLight position={[10, 10, 5]} intensity={1} />
      <directionalLight position={[-1000, 1000, 100]} intensity={2} />
      <spotLight intensity={1} position={[100, -1000, 100]} />
      <spotLight intensity={1} position={[-100, 1000, -100]} />
      <spotLight intensity={10} position={[-180, -1000, -100]} />
    </>
  )
}

Textures and Materials code in the downloaded gltf file:

],
  "buffers": [
    {
      "byteLength": 56520,
      "uri": "diamond.bin"
    }
  ],
  "images": [
    {
      "uri": "textureDiamond/DiamondOutside_baseColor.png"
    },
    {
      "uri": "textureDiamond/DiamondOutside_metallicRoughness.png"
    },
    {
      "uri": "textureDiamond/DiamondOutside_emissive.png"
    }
  ],
  "materials": [
    {
      "alphaMode": "BLEND",
      "doubleSided": true,
      "emissiveFactor": [
        0.5643160717217226,
        0.5643160717217226,
        0.5643160717217226
      ],
      "emissiveTexture": {
        "index": 2
      },
      "name": "DiamondOutside",
      "occlusionTexture": {
        "index": 1
      },
      "pbrMetallicRoughness": {
        "baseColorTexture": {
          "index": 0
        },
        "metallicRoughnessTexture": {
          "index": 1
        }
      }
    }
  ],
#2

You could add more lights and hitting the model from different directions. Also maybe change the material settings so it’s more glossy.

Not sure if you can use HDRI lighting in three. But I thought I saw some posts on it.

Edit: looks like your lights are pretty far away too. Also, maybe play around with their positions.

1 Like
#3

Thank you for your reply!

I tried to find information about using HDRI lighting in r3f but no luck :confused:
So I then tried adding more lights (Spotlight & Point light) and playing with the intensity & positions. This does make the diamond brighter.
But maybe this diamond needs way too much light, it also burns off my 2 other models within the same page :sweat_smile:

const Lights = () => {
  return (
    <>
      <ambientLight intensity={0.3} />
      <directionalLight position={[10, 10, 5]} intensity={1} />
      <directionalLight position={[-1000, 1, 100]} intensity={2} />
      <spotLight intensity={1} position={[100, -100, 100]} />
      <spotLight intensity={1000} position={[-100, 1000, -100]} />
      <spotLight intensity={1000} position={[-180, 100, -100]} />
      <pointLight intensity={100} position={[10, 100, 100]}/>
      <pointLight intensity={1000} position={[-100, -1000, -100]}/>
      <pointLight intensity={1000} position={[-5000, -5000, -5000]}/>
    </>
  )
}

1

Can you instruct more about this, please?

change the material settings so it’s more glossy

And how would you detect if the lights are far away, any tips on this?

Thanks so much for your help! :pray:

#4

an environment map would help, then you get reflections, also it allows you to remove all those spotlights because that’s very expensive. add transmission and thickness, too: Glass transmission - CodeSandbox

I tried to find information about using HDRI lighting in r3f but no luck :confused:

you would use any vanilla thing in the same way as before, there are no differences. but, since we have components that can be shared often you’ll find easier abstractions, for instance

import { Environment } from '@react-three/drei'

<Environment files="your.hdr" />
1 Like
#5

You are setting the position of your lights in your code…and you have the “y” position set to 1000 and -1000. But if you use an environment map like the above comment. I guess you can get rid of most of them. I would think you’d at least want one light maybe.

I’m not familiar with the exact syntax in three for material, but I imagine it’s the same as any other platform.

Material.glossiness = .7;

Your intensity is way too high as well

1 Like
#6

Oh yeah! This works in Codesandbox - Demo but I don’t know why it renders a bunch of errors in my localhost screen

Screen Shot 2022-01-03 at 20.18.44
Screen Shot 2022-01-03 at 20.18.441672×1678 267 KB

THREE.WebGLRenderer: Context Lost.

When I comment out the <Environment files="/my.hdr" />, the context is back
Does this have anything to do with RGBELoader since it’s deprecated in Threejs v136?

#7

Do you think maybe this Stackoverflow answer has to do with editing the material settings as you said?

<mesh ref={ref} position={[meshPositionX, meshPositionY, meshPositionZ]} material-glossiness={0.7}>
      <Model modelPath={modelPath} />
</mesh>

I put this in the <mesh> element and I don’t know if it’s working or not because the model doesn’t look any different and the console doesn’t have any error :sweat_smile:

#8

I do not know if that’s the proper syntax. Not knowing it myself yet in three.Ja. I do not know what react-fiber is or how you would do it for an imported model.

But yes….that’s what you need to do.

#9

Maybe I’ll figure it out soon :slight_smile:
Thank you, Jason!

#10

Look here.

https://threejs.org/docs/#api/en/materials/MeshPhongMaterial

1 Like
#11

“my.hdr” is a placeholder, either a cubemap or a hdr file has to exist in the public folder. but environment also comes with a couple of presets where you don’t have to do anything. try <Environment preset="warehouse" /> or city, forrest, apartment, dawn, sunset, etc. the IDE will autocomplete. i use this component practically for every thing i do, env lighting is amazing.

2 Likes
#12

Thank you for the tips! The preset works amazing on this model.
1

The reason why Environment didn’t work on my app but worked on Codesandbox maybe because the three-stdlib seems to be outdated for me locally (Cody supported me on this).

I transferred my code to a new create-react-app project and the env light is working now.

Thanks everyone for your help! Really appreciated it! :smiley_cat: :pray: