4

I'm trying to play or view 3D model in my html pages, Currently i am able to play only .Obj file using JavaScript, is there any way that i can also view .Fbx model in my page, i am searching for hours but didn't get any working, i also try using Three.js but .fbx is not working please Help!

Yashgupta
  • 203
  • 1
  • 3
  • 12
  • 1
    Can can use `three.js` and `THREE.FBXLoader` for this. Please have a look at the following example: https://threejs.org/examples/webgl_loader_fbx.html – Mugen87 Jun 15 '18 at 10:20
  • That’s why better to provide a live code example with your FBX model. – prisoner849 Jun 15 '18 at 10:32

2 Answers2

2

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

Embedding FBX files on a web page

Do this by adding a JavaScript file that points to the FBX file to the website root directory.

To do this, you must add the following three things to the index of the page:

  1. A JavaScript file that launches the FBX for QuickTime viewer
  2. HTML code that refers to the JavaScript file
  3. The FBX file

To modify a webpage so that it can show FBX files with the FBX for QuickTime viewer:

  1. Download the AC_QuickTime.js JavaScript code from here. Note this link is not mentioned on the reference website so I found it via google search.
  2. You will use this script on the web page to launch the FBX for QuickTime viewer.
  3. Using a web page editor, access the index of the web page where you want to embed the FBX file.
  4. Write the following HTML code. This code points to the JavaScript file that you downloaded:

     <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>
  1. Add the JavaScript to your web page code and upload the FBX file you wish to view to the web page index.
variable
  • 8,262
  • 9
  • 95
  • 215
  • Where i can find AC_QuickTime.js file ,There is no links i found – Yashgupta Jun 15 '18 at 11:07
  • Updated the answer to include the link: https://developer.apple.com/library/archive/samplecode/HTML_video_example/Listings/ac_quicktime_js.html – variable Jun 15 '18 at 11:14
  • Hi thanks a lot for helping me, i tried this but don't know why its not working for me [zip file](https://arvrintedu.com/fbx/file.zip) here is the link what i build – Yashgupta Jun 15 '18 at 11:26
  • It just show me a blue page with some texts about my fbx file – Ali pishkari Aug 01 '20 at 11:05
0

For anyone reading now, please use three.js. It is a lightweight library with no dependencies. Great community support and accessible across many different UI frameworks.

Example implementation here https://codesandbox.io/s/github/littlecow12138/FBXLoader/tree/main/?file=/src/App.js:339-349

The gist is (in @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
  • 592
  • 1
  • 4
  • 19