Giter Club home page Giter Club logo

model-viewer's Introduction

PlayCanvas glTF Viewer

The PlayCanvas glTF scene viewer is blazingly fast and 100% compliant with the glTF 2.0 spec.

PlayCanvas Viewer

You can find a live version at:

https://playcanvas.com/model-viewer

Viewing Scenes

The viewer can load any glTF 2.0 scene. Embedded glTF and binary glTF (GLB) can be dragged directly into the 3D view. To load an unpacked glTF scene, drag its parent folder into the 3D view.

You can also drag and drop images into the 3D view to set a background. Options are:

  • Single file images are treated as equirectangular projections. Supported formats are PNG, JPG and HDR. Find high quality HDR images at HDRHaven.
  • Six images are treated as cube map faces. Naming should be one of the following 5 forms, where each face name below should be incorporated in the overall filename like name_posx.png for example:
Face 0 Face 1 Face 2 Face 3 Face 4 Face 5
posx negx posy negy posz negz
px nx py ny pz nz
right left up down front back
right left top bottom forward backward
0 1 2 3 4 5

Supported URL Parameters

Some URL query parameters are available to override certain aspects of the viewer:

Parameter Description Example
load/assetUrl Specify URL to a glTF scene to load ?load=URL
cameraPosition Override the initial camera position ?cameraPosition=0,0,20

How to build

Ensure you have Node.js installed (v18.0+). Then, from a command prompt, run:

npm install
npm run build

This will invoke Rollup and output the built viewer to the dist folder. To invoke Rollup with the --watch flag (which rebuilds the viewer on saving any source file), do:

npm run watch

How to build with local PlayCanvas engine

You can set the npm build scripts to use local versions of the PlayCanvas engine & PlayCanvas extras builds by setting the following environment variables when launching the npm build scripts:

ENGINE_PATH=./path/to/engine npm run build

How to run

Run:

npm run serve

Open a browser and navigate to http://localhost:3000.

Development

Run:

npm run develop

Open a browser and navigate to http://localhost:3000.

N.B. To load local models run npx server --cors in the directory containing the model (disables CORS).

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.