360 viewer embedded into a 2nd 360 viewer

Question

I want to create a website homepage made up of only a 360 viewer showing a photorealistic 3d model which you can navigate around and interact with (WEBVR style) however, what i am trying to identify is will it be possible to embed a 2nd 360 viewer into this so that while navigating and you get to a specific point, you may want to view another 360 image / video within the current one. looking at using A Frame for 1st 360 image and an embedded viewer into that. A solution has been proposed using advanced techniques within WebGL, but i dont know enough about it to make this decision.

Site needs to be responsive and compatible with standard browsers, tablets and mobile and (fingers crossed) option to use headset

any advise / suggestion would be greatly appreciated !!!

Everything is possible , why not. You will need to attempt and post your code here also error logs . Then you will get suggestion to improve your work. — Nikola Lukic, Apr 27 '18 at 07:57

score 1 · Answer 1 · answered Apr 27 '18 at 08:49

Imo the biggest part here is the design.
As for compatibility, keep in mind that PC (mouse) / mobile (gaze) / HMD (controllers) need different UI's.

As for 360 in 360. There is no need to embed anything.
1) Have your model in the middle
2) when navigated somewhere show a sphere around the camera with the image + keep some controls (like a "back" button)

You can achieve it like this:

HTML

<a-scene>
  <a-entity id="model"></a-entity>
  <a-entity id="button" show="src:myPic.png"></a-entity>
  <a-sphere id="photosphere" material="side:back" visible="false"></a-sphere>
</a-scene>

JS

AFRAME.registerComponent("show", {
  init: function() {
    let sphere = document.querySelector("a-sphere")
    this.el.addEventListener("click", (e)=>{
     let pos = document.querySelector("[camera]").getAttribute("position")
     sphere.setAttribute("position", pos)
     sphere.setAttribute("visible", true)
    })
  }
})

Check it out in my fiddle. You can hide the model, when the photosphere + UI is seen, the execution is up to you.

360 viewer embedded into a 2nd 360 viewer

1 Answers1