How can the bones of this FBX Character be controlled correctly?

Questions
,
1

I load and control this character like everyone else, but nothing moves. The assignment of the bones is largely identical, I do not quite understand why it works for most and not for this one. Where is the problem ? Does anyone have a solution?

var loader = new THREE.FBXLoader();	
    loader.load( "./three/models/FBX/Eric.fbx", function ( object ) { 

   //object.getObjectByName( "rp_eric_rigged_001_geo" ).material.forEach( ( subMat ) => subMat);
     object.getObjectByName( 'rp_eric_rigged_001_geo'); 

     object.scale.set( 0.35, 0.22, 0.35 );            
     object.position.set( -2.1, -37.50, -0.50 );	     
     object.rotation.set( 0.0, 1.55, 0.0 );      

     scene.add( object );

		mesh = object.children[ 1 ]; 

		object.traverse( function ( child ) {		
			if ( child.isMesh ) { console.log( child ) } 
			} 
		) 

render();

Character Eric, Download

Name
Name1303×20 9.73 KB

Bones
Bones813×783 157 KB

error

Thanks for Help !

2

I’ve downloaded your FBX file and used the code from the official FBX example to load it. Everything seems to work fine. I’m unable to reproduce the mentioned error message.

This is the code I have tested with:

import * as THREE from '../build/three.module.js';

import Stats from './jsm/libs/stats.module.js';

import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { FBXLoader } from './jsm/loaders/FBXLoader.js';

var container, stats, controls;
var camera, scene, renderer, light;

init();
animate();

function init() {

	container = document.createElement( 'div' );
	document.body.appendChild( container );

	camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
	camera.position.set( 100, 200, 300 );

	scene = new THREE.Scene();
	scene.background = new THREE.Color( 0xa0a0a0 );
	scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );

	light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
	light.position.set( 0, 200, 0 );
	scene.add( light );

	light = new THREE.DirectionalLight( 0xffffff );
	light.position.set( 0, 200, 100 );
	light.castShadow = true;
	light.shadow.camera.top = 180;
	light.shadow.camera.bottom = - 100;
	light.shadow.camera.left = - 120;
	light.shadow.camera.right = 120;
	scene.add( light );

	// scene.add( new CameraHelper( light.shadow.camera ) );

	// ground
	var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
	mesh.rotation.x = - Math.PI / 2;
	mesh.receiveShadow = true;
	scene.add( mesh );

	var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
	grid.material.opacity = 0.2;
	grid.material.transparent = true;
	scene.add( grid );

	// model
	var loader = new FBXLoader();
	loader.load( 'models/fbx/Eric.fbx', function ( object ) {

		object.getObjectByName( 'rp_eric_rigged_001_geo' );

		object.scale.set( 0.35, 0.22, 0.35 );
		object.position.set( - 2.1, - 37.50, - 0.50 );
		object.rotation.set( 0.0, 1.55, 0.0 );

		scene.add( object );

		mesh = object.children[ 1 ];

		object.traverse( function ( child ) {

			if ( child.isMesh ) {

				console.log( child );

			}

		} );

	} );

	renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );
	renderer.shadowMap.enabled = true;
	container.appendChild( renderer.domElement );

	controls = new OrbitControls( camera, renderer.domElement );
	controls.target.set( 0, 100, 0 );
	controls.update();

	window.addEventListener( 'resize', onWindowResize, false );

	// stats
	stats = new Stats();
	container.appendChild( stats.dom );

}

function onWindowResize() {

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

	renderer.setSize( window.innerWidth, window.innerHeight );

}

//

function animate() {

	requestAnimationFrame( animate );

	renderer.render( scene, camera );

	stats.update();

}
3

Thanks for the answer, yes the character is loaded and appears as it should, but as soon as I want to control the bones, I get the errors. Hence an example with DatGui, which can be used to demonstrate this. Does that work for you too? Or do you get errors = (TypeError: mesh.skeleton is undefined) ?

// model
var loader = new FBXLoader();
loader.load( 'models/fbx/Eric.fbx', function ( object ) {

	object.getObjectByName( 'rp_eric_rigged_001_geo' );

	object.scale.set( 0.35, 0.22, 0.35 );
	object.position.set( - 2.1, - 37.50, - 0.50 );
	object.rotation.set( 0.0, 1.55, 0.0 );

	scene.add( object );

	mesh = object.children[ 1 ];

	object.traverse( function ( child ) {

		if ( child.isMesh ) {

			console.log( child );

		}

	} );

} );

//dat.Gui
				
var params = {	 
 
 bone0: 0.0,
 bone1: 0.0,
 
}

var gui = new dat.GUI();		 
var folder = gui.addFolder( 'Bones' );
 
    folder.add( params, 'bone0', -1, 1 ).step( 0.01 ).name('head').onChange( function( value ) { mesh.skeleton.bones[ 6 ].rotation.x = value;});
    folder.add( params, 'bone0', -1, 1 ).step( 0.01 ).name('head').onChange( function( value ) { mesh.skeleton.bones[ 6 ].rotation.y = value;});

    folder.add( params, 'bone1', -1, 1 ).step( 0.01 ).name('jaw').onChange( function( value ) { mesh.skeleton.bones[ 8 ].rotation.x = value;});
    folder.add( params, 'bone1', -1, 1 ).step( 0.01 ).name('jaw').onChange( function( value ) { mesh.skeleton.bones[ 8 ].rotation.y = value;});

UPDATE:

I found the mistake, I searched too far, thanks for the support!

mesh = object.children[ 0 ];
1 Like