why isnt my 3d model like what is should be?

Question

i am creating a website with react and next js. i want to display a 3d model in my website. i downloaded a file with glb format and i saw that in this website.

then i displayed the model in my website by using @react-three/fiber, @react-three/drei and three. but there are a lot of differences between the model i saw in the babylon sandbox and my website.

the view that i saw in babylon sandbox

the view that i see in my website

converted codes from the glb file:

import React, { useRef } from 'react'
import { useGLTF } from '@react-three/drei'

export default function Model(props) {
  const { nodes, materials } = useGLTF('/apple-iphone-13-pro-max.glb')
  return (
    <group {...props} dispose={null}>
      <group rotation={[-Math.PI / 2, 0, 0]}>
        <group rotation={[Math.PI / 2, 0, 0]} scale={0.01}>
          <group scale={100}>
            <mesh geometry={nodes.Body_Mic_0.geometry} material={materials.material} />
            <mesh geometry={nodes.Body_Bezel_0.geometry} material={materials.Bezel} />
            <mesh geometry={nodes.Body_Body_0.geometry} material={materials.Body} />
            <mesh geometry={nodes.Body_Wallpaper_0.geometry} material={materials.Wallpaper} />
            <mesh geometry={nodes.Body_Camera_Glass_0.geometry} material={materials.Camera_Glass} />
            <mesh geometry={nodes.Body_Lens_0.geometry} material={materials.Lens} />
            <mesh geometry={nodes.Body_Material_0.geometry} material={materials.Material} />
            <mesh geometry={nodes.Camera_Body_0.geometry} material={materials.Body} />
            <mesh geometry={nodes.Camera_Glass_0.geometry} material={materials.Glass} />
            <mesh geometry={nodes.Camera_Camera_Frame001_0.geometry} material={materials['Camera_Frame.001']} />
            <mesh geometry={nodes.Camera_Mic_0.geometry} material={materials.material} />
            <mesh geometry={nodes.Body001_Screen_Glass_0.geometry} material={materials.Screen_Glass} />
            <mesh geometry={nodes.Button_Frame_0.geometry} material={materials.Frame} />
            <mesh geometry={nodes.Circle003_Frame_0.geometry} material={materials.Frame} />
            <mesh geometry={nodes.Apple_Logo_Logo_0.geometry} material={materials.Logo} />
            <mesh geometry={nodes.Camera001_Body_0.geometry} material={materials.Body} />
            <mesh geometry={nodes.Camera001_Gray_Glass_0.geometry} material={materials.Gray_Glass} />
            <mesh geometry={nodes.Camera001_Flash_0.geometry} material={materials.Flash} />
            <mesh geometry={nodes.Camera001_Port_0.geometry} material={materials.Port} />
            <mesh geometry={nodes.Camera001_Camera_Frame_0.geometry} material={materials.Camera_Frame} />
            <mesh geometry={nodes.Camera001_Camera_Glass_0.geometry} material={materials.Camera_Glass} />
            <mesh geometry={nodes.Camera001_Lens_0.geometry} material={materials.Lens} />
            <mesh geometry={nodes.Camera001_Black_Glass_0.geometry} material={materials.Black_Glass} />
            <mesh geometry={nodes.Camera003_Material002_0.geometry} material={materials['Material.002']} />
            <mesh geometry={nodes.Frame_Frame_0.geometry} material={materials.Frame} />
            <mesh geometry={nodes.Frame_Frame2_0.geometry} material={materials.Frame2} />
            <mesh geometry={nodes.Frame_Port_0.geometry} material={materials.Port} />
            <mesh geometry={nodes.Frame_Antenna_0.geometry} material={materials.Antenna} />
            <mesh geometry={nodes.Frame_Mic_0.geometry} material={materials.material} />
          </group>
        </group>
      </group>
    </group>
  )
}

useGLTF.preload('/apple-iphone-13-pro-max.glb')

the codes of where i display the model:

import React, { Suspense } from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import Model from "./apple-iphone-13-pro-max";

const ModelDisplayer = () => {
  return (
    <Canvas
      camera={{ position: [5, 5, 5], fov: 10 }}
      className="w-full h-full bg-orange-500"
    >
      <Suspense fallback={null}>
        <Model position={[0, 0, 0]} />
      </Suspense>
      <ambientLight intensity={7} />
      <directionalLight intensity={3} />
      <OrbitControls />
    </Canvas>
  );
};

export default ModelDisplayer;

how can i make the model view of my website exactly like the babylon sandbox? (i played a lot with directionalLight and directionalLight but i couldnt make the model of my website exactly like what i saw in babylon sandbox). and i dont have experience in using the above packages and canva. thanks for helping.

Change `fov` to something more human, like `60` and move the camera closer. Now it looks as if you would look at it through a telescope. — Konrad, Aug 29 '22 at 21:23
@KonradLinkowski +1 also try THREE.ACESFilmicToneMapping and add some scene.environment will give a natural look — Cid-Wings, Aug 30 '22 at 07:53
@KonradLinkowski thanks for help. i tried what you said but it made the model a little better and it has some problems yet. for example the sides of the phone are dark and i even cant see the charge port and the speakers. but the back of the pone is now almost like what i saw in `babylon sandbox`. i set the `fov` of `Canvas` to 100 and the `position` to `[0.5, 0.5, 0.5]`. — Saman, Aug 30 '22 at 15:58
@Cid-Wings thanks for help. how can i use these? i tested what you said and i logged `THREE.ACESFilmicToneMapping` and `scene.environment` but these have default value and i changed the default values and i saw no affect. i think the way that i tried your solution is wrong. can you please write a code example? — Saman, Aug 30 '22 at 16:04

hemanth04 · Answer 1 · 2022-09-12T15:26:37.637

0

You can also look into drei Staging

especially you can look into Stage and also Environment components

This will automatically handle proper studio lighting, shadows and more.

EDIT

Usage of Stage from drei

import { Stage } from "@react-three/drei";
...
...

<Stage>
    <Model />
</Stage>

You can add your model component and wrap it in a Stage Component.

You can also add in some props to Stage component such as

intensity
environment
preset
shadows and more.

You can view the documentation for more info here

edited Sep 12 '22 at 15:26

answered Sep 05 '22 at 18:24

hemanth04

16
3

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 11 '22 at 05:00
@hemanth04 hello. thanks for your answer. can you please write an example for me? so i can understand almost exactly what i should do. it'll be nice if you write an example for me. – Saman Sep 11 '22 at 06:06

why isnt my 3d model like what is should be?

1 Answers1