How to Use FBX Models with three.js

Question

I'm studying computer graphics with WebGL and want to utilize Three.js to draw FBX models. I have succeeded in loading the FBX models that are shared for free, but I don't know how to add textures and other details. In the downloaded file, there is one fbx file and several png files in a folder called maps, and I was wondering how to use them.

import * as THREE from '../three/build/three.module.js';
import { FBXLoader } from '../three/examples/jsm/loaders/FBXLoader.js';
import { OrbitControls } from '../three/examples/jsm/controls/OrbitControls.js';


window.onload = function init() {

  const canvas = document.getElementById("gl-canvas");
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  const renderer = new THREE.WebGLRenderer({ canvas });
  renderer.setSize(canvas.width, canvas.height);

  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0xffffff);

  const camera = new THREE.PerspectiveCamera(75, canvas.width / canvas.height, 0.1, 1000);
  const contorls = new OrbitControls(camera, renderer.domElement);

  const light = new THREE.DirectionalLight(0xffffff, 1);
  light.position.set(1, 1, 1).normalize();
  scene.add(light);


  camera.position.z = 5;
  camera.position.y = 5;
  camera.rotation.x = THREE.MathUtils.degToRad(-30);


  const loader = new FBXLoader();
  loader.load('../assets/Hoonicorn.fbx', function (object) {
    scene.add(object);
    object.scale.set(0.1, 0.1, 0.1);

    if (object.animations && object.animations.length > 0) {
      const mixer = new THREE.AnimationMixer(object);
      const action = mixer.clipAction(object.animations[0]);
      action.play();

      const clock = new THREE.Clock();

      function animate() {
        requestAnimationFrame(animate);
        const delta = clock.getDelta();
        mixer.update(delta);
        renderer.render(scene, camera);
      }
      animate();
    } else {
      function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
      }
      animate();
    }
  });
}

This is the FBX model once I loaded it. When I actually downloaded it, the image was cosmetically decorated.

I was wondering if there is a way to verify that the additional downloaded FBX models are animating separately.

I tried using blender to open the fbx file, but I don't know how to use blender. I'm a complete beginner.

This should be helpful.

Łukasz Daniel Mastalerz
– Łukasz Daniel Mastalerz

2024-10-16 04:07:14 +00:00
Commented Oct 16, 2024 at 4:07 — Łukasz Daniel Mastalerz
– Łukasz Daniel Mastalerz, Commented Oct 16, 2024 at 4:07

Jaap Moerkerk · Accepted Answer · 2025-04-17 05:30:12Z

0

ThreeJS provides very little support for FBX materials if it gets a little more complicated, like PBR textures. I understand that you want to avoid Blender if you haven't used it yet, but I think you can manage loading it in and then, if it all looks okay, export the same model in glTF (.glb) format, which works way better in ThreeJS.

Tutorial on converting FBX to glTF with Blender

answered Apr 17 at 5:30

Jaap Moerkerk

593 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to Use FBX Models with three.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related