https://github.com/fletchcoder/car-builder

https://github.com/fletchcoder/car-builder

css3 html5 javascript nanoid react react-three-cannon react-three-drei react-three-fiber threejs zustand

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/fletchcoder/car-builder
• Owner: fletchcoder
• Created: 2024-07-02T19:35:05.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-09-30T19:27:25.000Z (5 months ago)
• Last Synced: 2024-11-09T01:06:56.278Z (3 months ago)
• Topics: css3, html5, javascript, nanoid, react, react-three-cannon, react-three-drei, react-three-fiber, threejs, zustand
• Language: JavaScript
• Homepage: https://car-builder.vercel.app
• Size: 649 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Car Builder

Car Builder is a 3D sandbox game that is designed for anyone to build the car of their dreams. You can select over 20 different textures for the blocks and move and jump around in a Minecraft-like environment. The world will autosave and you can reset the world if you want to set the world to an empty field.

![image](https://github.com/user-attachments/assets/00c52f88-762c-435b-8ac9-23e19930fb92)

## Built With 

* HTML

* CSS

* JavaScript

* React

* Three/Drei/Cannon/Fiber

* Zustand

* Nanoid

## Controls

* **Movement**: W, A, S, D

* **Jump**: Space

* **Select Texture**: 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, R, T, Y, U, I, O, P, H, J, K, L

* **Place Block**: Left Click

* **Delete Block**: Alt + Left Click

You can click directly on the ground to place a block, in the air or you can click any face of an existing block to add a block on that particular side. When deleting a block, the block that is the closest to the middle cursor will be deleted.

**Note**: The camera will lock the cursor when you click into the window, so you may have to press Esc a couple times to navigate the menu to reset the world.

## Texture Selector

![image](https://github.com/user-attachments/assets/d167ea60-90d4-4aa2-8476-881c24e728f1)

Pressing any of the respective _Select Texture_ keys will bring up the texture menu when choosing a new texture. 

## The Blocks

![image](https://github.com/user-attachments/assets/70f68092-ef6d-4490-9969-b25219bf9fee)

![image](https://github.com/user-attachments/assets/d332d15f-78f7-482f-9c2e-72162b3d4e54)

![image](https://github.com/user-attachments/assets/c69b701f-6fda-4b90-be90-6436aa9cbe9f)

The block options from left to right are: paints, glass, and wheels. The glass is made to be more transparent than the rest of the blocks, and one of the wheel textures has a similar effect to mimic spokes of a real wheel. The plane is 100x100, so there is plenty of space to place blocks and make many different kinds of vehicles.