The FBX format is used to provide interoperability between digital content creation applications and game engines such as Blender, Maya, Autodesk, Unity, Unreal and many others.
It supports many features such as 3D models, scene hierarchy, materials, lighting, animations, bones and more.
Resources
For this exercise, you should download the character model named "Kachujin G Rosales" from Mixamo and save it into your ./dist/client/models folder. Save it using the FBX Binary(.fbx) and T-Pose options.
import*asTHREEfrom'three'import{OrbitControls}from'three/examples/jsm/controls/OrbitControls'import{FBXLoader}from'three/examples/jsm/loaders/FBXLoader'importStatsfrom'three/examples/jsm/libs/stats.module'constscene=newTHREE.Scene()scene.add(newTHREE.AxesHelper(5))constlight=newTHREE.PointLight()light.position.set(0.8,1.4,1.0)scene.add(light)constambientLight=newTHREE.AmbientLight()scene.add(ambientLight)constcamera=newTHREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)camera.position.set(0.8,1.4,1.0)constrenderer=newTHREE.WebGLRenderer()renderer.setSize(window.innerWidth,window.innerHeight)document.body.appendChild(renderer.domElement)constcontrols=newOrbitControls(camera,renderer.domElement)controls.enableDamping=truecontrols.target.set(0,1,0)//const material = new THREE.MeshNormalMaterial()constfbxLoader=newFBXLoader()fbxLoader.load('models/Kachujin G Rosales.fbx',(object)=>{// object.traverse(function (child) {// if ((child as THREE.Mesh).isMesh) {// // (child as THREE.Mesh).material = material// if ((child as THREE.Mesh).material) {// ((child as THREE.Mesh).material as THREE.MeshBasicMaterial).transparent = false// }// }// })// object.scale.set(.01, .01, .01)scene.add(object)},(xhr)=>{console.log((xhr.loaded/xhr.total)*100+'% loaded')},(error)=>{console.log(error)})window.addEventListener('resize',onWindowResize,false)functiononWindowResize(){camera.aspect=window.innerWidth/window.innerHeightcamera.updateProjectionMatrix()renderer.setSize(window.innerWidth,window.innerHeight)render()}conststats=newStats()document.body.appendChild(stats.dom)functionanimate(){requestAnimationFrame(animate)controls.update()render()stats.update()}functionrender(){renderer.render(scene,camera)}animate()