Easily display interactive 3D models on the web and in AR!
🆕 Added queryHotspot() method to enable complex dynamic annotations linked to the scene, thanks @jukibom! #3844
🆕 Re-added interaction-prompt-style which was removed during the v2.0 cleanup, but was returned by popular demand. #3880
🆕 Enabled CSS-style color strings as input to setBaseColorFactor and setEmissiveFactor, giving automatic conversion of sRGB color values. #3931
quick-look-button-tapped event not being fired on iOS 16, thanks @milesgreen! #3850variant-name attribute, the default variant no longer blinks in during load. #3864<model-viewer> elements. #3927✨ Updated the Dimensions example to demonstrate SVG dimension lines using queryHotspot(), thanks @jukibom! #3844
✨ Simplified the Change Color example by setting CSS color strings directly. #3931
Fixes model disposal on iOS < 15: #3816
We have been carefully following semantic versioning rules to avoid breaking changes for our diverse user base, but this has caused parts of our API to become less beginner-friendly as our newer best-practices have not become defaults. The time has come to reset with a v2.0 release!
The API simplifications have also allowed us to clean up our code base, easing maintenance and reducing the likelihood of future bugs.
To be clear, we still want to make updating to v2.0 easy for our users, so we're changing features that are little-used or will improve the experience on most sites. The changes to defaults can be overridden by specifying attribute values. Regeneration of poster images is strongly recommended. See discussion in #3460.
enable-pan default, with default field-of-view narrowed to 30 degrees (12 degree default minimum). This gives the default framing a "longer lens" with reduced perspective warp: #3668enable-pan to true, replacing the enable-pan attribute with disable-pan. Also added disable-tap attribute: #3713touch-action default from pan-y to none: #3712environment-image to neutral, renaming the current default as legacy: #3676ar-modes default to webxr scene-viewer quick-look: #3802bounds="tight": #3683scene-graph-ready event: #3700progress-mask; equivalent to setting its part to display: none;. This will keep the poster from appearing lightened during loading: #3692reveal attribute. Use "manual" and dismissPoster() instead to achieve this behavior: #3688interaction-policy attribute, allowing only the default "always-allow" behavior: #3686interaction-prompt attribute: #3687interaction-prompt-style attribute, allowing only the default "wiggle" behavior: #3685--poster-color, making the poster always have a transparent background: #3701seamless-poster attribute, making the behavior as though this option is always enabled. Note this in combination with the previous bullet means there is no longer a transition fade between poster and model, so seamless posters as generated by toBlob({idealAspect: true}) or our editor are strongly recommended: #3704Image.setURI method from our materials API. Use the createTexture method instead: #3710exportScene options to match three.js r143. Specifically, remove embedImages (always true now) and forcePowerOfTwoTextures. Add forceIndices: #3711preload event, as there is no longer any distinction from the load event: #3799package.json module to point to lib instead of dist. For JS users, main will still point to our bundle in dist, but this change will send TS users to our lib so they can build and tree-shake it themselves, which is best practice. Also, our lib already contains all our *.d.ts files: #3718types pointers to package.json as well as a fallback model-viewer.d.ts bundled types file, thanks @subhankar-trisetra! #3774, #3791🆕 Added External Renderer API to drive e.g. cloud-based or path-tracing renderers: #3482
🆕 Added Material API documentation: #3493
🆕 Added keyboard controls for pan, thanks @clochardM33! #3702
🆕 Added inputSensitivity property: #3719
🆕 Added getBoundingBoxCenter: #3734
positionAndNormalFromPoint() hitting the floor plane: #3599src: #3606camera-change event: #3717error event detail: #3742reveal changes causing rendering breakage: #3745exportScene is including scale/orientation changes: #3772🆕 Added interact() method to create synthetic touch gestures that move the model; ideal for creating custom interaction prompts for rotation, zoom, and pan. #3320
🆕 Added 'poster-dismissed` event. Technically it's not new, but was undocumented.
camera-change event is also fired for camera-target changes. #3427✨ Added a custom prompt example to demonstrate interact() and the finger slots. #3320
✨ Fixed zoom sensitivity in the camera views example. #3356
oncontextmenu function: #3333🆕 Added enable-pan attribute for two-finger or right/meta-click drag, as well as tap recentering. Note that enable-pan also changes the default framing, which will likely become the overall default in v2.0. #3286, #3319
🆕 Improved soft shadows! API is unchanged, but the look is significantly nicer (and softer). Note: you may want to regenerate poster images. #3182
🆕 Added hasBakedShadow() method and we now automatically remove these shadow planes from framing computations and disable them when shadow-intensity is set > 0 to avoid double shadows. Baked shadows are identified as axis-aligned planes with unlit, transparent material. #3295
🆕 Added render-scale event, to get analytics on when your users are GPU-throttling. #3307
🆕 Added timeScale to control speed of animation or play in reverse. Thanks @futahei! #3129, #3304
🆕 Allow textures to have their name set. Thanks @slightHYP! #3175
🆕 Fall back to selection of animation by index if name is not found. Thanks @prefrontalcortex! #3225
🆕 Added with-credentials attribute to load non-public models. Thanks @ymoriaud! #3239
bounds="tight", which will become default in v2.0. #3272setAlphaMode for BLEND and MASK. #3306✨ Added a render-scale example so you can test in real time how our dynamic render scaling operates on different devices and experiment with controlling it. #3307
✨ Dramatically simplified the panning example based on the now available attribute. #3286
/lib rather than the bundle. #3200environment-image: https://github.com/mrdoob/three.js/pull/23322
This is actually identical to v1.10.0, but a bad build was pushed to npm, so this is resolving that error.
🆕 Added glTF sheen extension support! We now support all of the released PBR extensions. See fidelity comparisons here. https://github.com/mrdoob/three.js/pull/23069
🆕 Added repetitions and pingpong options to the play() method for better animation control. Thanks @futahei! #3021, #3104
🆕 Added uv coordinates to the output of positionAndNormalFromPoint(). Thanks @BR14Nx! #3043
🆕 Added a zoom() function to allow programmatic camera manipulation equivalent to keyboard/scroll/pinch zoom behavior. #3087
🆕 Default framing now accounts for non-default field of view. This means when you want a custom focal length, you no longer need to calculate and set a corresponding radius in camera-orbit. #3105
setURI method now changes a texture for all models that point to it. To individually change a texture when the same model has been reused, please use the newer createTexture API. #2935setAlphaMode. Thanks @SrirachaSource! #2985✨ Added Thor camera views example. Thanks @hybridherbst! #3018 ✨ Fixed example strings. Thanks @benmbark! #3040 ✨ Updated transparency example to demonstrate glTF transmission support. #3112