steren / stereo-img

web component to display stereographic pictures on web pages, with VR support
https://stereo-img.steren.fr
Apache License 2.0
22 stars 6 forks source link

Add ability to swap right/left images in stereo pairs #13

Closed jolyonralph closed 1 year ago

jolyonralph commented 2 years ago

Many of our stereo pair images are RIGHT/LEFT rather than LEFT/RIGHT for easier viewing when doing the cross-eyes trick. It would be nice if this supported an option to switch the images.

jolyonralph commented 2 years ago

I tried to fork this code and do the fix myself, because it seems quite simple to add a support for "right-left" in the stereo-parser module, but then I discovered I can't figure out how to actually use the edited code.

There are no instructions on how to compile this (or whatever you call it these days).

How do you actually convert this code into something that can be included on a website and run without using external services/CDNs?

I miss the days you could just download a .js file and stick it in on your site...

steren commented 2 years ago

Thanks for the suggestion. it should indeed be a simple change.

There is no compilation step, in development, you can directly load your edited files in index.html. I'll make this clearer

To update the npm module, I will need to publish it with my npm account.

jolyonralph commented 2 years ago

Thank you! that worked perfectly.

Added a 'right-left' hack and this does work nicely for now.

steren commented 2 years ago

Great. Will you be sending a pull request ?

jolyonralph commented 2 years ago

I've been hacking the code locally and haven't got this linked into github so I can send you my edits manually...

In the meantime I've been looking into being able to add some kind of information panels and controls into the VR view so that there is for example an easy way to exit the 3D view, and eventually being able to navigate between a series of images directly within the VR interface.

But nothing I'm trying works of course :) I thought it should be easy starting by adding in the virtual controllers with:

  const controllerModelFactory = new XRControllerModelFactory();

  let controllerGrip1 = this.renderer.xr.getControllerGrip( 0 );
  controllerGrip1.add( controllerModelFactory.createControllerModel( controllerGrip1 ) );
  controllerGrip1.layers.enable(1);
  this.scene.add( controllerGrip1 );

[LATER] - Ignore the above - figured it out by accident later, it's the camera near plane value for perspectivecamera that needed reducing.