Could not load ./test.usdz: undefined

Questions
,
1

I am trying to load a usdz file in browser using React and THreejs. Here is my code implementation. However, I keep getting error in console that could not load test.usdz

import React, { useState } from “react”;
import { useLoader } from “@react-three/fiber”;
import { USDZLoader } from “three/examples/jsm/loaders/USDZLoader”;

function App() {
const [usdz, setUsdz] = useState(null);

useLoader(USDZLoader, “./test.usdz”, (loaded) => {
console.log(loaded, “loaded”);
setUsdz(loaded.scene);
});

return ;
}

export default App;

2

Do you mind sharing the USDZ file in this topic?

3

saeukkang.usdz (3.7 MB)
Room.usdz (33.8 KB)

4

@Mugen87 - I have aded both files. Files were renamed in project folder.

5

So saeukkang.usdz does not work for you? It seems it is the file from the official example and it should load without issues (see three.js webgl - loaders - USDZLoader).

However, Room.usdz throws an error:

ncaught (in promise) TypeError: Cannot read properties of undefined (reading 'replace')
    at findMeshGeometry (USDZLoader.js:242:29)
    at buildObject (USDZLoader.js:577:36)
    at buildHierarchy (USDZLoader.js:605:19)
    at buildHierarchy (USDZLoader.js:615:6)
    at buildHierarchy (USDZLoader.js:615:6)
    at buildHierarchy (USDZLoader.js:615:6)
    at USDZLoader.parse (USDZLoader.js:625:3)
    at FileReader.<anonymous> (Loader.js:670:37)

Is the room asset generated with Apple’s RoomPlan?

6

@Mugen87 - Yup the official file is not working for me. Can you check if I share github repo?

7

Yes, although it depends how complex your app is. Try to share a minimal code example that demonstrates the issue.

8

@Mugen87 - Here’s the repo: Musadiqkhan-nullbrainer/laidar-new-app (github.com)

9

Did you get chance to review it?

10

I was not able to test so far since npm i in your project’s root directory aborts with a runtime error.

11

Can you take fresh pull. I just ran npm i and it is working

12

Still get the same error:

npm ERR! code 1
npm ERR! path …/laidar-new-app-master/node_modules/sharp
npm ERR! command failed
npm ERR! command sh -c – (node install/libvips && node install/dll-copy && prebuild-install) || (node install/can-compile && node-gyp rebuild && node install/dll-copy)
npm ERR! sharp: Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.14.3/libvips-8.14.3-darwin-arm64v8.tar.br
npm ERR! node:internal/fs/utils:348
npm ERR! throw err;
npm ERR! ^

Any chances to share a codesandbox or other kind of live example?

13

@Mugen87 - Please check here: unruffled-newton-6pnyfg - CodeSandbox

14

Thanks for sharing the live example! After debugging, it seems your issue is related to how you use react-three-fiber. I’m not familiar with this project so I hope somebody else from the community can have a look at your code.

15

@Mugen87 - Please check this without react-three-fiber

unruffled-newton-6pnyfg - CodeSandbox

Also can you share some codesandbox or repo for usdz implementation with and without react?

16

Sorry, I also don’t use plain react so I don’t know what’s going wrong.

With plain JS, things work as expected. It’s the code from the original example copied over to a fiddle: three.js dev template - module - JSFiddle - Code Playground

17

@Mugen87 - Thanks. I was able to implement the usecase. However, I have a few issues. I downloaded this file (https://solarsystem.nasa.gov/resources/2401/cassini-3d-model/) but in console, it says no USDA file found. And also Room.usdz is not working. Any idea what’s going on here? All I can run is the file used in your example.
Room.usdz (33.8 KB)

18

I think the room asset is not working because of the following known issue documented at GitHub: