Threejs Wind Turbine

Questions
1

Hi everyone, I have imported a Gltf scene in my threejs project, inspired by this threejs.org example.

My model is this wind turbine:

WindTurbine
WindTurbine1036×1011 111 KB
.
I want to rotate the object “rotor” of my hierarchy on Y-axis, in order to activate the turbine.

I am new on threejs, so I have no idea on how to do it.
Should I create this simple animation in my 3D software, or can I create it directly in the code (prefered way)?

An idea?

:wink: kiveu2000

2

I think this is the easier way, especially when you new to three.js. Assuming you author the animation in Blender, you can export the model as glTF and then access the animations like so after loading:

const loader = new GLTFLoader();
loader.load( 'models/windTurbine.glb', ( gltf ) => {

    const model = gltf.scene;
    const animations = gltf.animations;

    mixer = new AnimationMixer( model );
    mixer.clipAction( animations[ 0 ] ).play(); // play the first animation

} );
3 Likes
3

/cc

4

Thanks a lot for this solution.
My model comes from 3ds max.
I tried to integrate these lines in my code, but my model don’t load anymore. Any mistake?
(The animation works on Babylonjs Sandbox)

Code

Sandbox
Sandbox1145×725 48.6 KB

5

You also have to declare the variable mixer in global scope and update it in your animation loop like so:

if ( mixer ) {

    mixer.update( clock.getDelta() ); // clock is an instance of THREE.Clock

}

You will find this pattern in many existing example, e.g.:

https://threejs.org/examples/#webgl_animation_skinning_morph

2 Likes
6

Wind blows!
Thanks a lot Mugen87 :wink:

I added these two variables:
let mixer, clock;
This line in the init function:
clock = new THREE.Clock();
These lines as you mentionned:
const model = gltf.scene;
const animations = gltf.animations;
mixer = new THREE.AnimationMixer(model);
mixer.clipAction(animations[0]).play();
And this one in animate function:
if ( mixer ) {mixer.update( clock.getDelta() );}

2 Likes