Playing Holograms in Desktop Mode

🧑‍💻 Technical Support
, ,
1

Hello,

I have a threejs Hologram project that currently only works on phones. I am trying to get it working on a desktop. I havent been able to find any documentation on this besides adding this line of code:
allowedDevices: XR8.XrConfig.device().ANY

which did not work for my project. Is there a way to get desktop view working for a threejs Hologram?

Thank You

2

Hello!

Where are you putting the allowedDevices param in your code? For three.js projects it should be a parameter passed to XR8.run()

Example code:
XR8.run({canvas, allowedDevices: XR8.XrConfig.device().ANY})

Here are a few three.js projects configured to work on desktop:

1 Like
3

Hello,

Yes, I added it as a parameter to XR8.run(), but when I open the link on desktop it still shows the QR code for my project, the projects you linked work on my end and comparing the app.js files between my project and the example projects they are nearly the same.

Thank You

4

Which link are you trying to access?

I wonder if perhaps your code updates weren’t Landed and Published ?

5

Here is the link:

I double checked and made sure the most recent commit was landed and published

Thank You

6

That’s quite strange - your app.js code is basically exactly like our sample project: three.js: Place Ground | 8th Wall | 8th Wall

The only non-standard thing I see at a glance are the extra html elements you’ve added to head.html - can you try removing those temporarily and see if that helps?

Also, if you share your project with the support workspace, my team can look further:

7

Hello,

I tried commenting out the extra elements in head.html, but it still was not working on the desktop. I also shared the project with the support workspace.

Thank You

8

Looks like there were a number of issues, not actually related to the allowedDevices config. Something else in your code was erroring out, basically causing initialization to fail, so the landing page would display. If you completely removed the landing page component, you’d just get a blank page.

  1. There were DOM elements being added in head.html → moved to camerafeed.html (head.html should really only be used to pull in external libraries via tags, etc)
  2. pipeline code was referencing these DOM elements, but they were being added until below. Put the document.body.insertAdjacentHTML('beforeend', camerafeedHtml) line above the addCameraPipelineModules block so they are loaded before your code that references them

Also, there was an extra three.min.js library loaded via script tag in head.html - should not be needed since you already have <meta name="8thwall:renderer" content="threejs:123"> above.

1 Like
9

It works!

Thank You for all your help

1 Like