在网页上展示3D模型——使用view3D展示模型

 使用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方法了解到模型被加载，但没有显示出来），误打误撞，设置宽高后模型可以正常加载

参考文件

GLTF文件格式解析与格式转换

gltf格式一、简介

关于GLTF格式的综述、结构与TS解析_gltf vrml-CSDN博客

glTF格式详解(目录)