CODEWITHSUNDEEP
aframe
NellyCeleste
NellyCeleste

Reputation: 43

How to rotate a glTF model on the spot in A-Frame?

I am rotating a glTF model of the moon. I want it to rotate around its center, rather than around the center of the scene.

I tried the answer here: How to change the rotation axis for an animated A-Frame object? but it doesn't seem to work for me (the object doesn't rotate at all).

I have tried the code here as well: https://blog.prototypr.io/learning-a-frame-how-to-do-animations-2aac1ae461da But the object doesn't rotate when I use that either.

So far I have only been able to get it to rotate using this code:

<a-entity gltf-model="#moon" scale="0.5 0.5 0.5" position="0 0 0"  
animation="property: rotation; to: 0 360 0; loop: true; dur: 10000"></a-entity>

But using that, it rotates around the center of the scene rather than rotating on it's own central axis, if that makes sense. (Global axis rather than local axis?)

This is how I am loading in A-Frame:

<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>

Upvotes: 2

Views: 2714

Answers (2)

Thomas Williams
Thomas Williams

Reputation: 862

The other way to fix this is to place your axis in the 3D app that created the model, and export the gltf again.

Upvotes: 0

Niraj
Niraj

Reputation: 373

Add a parent entity around it then the model will rotate around that.

<a-entity>
<a-entity gltf-model="#moon" scale="0.5 0.5 0.5" position="0 0 0"  
animation="property: rotation; to: 0 360 0; loop: true; dur: 10000"></a-entity>
</a-entity>

Upvotes: 4

Related Questions