https://github.com/mrxz/three-mirror

Mirror for Three.js that renders the scene using a mirrored scene (XR compatible)
https://github.com/mrxz/three-mirror

threejs webxr

Last synced: about 1 month ago
JSON representation

Mirror for Three.js that renders the scene using a mirrored scene (XR compatible)

• Host: GitHub
• URL: https://github.com/mrxz/three-mirror
• Owner: mrxz
• License: mit
• Created: 2023-01-14T13:21:48.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-04-28T20:00:49.000Z (over 1 year ago)
• Last Synced: 2024-11-13T11:39:53.045Z (about 2 months ago)
• Topics: threejs, webxr
• Language: JavaScript
• Homepage:
• Size: 66.4 KB
• Stars: 2
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# Three.js Mirror

[![npm version](https://img.shields.io/npm/v/@fern-solutions/three-mirror.svg?style=flat-square)](https://www.npmjs.com/package/@fern-solutions/three-mirror)

[![npm version](https://img.shields.io/npm/l/@fern-solutions/three-mirror.svg?style=flat-square)](https://www.npmjs.com/package/@fern-solutions/three-mirror)

[![github](https://flat.badgen.net/badge/icon/github?icon=github&label)](https://github.com/mrxz/three-mirror/)

[![twitter](https://flat.badgen.net/badge/twitter/@noerihuisman/blue?icon=twitter&label)](https://twitter.com/noerihuisman)

[![mastodon](https://flat.badgen.net/badge/mastodon/@[email protected]/blue?icon=mastodon&label)](https://arvr.social/@noerihuisman)

[![ko-fi](https://img.shields.io/badge/ko--fi-buy%20me%20a%20coffee-ff5f5f?style=flat-square)](https://ko-fi.com/fernsolutions)

**This is a WIP project**

This project introduces a `Mirror` object that you can add to your Three.js scenes. It's based on my A-Frame component and works in the same way: [@fern-solutions/aframe-mirror](https://github.com/mrxz/fern-aframe-components/tree/main/mirror)

## Usage

See [example/index.html](example/index.html) for an example of how to use this.

## Limitations

* Mirrors are not rendered recursively, so any mirror seen from another mirror will just render as an opaque plane

* Avoid mixing transparency with mirrors (e.g. looking at a mirror through transparent objects). Depending on the render-order this either results in the overlap being an opaque mirror or the transparent object not being visible.