I have been working on a website using React and Next.js, and I am trying to incorporate a 3D model into my site. After downloading a file in glb format, I noticed some discrepancies between the model I saw on this website and the one displayed on my own website.
Using @react-three/fiber, @react-three/drei, and three, I managed to display the model on my website. However, the view was different from what I observed in the Babylon Sandbox:
Here are the converted codes from the glb file:
// Code for importing and displaying the model
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]}>
// Additional mesh components...
</group>
</group>
)
}
useGLTF.preload('/apple-iphone-13-pro-max.glb')
And here is where I display the model:
// Code for rendering the model with lighting and controls
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;
I have tried adjusting the directionalLight and ambientLight settings but couldn't achieve the same model view as seen in the Babylon Sandbox. As I lack experience with these packages and the canvas element, any guidance on how to match the views would be greatly appreciated. Thank you for your help!