8thwall-vue3-threejs-boilerplate

8thwall Vue3 Threejs Boilerplate uses 8th Wall, Vue3, Vue Router, Three.js and Vite.

This template allows you to easily develop 8th wall AR projects using Vue3, Three.js, and Typescript.

NOTES

• Under development

🚀 Features

• Vite development environment
• Full TypeScript support
• State & Store Management (Pinia)
• Perfect combination of 8th Wall, Vue3, Three.js and Typescript
• Use VueUse wrapper for XR8 Instance
• Decouple the pipeline module of XR8 from the 3D rendering logic
• Asset management
• Convenient debugging for developers using vConsole

🧾 To Do

• Support custome threejs pipelineModule & postprocessing
• Add full type enhancement to XR8
• Including shader chunks
• LYGIA Shader Library
• Provide rich examples

📦 Installation & Usage

You can choose to clone the project or fork repository, or download the zip file directly. It is recommended to clone the repository so that you can receive the latest patches.

# Clone this repository
$ git clone https://github.com/ChihYungChang/8thwall-vue3-threejs-boilerplate.git
# Go into the repository
$ cd 8thwall-vue3-threejs-boilerplate
# install dependencies
$ pnpm install

# serve with hot reload at localhost:8080
$ pnpm dev

# build 8th Wall application for production
$ pnpm build

To run a project, you need to have node version 16 or higher and use pnpm as your dependency management tool

Create .env file in the project root and specify your AppKey like below.

# .env
VITE_8THWALL_APP_KEY=xxxxxxxxxxxxxxxxxxx

🌸 Reference

This project is heavily inspired by the following awesome projects.

• @mayacoda/simple-threejs-typescript-starter

👨‍🚀 Maintainers

@ChihYungChang

📄 License

MIT © Chih-Yung Chang