A basic USDZ file (Pixar Universal Scene Description) loader for ThreeJS

Overview

Three USDZ Loader

npm version

A basic USDZ (binary Universal Scene Description) reader for Three.js

The plugins supports animation as well as loading multiple USDZ at the same time.

Features

  • Loads .USDZ files in ThreeJS (100% frontend, no backend required)
  • Typescript types for the loader
  • Loading multiple USDZ at the same time
  • Animations are supported
  • Works on latests browsers:
    • Chrome
    • Mozilla
    • Edge
    • Safari on Mac (> 15.2)
    • Safari on iOS (> 15.2, might not work on all models due to memory limitations)

Demo

You may find an online demo implementation (with Vue + Vuetify + Typescript) of this package on usdz-viewer.net

The code of this demo is available on usdz-viewer.net's GitHub

How to use

a. Install three-usdz-loader with npm

  npm install three-usdz-loader

b. The package uses WebAssembly dependencies. For those to work you have to place those in your public folder. Copy the content of node_modules/three-gltf-loader/external to your /public folder

c. Make sure your web server has the proper headers to allow SharedArrayBuffer. To do so, you must add the following headers when serving your frontend application (the syntax may depend on which server you are using):

"headers": [
          {
            "key": "Cross-Origin-Embedder-Policy",
            "value": "require-corp"
          },
          {
            "key": "Cross-Origin-Opener-Policy",
            "value": "same-origin"
          }
        ]

d. Use this example code to make it work in your ThreeJs context

import { USDZLoader } from "three-usdz-loader";

...

// Setup the USDZ loader
// You may place external dependencies (.wasm / worker files) in a subfolder of the public folder. 
// In this case, pass the path of this folder as an arg to the USDZLoader constructor
const loader = new USDZLoader();

// Create a ThreeJs Group in which the loaded USDZ model will be placed
const group = new THREE.Group();

// Add the group to the scene
this.scene.add(group);

// Load your file. File is of type File
const loadedModel = await loader.loadFile(file, group);

...

// Later on, if you need to cleanup the model from the scene, simply use
loadedModel.clean()

Limitations

The loader currently only works on browsers supporting SharedArrayBuffer as well as Atomics.

License - What's behind

This package is based on Autodesk's USD fork and aims to make Autodesk implementation easy to use from a NPM package. The implementation has been done by Autodesk using WebAssembly. Please consult their GitHub for any further information on the WebAssembly/Emscripten side of things.

You might also like...

Serve file server with single zip file as file system in Deno.

zipland Serve file server with one-single zip file in Deno. Support zip just zip32 with deflated or uncompressed serving plaintext deflate Examples Yo

Nov 2, 2022

Feel free to create new file, don't hesitate to pull your code, the most important thing is that the file name here must match your nickname so that file does not conflict with other people.

Hacktoberfest Indonesia Apa Itu Hacktoberfest ? Hacktoberfest adalah acara tahunan yang bertujuan untuk mendorong berkontribusi kedalam ekosistem open

Dec 15, 2022

🍰 An extensible, layer based shader material for ThreeJS

🍰 An extensible, layer based shader material for ThreeJS

lamina 🍰 An extensible, layer based shader material for ThreeJS These demos are real, you can click them! They contain the full code, too. 📦 More ex

Jan 6, 2023

Ektogamat Three Graces Design Concept using threejs

Ektogamat Three Graces Design Concept using threejs

In this project, I wanted to show that creating a fancy design like this using #threejs is not as difficult as it looks.

Dec 18, 2022

✨ ThreeJS Toys ⚡

✨ ThreeJS Toys ⚡

✨ ThreeJS Toys - Made with 💙 Work in progress... Sponsors (Thanks 💙 !!!) Usage - npm npm install three threejs-toys Toys Particles Cursor - https:/

Dec 28, 2022

Futuristic tank game. Pure JavaScript with ThreeJS. Open Source

Futuristic tank game. Pure JavaScript with ThreeJS.  Open Source

Retro-futuristic tank game. Pure JavaScript with ThreeJS. Open Source SYNTHBLAST.COM Gameplay shoot tanks Run over all yellow pads to advance a level

Dec 11, 2022

BASIC is a web application contains basic applications related to studies, love, health, weather, productivity. This project aim to simply the user's life in anyway.

BASIC is a web application contains basic applications related to studies, love, health, weather, productivity. This project aim to simply the user's life in anyway.

BASIC is a web application contains basic applications related to studies, love, health, weather, productivity. This project aim to simply the user's life in anyway. Supported by all operating system, need an internet connection for working properly.

Dec 19, 2021

This project will be a basic website that allows users to add/remove books from a list. The main objective is to understand how to use JavaScript objects and arrays and dynamically modify the DOM and add basic events.

Awesome-books Awesome Books This project will be a basic website that allows users to add/remove books from a list. This project is part of the Microv

Oct 3, 2022

Basic website that allows users to add/remove books from a list. Achieved using JavaScript objects and arrays, dynamically modifying the DOM and adding basic events.

Awesome Books Basic website that allows users to add/remove books from a list. Achieved using JavaScript objects and arrays, dynamically modifying the

