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

**URL:** <https://forum.8thwall.com/t/import-3d-models-in-react-using-react-scavenger-hunt-and-art-gallery-projects/2187>\
**Category:** Technical Support\
**Created:** [July 24, 2024, 6:03pm UTC](https://forum.8thwall.com/t/import-3d-models-in-react-using-react-scavenger-hunt-and-art-gallery-projects/2187 "2024-07-24T18:03:56Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Charlie\_Bell](https://avatars.discourse-cdn.com/v4/letter/c/eb9ed0/32.png) [@Charlie\_Bell](https://forum.8thwall.com/u/Charlie_Bell)\
**Post date:** [July 24, 2024, 6:03pm UTC](https://forum.8thwall.com/t/import-3d-models-in-react-using-react-scavenger-hunt-and-art-gallery-projects/2187/1 "2024-07-24T18:03:56Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![GeorgeButler](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/georgebutler/32/1903_2.png) [@GeorgeButler](https://forum.8thwall.com/u/GeorgeButler)\
**Post date:** [July 24, 2024, 6:17pm UTC](https://forum.8thwall.com/t/import-3d-models-in-react-using-react-scavenger-hunt-and-art-gallery-projects/2187/2 "2024-07-24T18:17:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Evan](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/evan/32/431_2.png) [@Evan](https://forum.8thwall.com/u/Evan)\
**Post date:** [July 24, 2024, 6:29pm UTC](https://forum.8thwall.com/t/import-3d-models-in-react-using-react-scavenger-hunt-and-art-gallery-projects/2187/3 "2024-07-24T18:29:47Z")

</div>

the path looks a little suspect:

```auto
/assets/assets/frame.glb

```

---

<div class="post-metadata">

**Author:** ![Charlie\_Bell](https://avatars.discourse-cdn.com/v4/letter/c/eb9ed0/32.png) [@Charlie\_Bell](https://forum.8thwall.com/u/Charlie_Bell)\
**Post date:** [July 24, 2024, 7:11pm UTC](https://forum.8thwall.com/t/import-3d-models-in-react-using-react-scavenger-hunt-and-art-gallery-projects/2187/4 "2024-07-24T19:11:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Charlie\_Bell](https://avatars.discourse-cdn.com/v4/letter/c/eb9ed0/32.png) [@Charlie\_Bell](https://forum.8thwall.com/u/Charlie_Bell)\
**Post date:** [July 24, 2024, 7:21pm UTC](https://forum.8thwall.com/t/import-3d-models-in-react-using-react-scavenger-hunt-and-art-gallery-projects/2187/5 "2024-07-24T19:21:20Z")

</div>

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’

---

<div class="post-metadata">

**Author:** ![Evan](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/evan/32/431_2.png) [@Evan](https://forum.8thwall.com/u/Evan)\
**Post date:** [July 24, 2024, 8:51pm UTC](https://forum.8thwall.com/t/import-3d-models-in-react-using-react-scavenger-hunt-and-art-gallery-projects/2187/6 "2024-07-24T20:51:13Z")

</div>

> 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](https://desktop.arcgis.com/en/arcmap/latest/tools/supplement/pathnames-explained-absolute-relative-unc-and-url.htm#:~:text=A%20relative%20path%20refers%20to,moving%20up%20in%20the%20hierarchy).

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:

```auto
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`.

---

<div class="post-metadata">

**Author:** ![Charlie\_Bell](https://avatars.discourse-cdn.com/v4/letter/c/eb9ed0/32.png) [@Charlie\_Bell](https://forum.8thwall.com/u/Charlie_Bell)\
**Post date:** [July 24, 2024, 10:04pm UTC](https://forum.8thwall.com/t/import-3d-models-in-react-using-react-scavenger-hunt-and-art-gallery-projects/2187/7 "2024-07-24T22:04:30Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex019/uploads/x8thwall/original/2X/9/9212a857458f1b03a6accb129e0f8cbea408e3e5.png) [@system](https://forum.8thwall.com/u/system)\
**Post date:** [July 28, 2024, 10:05pm UTC](https://forum.8thwall.com/t/import-3d-models-in-react-using-react-scavenger-hunt-and-art-gallery-projects/2187/8 "2024-07-28T22:05:20Z")

</div>

Closed on July 28, 2024, 10:05pm UTC

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