binary_right_010.011
binary_right_010.011

Reputation: 11

How to Use FBX Models with three.js

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.

Upvotes: 1

Views: 63

Answers (0)

Related Questions