Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/neptuniux/typescript_express_webxr_boilerplate
This is a Boilerplante for expressJS using webXR/ThreeJS With Typescript
https://github.com/neptuniux/typescript_express_webxr_boilerplate
express threejs typescript webxr
Last synced: 19 days ago
JSON representation
This is a Boilerplante for expressJS using webXR/ThreeJS With Typescript
- Host: GitHub
- URL: https://github.com/neptuniux/typescript_express_webxr_boilerplate
- Owner: neptuniux
- Created: 2023-02-15T13:25:21.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2023-12-10T11:23:16.000Z (about 1 year ago)
- Last Synced: 2024-12-20T11:10:04.502Z (19 days ago)
- Topics: express, threejs, typescript, webxr
- Language: TypeScript
- Homepage:
- Size: 73.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ExpressJS Typescript WebXR Boilerplate
Welcome to my Three.js WebXR Typescript demo! This demo is a simple example of how to use Three.js, WebXR, and Typescript to create an immersive 3D scene in the browser.
## Technologies Used
**Express.JS** - A node js web application framework that provides broad features for building web and mobile applications. It's a layer built on the top of the Node js that helps manage servers and routes.
**Typescript** - A statically typed superset of Javascript that provides a more structured and scalable approach to programming.
**Three.js** - A popular Javascript library for creating 3D graphics in the browser. It provides a simple and intuitive API for creating and manipulating 3D objects, lights, cameras, and more.
**WebXR** - A web standard that allows developers to create immersive experiences using Virtual Reality (VR) and Augmented Reality (AR) devices.
## Installation
**Prerequisite:** To access the VR session with a VR headset you have to use HTTPS. Put your server.cert and the server.key in the security folder at the root.
### Running the Demo Locally
1. Clone the project from GitHub:
```bash
git clone https://github.com/neptuniux/typescript_webXR_express.git
cd typescript_webXR_express
```
2. Install the required dependencies:
```bash
npm install
```
3. Build the project using the command:
```bash
npm start
```
The above command will use tsconfig.json as the configuration file for TypeScript and webpack.config.js for bundling the front-end page. This will generate the JavaScript files from the TypeScript source code.
### Running the Demo using docker for development
1. Clone the project from GitHub:
```bash
git clone
cd typescript_webXR_express
```
2. Build the docker image:
```bash
docker-compose up
```
### Running the Demo using docker for production
1. Clone the project from GitHub:
```bash
git clone
cd typescript_webXR_express
```
2. Build the docker image:
```bash
docker build -t typescript_webxr_express .
```
3. Run the docker image:
```bash
docker run -p 8080:8080 -p 8081:8081 typescript_webxr_express
```
Open a web browser and go to http://localhost:8080 or https://localhost:8081 to see the running demo.
That's it ! You should now be able to run the project on your machine.
## Development process
To develop this project you can use npm run dev to run the project in development mode.
Or you can run docker-compose up to run the project in docker.
Both will run the project in watch mode and will automatically recompile the project when you make changes to the source code.
## Environment Variables
The project uses these environment variable to set a couple of parameters:
- `SERVER_PORT=8080`
- `SECURE_SERVER_PORT=8081`
- `HOST_URL=http://localhost:8080`
## Demo Features
- Simple and intuitive 3D scene using Three.js.
- Support for WebXR devices, such as VR headsets.
- Typescript implementation for a more structured and scalable codebase.
- Support for HTTPS, which is required for accessing the VR session with a VR headset.
- Support for Docker, which allows you to run the demo in a containerized environment.
## Acknowledgements
This demo is built on top of the excellent Three.js library and the WebXR API, which are both open-source and free to use. I would like to thank the developers of these technologies for making this demo possible.
## License
This demo is released under the [MIT](https://choosealicense.com/licenses/mit/)
License. Feel free to use it for any purpose, commercial or non-commercial, but please provide attribution to the original source.