I’m looking to build a game with ThreeJS, and I’m trying to see if there are any technical limitations as opposed to Unity WebGL.
I created a simple rig and animation in Blender 2.8, which has a bone with a “Stretch To” constraint which will squash and stretch the model.
Here’s what it looks like in Blender:
I’ve exported the file using GLTF and imported it using GLTFLoader, using this code:
var scene, clock, camera, renderer, mixer;
const loader = new THREE.GLTFLoader();
loader.load( 'octahedron.glb', function ( gltf ) {
let model = gltf.scene;
// Setup
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// Import model
const skeleton = new THREE.SkeletonHelper( model );
const animations = gltf.animations;
mixer = new THREE.AnimationMixer( model );
mixer.clipAction( animations[ 0 ] ).play();
// Add model to scene
scene.add( model );
scene.add( skeleton );
// Start render loop
animate();
} );
const animate = function () {
requestAnimationFrame( animate );
mixer.update(clock.getDelta() );
renderer.render( scene, camera );
}
And here’s what it looks like:
It seems like its scaling up and down but the model doesn’t have that squash and stretch effect. How do i get it working?
P.S. I’ve tried importing it as FBX, and it works fine. I just prefer using GLTF as it was recommended in the docs
