1

I'm new to Blender, and I'm struggling for days on this fluid simulation.

I have made a fluid simulation that goes well in blender, but it doesn't animated when I try to load the animation through FBX file using Three js.

I assume that my fluid simulation IS NOT SAVED because when I load my FBX file through the blender, all the fluid simulations I baked in the previous file is gone.

Here's my blender file: https://drive.google.com/file/d/1mfIkt0MNRpwBTxYjsX4pgXCAfIaZB7yR/view?usp=sharing

And Here's my javascript:

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

let camera, scene, renderer

const clock = new THREE.Clock();

let mixer;

init(); animate();

function init() {

const container = document.getElementById('canvas');
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 2, 2000);
camera.position.set(0, 10, 30);


scene = new THREE.Scene();


// model 
let loader = new FBXLoader();
loader.load( '../static/assets/martini.fbx', function ( object ) {

    mixer = new THREE.AnimationMixer( object );

    let action = mixer.clipAction( object.animations[ 3 ] );
    action.play();



    object.traverse( function ( child ) {

        if ( child.isMesh ) {

            child.castShadow = true;
            child.receiveShadow = true;

        }

    } );
    object.scale.set(0.01, 0.01, 0.01)
    scene.add( object );

} );

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


const controls = new OrbitControls(camera, renderer.domElement);

controls.update();

}

//

function animate() {

requestAnimationFrame( animate );

const delta = clock.getDelta();

if ( mixer ) {
    mixer.update( delta );
}

renderer.render( scene, camera );

// stats.update();

}

And My current output is so static... I want to make a fluid animation running in Three js.

ChungHa
  • 11
  • 2

0 Answers0