# Math experts: is there anything you wish Three.js math library had?

**URL:** <https://discourse.threejs.org/t/math-experts-is-there-anything-you-wish-three-js-math-library-had/74612>\
**Category:** Discussion\
**Tags:** math\
**Created:** [November 30, 2024, 6:30pm UTC](https://discourse.threejs.org/t/math-experts-is-there-anything-you-wish-three-js-math-library-had/74612 "2024-11-30T18:30:11Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![trusktr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trusktr/32/13726_2.png) [@trusktr](https://discourse.threejs.org/u/trusktr)\
**Post date:** [November 30, 2024, 6:30pm UTC](https://discourse.threejs.org/t/math-experts-is-there-anything-you-wish-three-js-math-library-had/74612/1 "2024-11-30T18:30:12Z")

</div>

Hello math experts, I’m just curious, are there any operations, for example for Matrix4, Quaternion, etc, that you sometimes wish Three.js included? And are there other libraries (even in other languages) that show these features?

Desires collected from the thread below:

1. [coordinate system flexibility](https://discourse.threejs.org/t/math-experts-is-there-anything-you-wish-three-js-math-library-had/74612/2) - F.e. specify up/down/left/right/forward/backward, and rotation handedness, to make it easy to apply maths between coordinate systems, useful with assets from external systems designed in alternate coordinate systems
  - Example libraries or frameworks with this feature:
    - [Suica](https://boytchev.github.io/suica/docs/suica.html#orientation) - HTML 3D elements with configurable coordinate system
    - [Oito](https://github.com/sketchpunklabs/oito/blob/c8de32da62911407727f0f761a2215947c081ac1/src/oop/Vec3.ts#L8-L15) - Math library similar to Three math classes, with configurable coordinate system (at least axes, not sure about rotation handedness).

2. [`Quaternion.setFromBasis()`](https://discourse.threejs.org/t/quaternion-method-setfrombasis-e1-e2-e3/27407) - needs description
3. [more interpolation methods](https://github.com/Fennec-hub/three-span) - More ways to interpolate (f.e. animate) between the values of three.js math classes like Vectors, Euler, Quaternion, and Color.

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [November 30, 2024, 6:55pm UTC](https://discourse.threejs.org/t/math-experts-is-there-anything-you-wish-three-js-math-library-had/74612/2 "2024-11-30T18:55:05Z")

</div>

It is not quite often, but sometimes I wish there is an easy way to use various orientations of the coordinate system (e.g. left-/right-handedness and X-/Y-/Z-upness). When making Suica I had to add a coordinate-system-agnostic behaviour, and it was harder than I had expected. It is not just a matter of a different matrix.

[Docs in Suica](https://boytchev.github.io/suica/docs/suica.html#orientation)

[Demo 1](https://boytchev.github.io/suica/examples/suica-orientation.html)  
[Demo 2 with orbit controls](https://boytchev.github.io/suica/examples/orbit-orientation.html)  
[Demo 3 with sizes](https://boytchev.github.io/suica/examples/sizes-orientation.html)  
[Demo 4 with rotations](https://boytchev.github.io/suica/examples/spin-orientation.html)

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [November 30, 2024, 7:22pm UTC](https://discourse.threejs.org/t/math-experts-is-there-anything-you-wish-three-js-math-library-had/74612/3 "2024-11-30T19:22:12Z")

</div>

I needed a method for Quaternion and, as I couldn’t find it at three.js, I created it myself.

> [@Quaternion - method .setFromBasis( e1, e2, e3 )](https://discourse.threejs.org/t/quaternion-method-setfrombasis-e1-e2-e3/27407):
>
> These posts and examples are about movement on a curve. [Struggling with paths - #14 by hofk](https://discourse.threejs.org/t/struggling-with-paths/26486/14)[Car Racing - For lovers of fast cars!](https://discourse.threejs.org/t/car-racing-for-lovers-of-fast-cars/27160)[MotionAlongCurve](https://hofk.de/main/discourse.threejs/2021/MotionAlongCurve/MotionAlongCurve.html)[MovementOnCurve](https://hofk.de/main/discourse.threejs/2021/MovementOnCurve/MovementOnCurve.html)[CarRacing](https://hofk.de/main/discourse.threejs/2021/CarRacing/CarRacing.html) However, the solution via matrices requires computational effort. I have been looking for a solution with quaternions that requires fewer formula steps. The solution is a new method in the quaternion class. I added it to three.module.129.Quaternion.js in the example [BasisToQuaternion](https://hofk.de/main/discourse.threejs/2021/BasisToQuaternion/BasisToQuaternion.html). This makes the calculat…

---

<div class="post-metadata">

**Author:** ![Fennec](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fennec/32/59265_2.png) [@Fennec](https://discourse.threejs.org/u/Fennec)\
**Post date:** [December 1, 2024, 5:00am UTC](https://discourse.threejs.org/t/math-experts-is-there-anything-you-wish-three-js-math-library-had/74612/4 "2024-12-01T05:00:47Z")

</div>

More interpolation options?

> **[GitHub - Fennec-hub/three-span: Three.js interpolation on steroids](https://github.com/Fennec-hub/three-span)**
>
> Three.js interpolation on steroids

Work in progress…

P.S. _Not a math expert, just a weirdo hanging around 😅_

---

<div class="post-metadata">

**Author:** ![trusktr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trusktr/32/13726_2.png) [@trusktr](https://discourse.threejs.org/u/trusktr)\
**Post date:** [December 1, 2024, 7:57pm UTC](https://discourse.threejs.org/t/math-experts-is-there-anything-you-wish-three-js-math-library-had/74612/5 "2024-12-01T19:57:04Z")

</div>

> [@PavelBoytchev](#):
>
> Docs in Suica

Hey, first of all, that’s pretty cool! I wasn’t aware of your HTML 3D lib Suica. We’re both making HTML elements for 3D. Mine’s over at [lume.io](https://lume.io/). Sending love to our cousin A-Frame. 😛

> [@PavelBoytchev](#):
>
> sometimes I wish there is an easy way to use various orientations of the coordinate system (e.g. left-/right-handedness and X-/Y-/Z-upness)

Yes, me too! It would be really useful to make people’s live easier when translating into different coordinate systems. For example

- with Lume, I wrote some ugly maths to convert from Lume’s CSS3D/DOMMatrix coordinate system (f.e. Y down, left handed rotation) to Three’s coordinate system.
- sometimes we have to import objects written in other coordinate systems, or we want to replicate them and their math functions in Three coordinate system.

> **That's really interesting that you made the coordinate system configurable in Suica. I'll get some inspiration from that. I've been wondering how to do it in Lume...**
>
> f.e. should I apply it at the whole scene level for all nodes in the scene, or per each element’s local space to keep it encapsulated?
> 
> If I do it at the whole scene level for all nodes, then it could negatively affect sub-elements written in a certain way, but if I do it at the local space level in an element’s `ShadowRoot` I could scope the local coordinate system only to that element’s shadow content (Lume elements are [Custom Elements](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) that can have [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM)).
> 
> I would love to learn more about how you did that in Suica. Will you post some tutorials or videos? I will subscribe! 😃 Why haven’t I been following [you](https://x.com/PavelBoytchev) on X-Formerly-Twitter? I just followed you from [my X account](https://x.com/trusktr). I really like [Bluesky](https://bsky.social) more now though, really awesome _open source_ social network, with [community-contributed feed algorithms](https://bsky.social/about/faq) (instead of a single org’s proprietary profit-driven feed algo), and the engagement there is notably [more meaningful](https://bsky.app/profile/joe.trusktr.io/post/3lc6wi2h6f22b) (here’s [my profile](https://bsky.app/profile/joe.trusktr.io)).

I’ll update the OP to list all the desires we uncover in this thread.

---

<div class="post-metadata">

**Author:** ![trusktr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trusktr/32/13726_2.png) [@trusktr](https://discourse.threejs.org/u/trusktr)\
**Post date:** [December 1, 2024, 8:02pm UTC](https://discourse.threejs.org/t/math-experts-is-there-anything-you-wish-three-js-math-library-had/74612/6 "2024-12-01T20:02:37Z")

</div>

@hofk Cool! Can you please update that thread to add a description of what “set from basis” means, and what a “basis” is, for the non-math people like me (I mean, I graduated in Comp Sci, but I forgot all the math I haven’t needed to use heh)?

At the moment all we can see there is the name of the method, `setFromBasis`, followed by a bunch of cryptic maths.

Having a useful description will be great so that we can justfiy why exactly we need it, then end users will have a better idea what to do with it in a practical sense (without necessarily knowing the actual math).

@Fennec Hey, same for you, can you please describe what your library is for? A math n00b can only begin to guess what the meaning of “interpolation on steroids” might be, and the rest is all code. A description of what the lib does and what problems it solves would be great.

@Fennec @hofk I updated the OP, but still need description to understand the problems/solutions.

---

<div class="post-metadata">

**Author:** ![Fennec](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fennec/32/59265_2.png) [@Fennec](https://discourse.threejs.org/u/Fennec)\
**Post date:** [December 1, 2024, 10:33pm UTC](https://discourse.threejs.org/t/math-experts-is-there-anything-you-wish-three-js-math-library-had/74612/8 "2024-12-01T22:33:11Z")

</div>

“interpolation on steroids” is just a catchy tagline 😅. It was originally part of an upcoming particle effect engine, but it felt too good to keep buried inside that project. So, I decided to break it out into its own library. The goal is to provide more interpolation options for three.js math classes (Vectors, `Euler`, `Quaternion`, and `Color`)

If you’ve worked with Unity, Godot, or even Unreal’s particle systems, you’ll recognize similar interpolation options when defining the animation variables. These give you the same flexibility when defining animations and transitions.

The new methods interpolate a value in several ways, and all methods support a noise function. (_At the moment only the simplex noise is supported_)

> 1. **value** : A single value representing a constant value (Unless the noise is defined).
> 
> 2. **RandomLerp** : A random linear interpolation between two values, `start` and `end`.
> 
> 3. **Random** : Picks a random value per axis within a `start` to `end` range.
> 
> 4. **lerp** : A Lerp method determined by an easing function, using a `start` and `end` range.
> 
> 5. **Curve** : A curve made of key steps between 0 and 1, with scaling for each step. It can be defined for one axis or multiple axes. It supports three modes:
> 
> 6. **Array** : Picks a value from a predefined array, with different options for selection:
> 
> 7. **gradient** : Gradually Interpolate the gradient values. Especially useful with colors but can be used with any class.

It’s built with performance in mind and should handle millions of particles per frame! The core is mostly done, and I believe the best way to explain how it works is through examples. I’m currently working on the documentation, and examples are on the way!

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [December 2, 2024, 10:51am UTC](https://discourse.threejs.org/t/math-experts-is-there-anything-you-wish-three-js-math-library-had/74612/9 "2024-12-02T10:51:43Z")

</div>

Notes supplemented with example  
[Quaternion - method .setFromBasis( e1, e2, e3 )](https://discourse.threejs.org/t/quaternion-method-setfrombasis-e1-e2-e3/27407)