Custom hands in R3F, XR

This template provides a minimal setup to get a set of WebXR hands with a custom shader that looks like Meta's default hands.

The model is the default model with a rewrap of its UV, so that they align from finger tips to wrist.

This enables us to apply a color gradient as well as an opacity gradient to "erase" the wrists.

You can dynamically change the shader's uniforms like so :

main shader: customShaderMaterialRef.current.uniforms.globalOpacity.value = eventOccurred ? 1 : 0;

outline : outlineMaterialRef.current.uniforms.globalOpacity.value = eventOccurred ? 1 : 0;

Name		Name	Last commit message	Last commit date
Latest commit History 10 Commits
public		public
src		src
.gitignore		.gitignore
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

Provide feedback