Dec 20, 2022
Comments
  • Some USDZ models can't be loaded

    Some USDZ models can't be loaded

    For some reason, some USDZ models are not been loaded in the viewer (but they are loaded on iOS). Without special errors, the scene just remains clean: Screenshot 2022-09-12 at 11 10 03 usdz (1).zip Please, check

    opened by Alyona2209 0
  • The image of the MATERIAL for this data was not displayed

    The image of the MATERIAL for this data was not displayed

    The image of the MATERIAL for this data was not displayed. I checked and found that the ID was not included in the following place. Do you know the cause?

    https://github.com/ponahoum/three-usdz-loader/blob/17d97fcf57108321904a1f3da38e6704e4a805c9/src/ThreeJsRenderDelegate.js#L138

    Material:

    | xcode view | usdz-loader-view | | ---- | ---- | | スクリーンショット 2022-08-19 16 58 15 | スクリーンショット 2022-08-19 16 59 04 |

    opened by matometaru 1
  • Compilation Problem

    Compilation Problem

    Hello, I would like to ask, how did you compile the [Autodesk's USD fork] branch of usdjs? Which platform are you using?I have tried both windows and centos 7,but neither can success. Thank you for your reply !

    opened by migo-robben 1
  • React-three-fiber compatibility

    React-three-fiber compatibility

    Hi there,

    Thanks for making this package available, I'm sure that it helps many people out there. I'm currently using R3F to use ThreeJS in a React webpage, so in order to use your package with the useLoader hook, one needs to have the UsdzLoader function names just like the other loaders (for instance, the ObjLoader).

    I tried to make a fork to test the changes and create a PR, but I'm facing some issues building it correctly, as the build command throws the following errors:

    three-usdz-loader git:(main) ✗ npm run build
    
    > [email protected] build
    > tsc
    
    src/ThreeJsRenderDelegate.d.ts:4:43 - error TS2503: Cannot find namespace 'THREE'.
    
    4   constructor(inputFile: string, usdRoot: THREE.Group);
                                                ~~~~~
    
    src/USDZInstance.ts:12:16 - error TS2503: Cannot find namespace 'THREE'.
    
    12   targetGroup: THREE.Group;
                      ~~~~~
    
    src/USDZInstance.ts:12:16 - error TS4031: Public property 'targetGroup' of exported class has or is using private name 'THREE'.
    
    12   targetGroup: THREE.Group;
                      ~~~~~
    
    src/USDZInstance.ts:23:18 - error TS2503: Cannot find namespace 'THREE'.
    
    23     targetGroup: THREE.Group,
                        ~~~~~
    
    src/USDZInstance.ts:23:18 - error TS4063: Parameter 'targetGroup' of constructor from exported class has or is using private name 'THREE'.
    
    23     targetGroup: THREE.Group,
                        ~~~~~
    
    src/USDZInstance.ts:38:15 - error TS2503: Cannot find namespace 'THREE'.
    
    38   getGroup(): THREE.Group {
                     ~~~~~
    
    src/USDZInstance.ts:38:15 - error TS4055: Return type of public method from exported class has or is using private name 'THREE'.
    
    38   getGroup(): THREE.Group {
                     ~~~~~
    
    src/USDZLoader.ts:72:43 - error TS2503: Cannot find namespace 'THREE'.
    
    72   async loadFile(file: File, targetGroup: THREE.Group): Promise<USDZInstance> {
                                                 ~~~~~
    
    src/USDZLoader.ts:72:43 - error TS4073: Parameter 'targetGroup' of public method from exported class has or is using private name 'THREE'.
    
    72   async loadFile(file: File, targetGroup: THREE.Group): Promise<USDZInstance> {
                                                 ~~~~~
    
    src/USDZLoader.ts:115:18 - error TS2503: Cannot find namespace 'THREE'.
    
    115     targetGroup: THREE.Group,
                         ~~~~~
    
    
    Found 10 errors.
    

    Do you have any insights on how to solve this issue? Or even patching an R3F-compatible version?

    Thanks in advance!

    opened by LeoPapais 5
Owner
Pierre-Olivier NAHOUM
Pierre-Olivier NAHOUM
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
A "Basic-to-Lisp" compiler. But Basic is not real Basic, and Lisp is not real Lisp.

Basic2Lisp A "Basic-to-Lisp" compiler. But Basic is not real Basic, and Lisp is not real Lisp. Syntax Print-Sth Put some-value to standard output. PRI

Hana Yabuki 5 Jul 10, 2022
This is a Microverse (@microverseinc) project in which I created a To-do list using Webpack. User can add a task, delete it, edit its description, and clear the completed tasks.

Microverse To-Do list This is a Microverse (@microverseinc) project in which I created a To-do list using webpack. Requirements Build a Todo list usin

Manel Hammouche 11 Aug 3, 2022
Default Description set by probot/settings

sanity-typed-schema-builder Build Sanity schemas declaratively and get typescript types of schema values for free! Typescript types for Sanity Values!

Saiichi Shayan Hashimoto 36 Jan 3, 2023
I want to catch the best scene of my life. The browser wants to, too.

Scroll Cat I want to catch the best scene of my life. The browser wants to, too. There are too many good works in the world that are a hundred times b

木杉 14 Sep 6, 2022
Customizable masonry Flatlist. it just behave like Flatlist but using ScrollView behind the scene

Would you like to support me? react-native-masonry-grid Customizable masonry Flatlist. it just behave like Flatlist but using ScrollView behind the sc

Numan 5 Sep 7, 2022
Create Bootstrap 5 Modal Box using JavaScript with custom title, description, button labels and custom YES button callback

Dynamic BS5 Modal Box Create Bootstrap 5 Modal Box using JavaScript with custom title, description, button labels and custom YES button callback Insta

null 5 Oct 23, 2022
A quickstart AWS Lambda function code generator. Downloads a template function code file, test harness file, sample SAM deffiniation and appropriate file structure.

Welcome to function-stencil ?? A quickstart AWS Lambda function code generator. Downloads a template function code file, test harness file, sample SAM

Ben Smith 21 Jun 20, 2022