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!
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!
Share Improve this question asked Jun 15, 2018 at 10:13 YashguptaYashgupta 2211 gold badge4 silver badges13 bronze badges 2-
1
Can can use
three.jsandTHREE.FBXLoaderfor this. Please have a look at the following example: threejs/examples/webgl_loader_fbx.html – Mugen87 Commented Jun 15, 2018 at 10:20 - That’s why better to provide a live code example with your FBX model. – prisoner849 Commented Jun 15, 2018 at 10:32
2 Answers
Reset to default 2Reference: http://download.autodesk./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:
- A JavaScript file that launches the FBX for QuickTime viewer
- HTML code that refers to the JavaScript file
- The FBX file
To modify a webpage so that it can show FBX files with the FBX for QuickTime viewer:
- 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.
- You will use this script on the web page to launch the FBX for QuickTime viewer.
- Using a web page editor, access the index of the web page where you want to embed the FBX file.
- 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>- Add the JavaScript to your web page code and upload the FBX file you wish to view to the web page index.
For anyone reading now, please use three.js. It is a lightweight library with no dependencies. Great munity 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>
);
}