Our great sponsors
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
raycast-vehicle-engine
Drive your favorite 3D car in your threejs world just by uploading the GLTF Model and generating code all on the browser itself!
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
-
webpack
A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
-
This project will require you to have some knowledge in both Threejs and Cannon-ES. Although since what we're building here would built on a browser-based engine, you don't need extreme knowledge about these libraries, cause you can simply download all the car code that you tweak on the engine and install it using npm i on your computer. Read this article carefully to understand how to drive your 3D 4-wheeler vehicle model on the browser.
Well in both of the above projects as you might have noticed, one thing is common and is also the MC of the games, A CAR! Or as we, the developers like to call it, a Raycast Vehicle. Now building a raycast vehicle is super difficult cause it's one of the most complex features of a physics library. Although there are courses on how you can create a raycast vehicle, most of them are paid or they just don't make sense. Although I would say, that Cannon-ES has got a pretty dynamite documentation but it took me almost a week to create my first raycast vehicle and drive it on my browser.
The open sourced racing game developed by Poimandres and other contributors on Github. The game features a 3D car in a track, and the user is supposed to reach the end of the track by driving the car to the end of the track as soon as possible. This project uses Cannon-ES, a physics library which is a fork of the original CannonJS by Stefan Hedman, currently being developed in house by the developers and other contributors of Poimandres.
Everybody hates going through the docs, well at least most of the developers I know do hate reading docs quite a lot, but threejs, although it is very popular and the community using it is constantly growing, there is not much information on how to build certain things online, unless you're figuring out things by yourself. I had to go through that painful journey of trying to figure out, how to get a raycast vehicle up and running on my browser. There's a course by Nik Lever on how to create a 3D car racing game with threejs and cannonjs. I almost got to a point where I was about to buy his course, which I am sure is excellent, but again it's not free. After going through the docs a little bit more harder and with the help of Poimandres' developers on Discord and going through Bruno's code for his portfolio, I finally figured out how to get a raycast vehicle up and running on my browser. Boy did it feel good, but it took a lot of effort since the docs aren't that helpful, and the best way to get something working on your computer is to basically play with a project which is already built using the same technology you're trying to implement and trying to reproduce it for your project.
There are many more awesome features that I am planning to add to the engine, and you can help me out with it too. So do fork it on github. Thanks to everyone that contributed to this project and made it possible and thanks to you for reading this article.
Guify - GUI framework
Stats.JS - JavaScript Performance Monitor
Webpack - Module bundler
JSZip - JSZip is a javascript library for creating, reading and editing .zip files, with a lovely and simple API.
Babel - ES6 to ES5 transpiler