Lighting and Normals issue2

Questions
,
1

Hello everyone,

I exported a blender model into a compressed glb (using Draco compression). There are no specific materials assigned to my mesh (i.e default material).

When I render the scene, it get the mesh but it seems like it is without “normals”. How can I get the same kind of appearance of blender (be able to see the edges, light reflection out of my faces, etc.)
Blender scene

image
image975×505 69.9 KB

My localhost scene
image
image975×622 38 KB 

import { Suspense } from 'react'
import { Canvas } from '@react-three/fiber'
import { Bounds, useBounds, OrbitControls, ContactShadows, useGLTF } from '@react-three/drei'

export default function App() {
  return (
    <Canvas style={{ background: "grey" }} camera={{ position: [0, -10, 80], fov: 50 }} dpr={[1, 2]}>
      {/* <spotLight position={[-100, -100, -100]} intensity={0.2} angle={0.3} penumbra={1} /> */}
      {/*<hemisphereLight color="white" groundColor="#f1f1f1" position={[-7, 25, 13]} intensity={1} /> */}
      <ambientLight intensity={0.5} />
      <Suspense fallback={null}>
        <Bounds fit clip observe margin={1.2}>
          <SelectToZoom>
            <Model name='2060_3' rotation={[0, 0, 0]} castShadow>
              <meshLambertMaterial
                attach="material"
                color="pink"
                opacity={1.0}
              />
            </Model>
            <Model name='2060_1' material-emissive="red" rotation={[0, 0, 0]} />
            <Model name='2060_2' material-emissive="orange" rotation={[0, 0, 0]} />
          </SelectToZoom>
        </Bounds>
        <ContactShadows rotation-x={Math.PI / 2} position={[0, -35, 0]} opacity={0.2} width={200} height={200} blur={1} far={50} />
      </Suspense>
      <OrbitControls makeDefault minPolarAngle={0} maxPolarAngle={Math.PI} />
    </Canvas>
  )
}

function Model({ name, ...props }) {
  // const { nodes } = useGLTF('/compressed.glb')
  const { nodes } = useGLTF('/geometry_v17.glb')
  return <mesh geometry={nodes[name].geometry} material={nodes[name].material} material-emissive="blue" material-roughness={1} {...props} dispose={null} />
}
2

You need to see what normals into models after loading in three.js
Like this: alert(mesh.geometry.attributes.normal.array);

3

Looks like you commented out your spotlight and hemisphere light. If you only have an ambient light in your scene the normals won’t have any effect on your material.
Try turning the lights back on or adding in a directional light.

If that doesn’t work, either log the attributes to the console to check if they’re correctly exported, or check your model on https://gltf.report/ to see if it contains normal data.

4

Thanks for your input,

Fixed the issue. It was the lighting which was too intense I suppose. When I switch to directional light it worked perfectly.

Thanks,