https://github.com/yurkagon/ReactCasting

Raycasting engine that renders scene in HTML using React (no canvas) and renders as text in textarea or console 😅
https://github.com/yurkagon/ReactCasting

engine html javascript raycasting react typescript wolfenstein

Last synced: about 1 year ago
JSON representation

Raycasting engine that renders scene in HTML using React (no canvas) and renders as text in textarea or console 😅

• Host: GitHub
• URL: https://github.com/yurkagon/ReactCasting
• Owner: yurkagon
• Created: 2021-07-30T11:05:27.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-14T15:25:41.000Z (over 3 years ago)
• Last Synced: 2024-08-01T22:53:23.434Z (almost 2 years ago)
• Topics: engine, html, javascript, raycasting, react, typescript, wolfenstein
• Language: TypeScript
• Homepage: https://yurkagon.github.io/ReactCasting/
• Size: 39.4 MB
• Stars: 112
• Watchers: 1
• Forks: 7
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

          
# ReactCasting

Raycasting algorithm that renders pseudo 3D scene in HTML using React (no canvas) and renders as text in textarea or console

![main](main.gif)

[Live demo](https://yurkagon.github.io/ReactCasting/)

WASD - to move

QE - to rotate

## Features

- Textures

- Sprites

- Simple lighting system

- Rendering scene in \

- Rendering scene in Chrome console

### Rendering scene using \
 elements


Everything you see is built by HTML5 \
 using React


![div-example](div-example.png)

### Rendering scene as text inside \

![textarea-example](textarea-example.gif)

[Link](https://yurkagon.github.io/ReactCasting/#textarea)

### Rendering scene inside Chrome console 🥲

Works correct only in Google Chrome. Resize devtools console to see full scene. Use CMD(or CNTRL) + "-" on devtools to zoom out console if you see white lines

![console-colored-example](console-colored-example.gif)

[Link](https://yurkagon.github.io/ReactCasting/#console-colored)

### Rendering scene as text inside browser console

Works correct only in Google Chrome

![console-example](console-example.gif)

[Link](https://yurkagon.github.io/ReactCasting/#console)

## Also

- [Check my HTML based 3D Shooter implemented without Canvas](https://github.com/yurkagon/Doom-Nukem-CSS)

## Inspired by

- [A first-person engine in 265 lines](https://www.playfuljs.com/a-first-person-engine-in-265-lines/)

## Contributors