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.