Car Racing - For lovers of fast cars!

Resources
,
1

A quick race.

CarRacing

2021-06-11 15.19.43
2021-06-11 15.19.43850×411 38.9 KB

2021-06-11 15.18.50

Furthermore I have updated my old example RoadRace from the addon
Addon to create special / extended geometries - #5 by hofk
to a new state. THREEg.js/examples at master · hofk/THREEg.js · GitHub

See also
Struggling with paths
BeginnerExample // … step 15: matrix, move along room curve

Added a version with quaternions. :white_check_mark:

CarRacingQuaternion

uses

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;
 
}
9 Likes
2

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!

1 Like
3

I’m glad you like it. :slightly_smiling_face:

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

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.

2 Likes
4

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.

1 Like
5

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 )

1 Like