zappar-xr / threejs-example-image-tracking-portal

0 stars 1 forks source link

Infinite Loading Screen on Custom AR Portal Project with Mattercraft Integration #1

Closed dreamlime closed 2 weeks ago

dreamlime commented 2 weeks ago

Hello,

I’ve been working on adapting the threejs-example-image-tracking-portal project from this repository into Mattercraft, but I’m running into a significant issue. When I attempt to run the project in Mattercraft, I get stuck on an infinite loading screen instead of loading the AR experience.

Here are the steps I followed and some details of the problem:

Project Setup:

I downloaded the full zip file from this repository. I added the necessary assets (images and .zpt file) and scripts (index.ts, index.html, and index.css) to my existing Mattercraft project. I also ensured that the dependencies from npm (such as zappar-threejs) were installed via Mattercraft’s add-ons and dependencies browser. Issue:

The simulator shows the initial "An immersive web experience" message but hangs indefinitely without proceeding to the AR experience. When inspecting the developer console, I noticed several warnings, as well as syntax errors related to scripts like index.ts. Files Affected:

The index.html and index.ts files seem to be the main ones causing the issue. I have copied the content from the original repository into my project, but I am not sure if the paths, imports, or script execution order are causing the problem. In the Mattercraft environment, I ensured that the file paths match the original structure of the GitHub project, but this hasn’t resolved the loading issue. Expected Behavior:

I expect the AR portal experience to load correctly after the initial screen, but I am unable to proceed past the loading state. Could you please advise if there are any specific changes I need to make for this project to work correctly in Mattercraft, or if there are any known issues with adapting this project outside of a local environment?

Maybe you could also try and integrate this project to Mattercarft's basic scene template.

Thanks in advance!

nyan-left commented 2 weeks ago

Hi @dreamlime,

I'd recommend that you start out with the "image tracked" template in Mattercraft.

Screenshot 2024-09-28 at 05 46 12

This will download a computer vision dependency (very similar to @zappar/zappar-threejs) made specifically for Mattercraft. The project you're trying to adapt is actually designed for the Zappar ThreeJS SDK, which is why you're running into issues when trying to run it in Mattercraft.

From here, I suggest having a quick peek over the documentation and try rebuilding the experience using components https://docs.zap.works/mattercraft/zcomponents/

I've created a small reference project for you here on how to mask in Mattercraft. It uses the same target image as the repo you were working with. If you download it, unzip it, and then open a new 'local' project in Mattercraft, you will see it in action:

Screenshot 2024-09-28 at 06 04 10

Here's a video of the masked demo:

https://github.com/user-attachments/assets/40e4cf23-8fe5-4a8b-a72e-2ca41863d304

Here's the demo: demo.zip

This should help you get started with a Mattercraft-specific implementation and avoid the loading issues you were experiencing.

I'm going to close this issue as this is not the appropriate place for it. If you require further assistance from us or the community, please feel free to join our Discord: https://discord.gg/DhFGBVXqkp