Drive a Tesla Cybertruck or literally any car on your browser with Threejs

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • Sonar - Write Clean JavaScript Code. Always.
  • Zigi - The context switching struggle is real
  • InfluxDB - Build time-series-based applications quickly and at scale.
  • Scout APM - Truly a developer’s best friend
  • three.js

    JavaScript 3D Library.

    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.

  • cannon-es

    💣 A lightweight 3D physics engine written in JavaScript.

    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.

  • Sonar

    Write Clean JavaScript Code. Always.. Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.

  • racing-game

    🏎 Open source racing game developed by everyone willing

    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.

  • folio-2019

    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.

  • 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!

    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

    A simple GUI for inspecting and changing JavaScript variables

    Guify - GUI framework

  • stats.js

    JavaScript Performance Monitor

    Stats.JS - JavaScript Performance Monitor

  • Zigi

    The context switching struggle is real. Zigi makes context switching a thing of the past. It monitors Jira and GitHub updates, pings you when PRs need approval and lets you take fast actions - all directly from Slack!

  • 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.

    Webpack - Module bundler

  • JSZip

    Create, read and edit .zip files with Javascript

    JSZip - JSZip is a javascript library for creating, reading and editing .zip files, with a lovely and simple API.

  • babel-sublime

    Syntax definitions for ES6 JavaScript with React JSX extensions.

    Babel - ES6 to ES5 transpiler

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts