An endless slashing game made with three.js and Vue

SlashSaber

<img src="./public/logo.svg#gh-light-mode-only" width="250" />
<img src="./public/logo_white.svg#gh-dark-mode-only" width="250" />


<h1 align="center">Slash Saber</h1>


 <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/honzaap/SlashSaber" />
 <img alt="ThreeJS version" src="https://img.shields.io/badge/threejs-v153-d5a814" />
 <img alt="Vue version" src="https://img.shields.io/badge/vue-v3.2-24e064" />
 <img alt="GitHub" src="https://img.shields.io/github/license/honzaap/SlashSaber" />




 <a href="https://slashsaber.com">
 Try it out!
 </a>


## An endless slashing rush
Slash Saber is an endless game made with <a href="https://github.com/mrdoob/three.js" target="_blank">three.js</a> and <a href="https://github.com/vuejs/core" target="_blank">Vue</a>

<img alt="Slash Saber gameplay" src="./public/readme_loop.webp"/>

## How to play
- Slash obstacles with your sword using the mouse
- Some obstacles can only be slashed from one direction
- Game ends when you let 3 obstacles hit you

## Installation
1. Clone repository to your local machine
2. Open terminal and `cd` into repository folder
3. Run `npm install`
4. Run `vite` or `npm run dev`

## 3D assets
- Blender files for some 3D assets are available in the <a href="https://github.com/honzaap/SlashSaber/tree/main/dev_assets">dev_assets</a> folder and are free to use under the condition that you star this repository 🙂

## Used technologies
- <a href="https://github.com/mrdoob/three.js" target="_blank">three.js</a> - 3D library
- <a href="https://github.com/vuejs/core" target="_blank">Vue</a> - Frontend framework
- <a href="https://github.com/vitejs/vite" target="_blank">Vite</a> - Build tool
- <a href="https://github.com/vuetifyjs/vuetify" target="_blank">Vuetify</a> - UI library
- <a href="https://github.com/pmndrs/cannon-es" target="_blank">cannon-es</a> - 3D physics engine
- <a href="https://github.com/samalexander/three-csg-ts" target="_blank">three-csg-ts</a> - ThreeJS CSG library
- <a href="https://github.com/creativelifeform/three-nebula" target="_blank">three-nebula</a> - ThreeJS particle system
- <a href="https://github.com/mkkellogg/TrailRendererJS" target="_blank">TrailRendererJS</a> - object trail effect (rewritten to TypeScript)

SlashSaber

README

Slash Saber

An endless slashing rush

How to play

Installation

3D assets

Used technologies