# Car Racing - For lovers of fast cars!

**URL:** <https://discourse.threejs.org/t/car-racing-for-lovers-of-fast-cars/27160>\
**Category:** Resources\
**Tags:** animation, matrix\
**Created:** [June 11, 2021, 1:25pm UTC](https://discourse.threejs.org/t/car-racing-for-lovers-of-fast-cars/27160 "2021-06-11T13:25:31Z")\
**Posts on this page:** 6\
**Page:** 1

<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:** [June 11, 2021, 1:25pm UTC](https://discourse.threejs.org/t/car-racing-for-lovers-of-fast-cars/27160/1 "2021-06-11T13:25:31Z")

</div>

A quick race.

[CarRacing](https://hofk.de/main/discourse.threejs/2021/CarRacing/CarRacing.html)

 ![2021-06-11 15.19.43](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/5/053a8dd7aa926d51ee07f1a000e8dfe2662a27c3.png)

![2021-06-11 15.18.50](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/a/0a56ceb477282ed02d6d3ea96955983970ee4ae6.png)

* * *

Furthermore I have updated my old example RoadRace from the addon  
[Addon to create special / extended geometries - #5 by hofk](https://discourse.threejs.org/t/addon-to-create-special-extended-geometries/1855/5)  
to a new state. [THREEg.js/examples at master · hofk/THREEg.js · GitHub](https://github.com/hofk/THREEg.js/tree/master/examples)

See also  
[Struggling with paths](https://discourse.threejs.org/t/struggling-with-paths/26486)  
[BeginnerExample](https://hofk.de/main/discourse.threejs/BeginnerExample/BeginnerExample.html) // … step 15: matrix, move along room curve

* * *

**Added** a version with **quaternions**. ✅

[CarRacingQuaternion](https://hofk.de/main/discourse.threejs/2021/CarRacing/CarRacingQuaternion.html)

uses

```javascript
THREE.Quaternion.prototype.setFromBasis = function( e1, e2, e3 ) {
	
	const	m11 = e1.x, m12 = e1.y, m13 = e1.z,
			m21 = e2.x, m22 = e2.y, m23 = e2.z,
			m31 = e3.x, m32 = e3.y, m33 = e3.z,
			trace = m11 + m22 + m33;

	if ( trace > 0 ) {

		const s = 0.5 / Math.sqrt( trace + 1.0 );

		this._w = 0.25 / s;
		this._x = -( m32 - m23 ) * s;
		this._y = -( m13 - m31 ) * s;
		this._z = -( m21 - m12 ) * s;

	} else if ( m11 > m22 && m11 > m33 ) {

		const s = 2.0 * Math.sqrt( 1.0 + m11 - m22 - m33 );

		this._w = ( m32 - m23 ) / s;
		this._x = -0.25 * s;
		this._y = -( m12 + m21 ) / s;
		this._z = -( m13 + m31 ) / s;

	} else if ( m22 > m33 ) {

		const s = 2.0 * Math.sqrt( 1.0 + m22 - m11 - m33 );

		this._w = ( m13 - m31 ) / s;
		this._x = -( m12 + m21 ) / s;
		this._y = -0.25 * s;
		this._z = -( m23 + m32 ) / s;

	} else {

		const s = 2.0 * Math.sqrt( 1.0 + m33 - m11 - m22 );

		this._w = ( m21 - m12 ) / s;
		this._x = -( m13 + m31 ) / s;
		this._y = -( m23 + m32 ) / s;
		this._z = -0.25 * s;

	}
	
	this._onChangeCallback();

	return this;
 
}

```

---

<div class="post-metadata">

**Author:** ![Usnul](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/usnul/32/2355_2.png) [@Usnul](https://discourse.threejs.org/u/Usnul)\
**Post date:** [June 12, 2021, 2:49pm UTC](https://discourse.threejs.org/t/car-racing-for-lovers-of-fast-cars/27160/2 "2021-06-12T14:49:40Z")

</div>

Loved the race, especially the part where the blue car passed the red car.

Controls are very intuitive, I felt like I didn’t need to press any buttons - and it turned out to be true!

I would suggest removing the grid and maybe playing with the camera a bit to make it look more interesting. Perhaps an overhead mode to follow a car?

Anyway, looks really smooth, well done!

---

<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:** [June 12, 2021, 6:22pm UTC](https://discourse.threejs.org/t/car-racing-for-lovers-of-fast-cars/27160/3 "2021-06-12T18:22:47Z")

</div>

I’m glad you like it. 🙂

The thing came out of questions here in the forum.

Yes, one could make a real race out of it, with terrain, ramps and bridges and multiple vehicles. Better models than I just copied them. And in addition, branches of the road, see [Create a curved plane surface which dynamically changes its size - #20 by hofk](https://discourse.threejs.org/t/create-a-curved-plane-surface-which-dynamically-changes-its-size/6161/20)

But that’s not my thing. I myself have never played computer games either. I don’t use modeling software either. I’m interested in mathematical relationships and algorithms. You can see that when you look at my Github page.

But maybe someone will take it as a suggestion and make something out of it. It can then be attached here.

---

<div class="post-metadata">

**Author:** ![Usnul](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/usnul/32/2355_2.png) [@Usnul](https://discourse.threejs.org/u/Usnul)\
**Post date:** [June 12, 2021, 9:09pm UTC](https://discourse.threejs.org/t/car-racing-for-lovers-of-fast-cars/27160/4 "2021-06-12T21:09:40Z")

</div>

I see. I have been watching you, mr hofk, and I know a lot about you… not in a creepy way, just seems like we both have been hanging our on the forum for a long while.

Personally that’s the stuff I’m into as well, the pure problem-solving aspect of things, but that doesn’t look as exciting to someone who’s not aware of the complexity under the hood. So there’s a lot of value in packaging your work in a way that an uninitiated person would find interesting. This way you can draw more attention to your work, but if you’re okay with only strange people like me admiring your work - that’s cool too, more for me.

People like pretty colors, large simple shapes, smooth motion, that kind of thing.

Anyway, in all honesty I was thoroughly impressed, even though I don’t know too much about cars and I’m not a racer.

---

<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:** [June 22, 2021, 12:36pm UTC](https://discourse.threejs.org/t/car-racing-for-lovers-of-fast-cars/27160/5 "2021-06-22T12:36:44Z")

</div>

**Added** a version with **quaternions** uses

`THREE.Quaternion.prototype.setFromBasis = function( e1, e2, e3 ) {`

See original post.

* * *

See also [Quaternion - method .setFromBasis( e1, e2, e3 )](https://discourse.threejs.org/t/quaternion-method-setfrombasis-e1-e2-e3/27407)

---

<div class="post-metadata">

**Author:** ![red-reddington](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/red-reddington/32/68861_2.png) [@red-reddington](https://discourse.threejs.org/u/red-reddington)\
**Post date:** [August 10, 2026, 4:37am UTC](https://discourse.threejs.org/t/car-racing-for-lovers-of-fast-cars/27160/6 "2026-08-10T04:37:30Z")

</div>

For the past couple of months I’ve been using this forum almost exclusively to dig into older, pre-AI posts. This one is a real gem. Thanks for the valuable contributions,@hofk and @Usnul