Import 3D models in react (using React Scavenger Hunt and Art Gallery projects)

đŸ§‘â€đŸ’» Technical Support
1

Hello! I have combined two 8th Wall projects
“A Frame: React Scavenger Hunt” and the “Art Gallery” project. The goal is to switch between map and AR scenes.

I added code from the “Art Gallery” project into the “React Scavenger Hunt” project. Everything works as it should (i.e. the image targets are recognized and the metadata appears when the image target is found and I’m able to add objects to the react map to represent points of interest).

The issue is the gold picture frame model (“frame.glb”) from the “Art Gallery” project is not appearing in the combined project.

Is it because models need a local web server since webpages (i.e. React) can’t access the file system?
The project builds successfully, but I get this message in the console


%ccomponents:gltf-model:warn %cfetch for "https://myName-default-myCompany.dev.8thwall.app/assets/assets/frame.glb" responded with 404:

Any thoughts or ideas? I just want the frame model to appear when the image target is found
everything else works as it should.

Charlie B.

2

How are you referencing the asset? I’ll gladly help you fix it if you don’t mind sharing the code.

3

the path looks a little suspect:

/assets/assets/frame.glb
1 Like
4

Hi George! Thanks for the response. This is how I’m referencing the asset (I hope this answers your question). If you look at the “React Scavenger Hunt” project, the code can be found under
"Files - views - ar - unitcude.html

5

You are right Evan
in my first post to the forum I included the console response that allows the project to be built successfully, but the frame.glb doesn’t appear. When I try other paths like './assets/frame.glb the build fails. I was trying different paths when I sent the console message is my first post.
Here is what I get if I try “./assets/frame.glb”

Build failed for [3efb083] with errors:
./views/ar/unitcube.html
Module not found: Error: Can’t resolve ‘./assets/frame.glb’ in ‘/tmp/src/myCompany.htbpoimap-webar/views/ar’

6

A relative path refers to a location that is relative to a current directory. Relative paths make use of two special symbols, a dot (.) and a double dot (
), which translate into the current directory and the parent directory. Double dots are used for moving up in the hierarchy. A single dot represents the current directory.

Absolute, relative, UNC, and URL paths—ArcMap | Documentation.

The HTML file you’re referencing the asset from is located at /views/ar, so the relative path ./assets/frame.glb evaluates to /views/ar/assets/frame.glb.

If you take another look at the error message:

Can’t resolve './assets/frame.glb' in '.../views/ar'

it’s telling you that /views/ar/assets/frame.glb does not exist.

If your asset is placed in the root /assets folder, then the correct relative path from this file would be ../../assets/frame.glb.

7

Yep Evan,

/
/assets/frame.glb solved the issue! I thought I tried that path once but maybe I didn’t. Thank you so much for your help!

Charlie B.

2 Likes
8

This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.