如何使用一些Js库在HTML页面中播放或查看.FBX文件？

Question

如何使用一些Js库在HTML页面中播放或查看.FBX文件？

4

我想在我的HTML页面中播放或查看3D模型，目前我只能使用JavaScript播放.Obj文件，有没有办法也可以在我的页面上查看.Fbx模型？我已经搜索了几个小时，但没有找到有效的方法。我也尝试使用Three.js，但是.fbx无法工作，请帮忙！

- Yashgupta

1

可以使用 three.js 和 THREE.FBXLoader 来实现。请查看以下示例：https://threejs.org/examples/webgl_loader_fbx.html - Mugen87

这就是为什么最好提供一个带有FBX模型的实时代码示例。 - prisoner849

2个回答

0

对于现在正在阅读的任何人，请使用three.js。它是一个没有依赖关系的轻量级库。拥有众多支持者和可访问多种不同UI框架。

这里有一个示例实现https://codesandbox.io/s/github/littlecow12138/FBXLoader/tree/main/?file=/src/App.js:339-349

要点是（在@react-three/fiber中）：

export default function App() {
  // get the fbx
  const fbx = useLoader(FBXLoader, "Poimandres.fbx");
  // render the fbx in a scene
  return (
    <div className="App">
      <Canvas>
        <Suspense fallback={null}>
          <primitive object={fbx} scale={0.005} />
          <OrbitControls />
          <Environment preset="sunset" background />
        </Suspense>
      </Canvas>
    </div>
  );
}

- Liam Pillay

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- variable · Accepted Answer

参考： http://download.autodesk.com/us/fbx/2013/FBXforQT/index.html?url=files/GUID-06AEDF68-DB24-4818-95D5-1CF7458E051B.htm,topicNumber=d30e707

如何在网页上嵌入FBX文件:

通过添加指向FBX文件的JavaScript文件到网站根目录来完成。

为此，必须将以下三个内容添加到页面索引中：

启动FBX for QuickTime查看器的JavaScript文件
引用JavaScript文件的HTML代码
FBX文件

要修改网页以显示使用FBX for QuickTime查看器的FBX文件：

从这里下载AC_QuickTime.js JavaScript代码。 请注意，此链接未在参考网站中提到，因此我是通过Google搜索找到它的。
您将在网页上使用此脚本来启动FBX for QuickTime查看器。
使用网页编辑器访问您想要嵌入FBX文件的网页的索引。
编写以下HTML代码。此代码指向您下载的JavaScript文件：

     <html>
        <head>
        <title>Embedded FBX QuickTime movie in a web page</title>
        <script src="AC_QuickTime.js" language="JavaScript" type="text/javascript"></script>
        </head>
        <body bgcolor="#6699FF">
        <h1>Embedded FBX file in a web page</h1>
        <div/>
        <script language="JavaScript" type="text/javascript">
        QT_WriteOBJECT_XHTML('Tester.FBX', '800', '600', '',
            'autoplay', 'true',
            'emb#bgcolor', 'black',
            'align', 'middle'); 
        </script>
        <hr/>An fbx file should be playing now above, using a QuickTime player embedded.
        </body>
        </html>

将JavaScript添加到您的网页代码并上传要查看的FBX文件到网页索引。