Reputation: 11
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();
}
});
}
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