Table of Contents
Summary
Controls
What to Do
Animations
Components
Favorites
Difficulties
Future Builds
Open Demo >
Summary
An experimental scene filled will many different types of animated properties and material tests for visual references.
Controls
View Cursor Movement
- Desktop - Mouse
- Mobile - Gyro / Swipe
- VR - Headset
Movement (Desktop Only)
- Desktop - Keyboard [WASD]
What to Do
Use the View Cursor to look around the 360 environment of the various animations to get an idea of what kind of animations can look smooth through their cycles. All animations avoid the bool type which are merely timed on / off switches.
Animations
Entity Properties with Tween Support
- Rotation
- Position
- Scale
- Material > Emissive Color
- Material > Emissive Intensity
- Material > Color
- Material > Opacity
- Light > Color
- Light > Angle
- Light > Intensity
- Light > Distance
- Light > Decay
- Light > Penumbra
Geometry Properties with Tween Illusion
Geometry animation is very heavy on performance as it creates new mesh on every tick, but used minimally could look very cool.
- Geometry > Depth
- Geometry > Height
- Geometry > Q
- Geometry > P
- Geometry > Phi Length
- Geometry > Radius
- Geometry > Radius Top
- Geometry > Radius Tubular
- Geometry > Segments
- Geometry > Segments Height
- Geometry > Segments Width
- Geometry > Segments Depth
- Geometry > Segments Phi
- Geometry > Segments Radial
- Geometry > Segments Theta
- Geometry > Segments Tubular
- Geometry > Theta Start
- Geometry > Theta Length
- Geometry > Vertex A
- Geometry > Width
Public Components
Favorites
That lights are so animateable. Practically every property can be tweened and really has the potential for some fascinating light shows and effects.
Difficulties
The anchor point of an entity always being dead center. It's not adjustable within A-Frame from my research and I could not find a component or a ThreeJS way I could integrate to tweak that anchor position. It made animating something growing or shrinking in 1 direction very difficult, for example. The blue bar growing and shrinking has 2 animations. 1 for growing and 1 to animate the position in attempt to compensate as if it's anchor point was on the left edge. It does not look very good too.
And finding out Geometry animations being so heavy. This scene has way too much of it, but it's okay for a test scene.
What I want to build upon this, in the future...
So many more possibilities for built-in animations especially if creating a manual animation component in javascript. Something like making a typewriter reveal effect for text display. There are also a good amount of additional Javascript frameworks like ammo.js and anime.js that can be integrated, but also smaller abstract ones like that many vtubers use to rigify their body to a 3D avatar via camera. Translating something that into the XR ecosystem would be a huge boon for it's immersive qualities.
Thank you for your time!
- Minty Crisp ^-^
Top comments (0)