为什么我的三维模型不是应该有的样子

Question

我正在创建一个带有react和next-js的网站。我想在我的网站上显示一个三维模型。我下载了一个glb格式的文件，并在这个网站上看到了它。

然后我使用@react-three/fiber、@react-three/drei和three在我的网站上显示模型。但我在babylon sandbox中看到的模型和我的网站之间有很多不同。

我在巴比伦沙箱中看到的视图

我在我的网站中看到的视图

从glb文件转换的代码：

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')

我显示模型的代码：

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;

如何使我的网站的模型视图与babylon sandbox完全一样？(我玩了很多directionalLight和directionalLight，但我无法使我的网站模型与我在babylon sandbox中看到的完全一样(。我没有使用上述软件包和canva的经验。谢谢你的帮助。

Answer 1

您还可以查看drei Staging

特别是你可以查看阶段和环境组件

这将自动处理适当的工作室照明、阴影等。

编辑

来自drei 的阶段的使用

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

您可以添加模型组件并将其包装在阶段组件中。

你也可以在舞台组件中添加一些道具，比如

• 强度
• 环境
• 预置
• 阴影等等

您可以在此处查看文档以获取更多信息