使用GitHub上的3D模型展示库,可以展示.glb
或者.gltf
文件格式的3D模型
Github网址:View3D
代码展示
组件代码
注意:一定要给MyView3D组件设置宽和高,不然无法显示模型
import React from 'react';
import { useRef} from "react";
import View3D from "@egjs/react-view3d";
import "@egjs/react-view3d/css/view3d-bundle.min.css";
function MyView3D({ url }) {
const view3DRef = useRef();
return (
<>
<View3D
ref={view3DRef}
tag="div"
src={url}
// envmap="artist_workshop_1k.hdr"
style={{width:'1000px',height:'1000px'}}
/>
<button onClick={() => {
view3DRef.current.camera.reset();
}}>Reset</button>
</>
);
}
export default MyView3D;
如何使用组件
import './App.css';
import React from 'react';
import MyView3D from './components/MyView3D';
import view from '../src/assets/alarm.glb'
function App() {
const url = 'assets/models/free_1975_porsche_911_930_turbo/scene.gltf'
return (
<div className="App">
<MyView3D url={url}></MyView3D>
</div>
);
}
export default App;
资源位置
展示时,指定.glb
或者.gltf
文件路径,例如assets/models/alarm.glb
结果展示
遇到的问题
1、无法解析文件,响应为HTML文件——文件存放路径问题
一开始我的模型存放路径为src/assets/
路径下,然后在MyView3D组件中引入3D模型资源,结果浏览器提示无法解析3D模型资源,响应结果为一个HTML内容。
找GPT问问吧
- 提问如下:
- GPT回答如下:
- GPT提示需要将静态资源文件放置public文件夹下
- 将3D静态资源文件放至public文件夹下,然后指定正确的访问路径,文件可解析,响应正确
2、模型相关问题:
- 不知道模型格式是否正确
- 尝试使用glTF Validator来验证模型文件
- 看到glTF的GitHub网站 GitHub - KhronosGroup/glTF: glTF – Runtime 3D Asset Delivery中,提到在VScode中查看glTF模型的方法,即下载glTF Tool可以查看,以此验证模型的正确性
- 不知道不同模型格式的区别
- 查看参考文件1
- 不知道展示模型的那个文件
- 经过尝试后知道只需要展示
.glb
或者.gltf
文件即可
- 经过尝试后知道只需要展示
3、可以解析到文件,仍然无法展示模型的问题
- 在模型文件可以被解析到以后(通过
onLoad
方法了解到模型被加载,但没有显示出来),误打误撞,设置宽高后模型可以正常加载