-1

I just started learning ThreeJS and Fiber.
I loaded the 3D model and added the lights, but it still doesn't look the way I want it to.
Could you tell me what needs to be added so the model looks like the example (please see below)?

Current result:
The result I have

What I need:
enter image description here

Code:

import {Canvas, useFrame, useThree} from '@react-three/fiber';
import {useGLTF} from '@react-three/drei';
import {useRef} from 'react';

const Cell = () => {
  const {nodes, materials} = useGLTF(`${process.env.PUBLIC_URL}/cell.glb`);
  const model = useRef();
  const {clock} = useThree();

  useFrame(() => {
    const t = clock.getElapsedTime() / 2;
    model.current.rotation.set(t, t, t);
  });

  return (
    <group scale={1} ref={model}>
      <mesh
        name="Sphere001"
        geometry={nodes.Sphere001.geometry}
        material={materials.red}
        morphTargetDictionary={nodes.Sphere001.morphTargetDictionary}
        morphTargetInfluences={nodes.Sphere001.morphTargetInfluences}
      />
      <mesh
        name="Sphere001_1"
        geometry={nodes.Sphere001_1.geometry}
        material={materials['GLB GLASS']}
        morphTargetDictionary={nodes.Sphere001_1.morphTargetDictionary}
        morphTargetInfluences={nodes.Sphere001_1.morphTargetInfluences}
      />
    </group>
  );
};

const CellScene = () => {
  return (
    <Canvas orthographic camera={{zoom: 75, position: [0, 0, 500]}}>
      <hemisphereLight intensity={0.4} />
      <spotLight position={[7, 13, 15]} angle={0.3} penumbra={1} intensity={4} />
      <Cell />
    </Canvas>
  );
};
Alexiuscrow
  • 776
  • 2
  • 15
  • 34
  • 1
    Transparent, metallic and other such effect depends on the renderer to render according to their engine. Even if property and values are same but different render engine then it can have different output. – GodWin1100 Aug 27 '22 at 14:06

1 Answers1

0
  • Added some new lights to the scene
  • Updated materials colors & opacity (directly in the useMemo block before useFrame) enter image description here
Alexiuscrow
  • 776
  • 2
  • 15
  • 34