Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kfarr/hello-threejs-gltf-lkg
https://github.com/kfarr/hello-threejs-gltf-lkg
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/kfarr/hello-threejs-gltf-lkg
- Owner: kfarr
- Created: 2023-10-03T20:18:28.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-10-03T20:49:13.000Z (about 1 year ago)
- Last Synced: 2024-10-09T16:21:00.186Z (3 months ago)
- Language: JavaScript
- Size: 28.6 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# hello-threejs-gltf-lkg
"known good" example of working three.js gltf/glb -> looking glass display setup
original source:
https://codesandbox.io/s/hello-three-js-gltf-c4uyw2?from-embed=&file=/src/index.js
from these docs:
https://docs.lookingglassfactory.com/developer-tools/webxr/three.js#the-basics
modified to use a different hdr and scenes exported from 3dstreet in glb format
## Instructions to view your 3DStreet scene on a Looking Glass Display
* Open or create a [3DStreet scene](https://3dstreet.app) that you'd like to view in 3D on the Looking Glass
* In 3DStreet Editor, click Save > Save as GLB (or Share > Download as GLB)
* Clone [this repository]([url](https://github.com/kfarr/hello-threejs-gltf-lkg/)) and copy your saved 3DStreet glb into /src/assets of this repository as target.glb
* Run `npm install` then run `npm start`
* Ensure that Looking Glass Bridge is installed for your OS and has recognized your looking glass as described here: https://lookingglassfactory.com/software/looking-glass-bridge
* Ensure that your Looking Glass shows your second desktop as described in WebXR instructions: https://docs.lookingglassfactory.com/developer-tools/webxr
* Open your browser to http://localhost:1234/
* Click "ENTER VR"
* Manually move the new window that pops up to your Looking Glass display (see Image 1)
* Double click on the window
* Now zoom out a little bit by scrolling up or down, and use the new controls to modify the appearance of your scene (see Image 2) Keep experimenting with all the levers on the View Controls, they can really change the feeling and mood of the scene!
Image 1 - Double click the "Looking Glass Window" to make fullscreen after moving window over to your Looking Glass device. It's supposed to look weird like this.
Image 2 - LookingGlass WebXR View Controls - spend some time tweaking these!
