Basic THREE.js template using Vite.
Allows testing and modifying official THREE.js examples locally, at lightning speed. After trying Parcel and Rollup, this is probably the most developer-friendly to start THREE.js development in 2024 : it's insanely fast, it supports live reload out of the box, while remaining simple to use and to extend.
Pre-configured to support :
- glTF file loading
- ammo.js wasm physics library
- VSCode launch scripts
- THREE.js type definitions : for IntelliSense in VS Code
- recommended VS Code extensions
- deployment
Have a look at vite.config.js and customize it to your needs (additional libraries, file formats etc.).
Install Node.js
- Clone or download repo
- run
npm install: fetches and install all dependencies npm run dev: launches a server and opens your browser inhttps://localhost:5173by default- Edit your code : your changes are reflected instantly!
npm run build: packages all code and resources into thedistfolder, ready for deployment.
HTTPS is required to use the WebXR API
- Install Homebrew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"then follow instructions
echo >> /Users/XXX/.zprofile
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/XXX/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"brew install cloudflared- run your app locally
npm run dev- run
cloudflaredtunnel
cloudflared --url http://localhost:5173/This will create a random temporary address ending in *.trycloudflare.com
You can share this address by sending a link or by generating a QR code (very useful for mobile devices and some XR headsets).
If you want more persistence, you should register a domain name, or connect your github account to Cloudflare Pages for free.
Alternatively, you could simply use GitHub Pages to host your application persistently.
Check these tunneling alternatives such as ngrok or zrok for simple personal projects, use tunneling solutions
In order to use https, copy your certificates to the .cert folder, and change the serve command to:
"serve": "http-server dist -S -C .cert/cert.pem -K .cert/key.pem
(original: https://github.com/meta-quest/webxr-first-steps?tab=readme-ov-file#build-and-deploy)
This repository includes a ready-to-use GitHub Actions workflow located at .github/workflows/deploy.yml, which automates both the build and deployment to GitHub Pages. Once enabled, every time you push changes to the main branch, a new build will automatically be deployed.
- IMPORTANT: Set the
basevariable invite.config.js(default name/three_vite) to the actual name of your repository. Your app will be deployed to https://[GITUSERNAME].github.io/[REPOSITORY_NAME] (for example https://fdoganis.github.io/three_vite) - Fork this repository to your own GitHub account.
- Navigate to your forked repository’s Settings.
- Scroll down to the Pages section.
- Under Build and Deployment, change the Source to GitHub Actions.
Once this is set, GitHub Actions will handle the build and deployment process automatically. Any time you push changes to the main branch, the app will be built and deployed to GitHub Pages without any additional manual steps.
You can monitor the status of the deployment job or manually re-run it via the Actions tab in your GitHub repository.
If you prefer to host the app yourself, you’ll need to manually build the app and then deploy the generated files to your hosting provider.
To generate the build, run the following command:
npm run buildThis will create a dist folder containing the static files for the app. You can then upload these files to your hosting platform of choice.
-
Test model (red cube) from https://github.com/cx20/gltf-test/tree/master/sampleModels/Box (CC BY License)
-
Some very interesting features (such as github pages deployment) have been borrowed from https://github.com/meta-quest/webxr-first-steps (MIT License)
- Make sure to check this excellent tutorial out!
- See Deployment Instructions