a3d-viewer
Description
Description
The a3d-viewer web-component is the main web-component to build the Adobe 3D viewer.
It is built on top of the Babylon.js viewer (v2) , inheriting its attributes, properties, and events while providing a declarative approach to scene definition.
Installation
Using npm :
npm install @a3d-viewer/viewerImporting the a3d-viewer :
import '@a3d-viewer/viewer'Usage
To use the a3d-viewer component, simply include it in your HTML:
<a3d-viewer>
<!-- Insert your 3D components here -->
</a3d-viewer>Attributes
The a3d-viewer support all the basic properties of the babylon.js viewer. You can find the full list of supported properties here: Babylon.js Viewer Element Interface .
So you can add a source attribute to load your model
<a3d-viewer source="http://substance3d.adobe.com/mymodel.glb"></a3d-viewer>
Methods
focusHotSpot
In addition to the existing methods provided by the Babylon.js Viewer , fucusHotSpot provides a way to update the camera to focus on a a3d-hot-spot element or by the name of the designated hot spot in the hot-spot property.
<a3d-viewer id="myViewer">
<!-- -->
<a3d-hot-spot
id="myWorldHotSpot"
style="transform: translate(1257.81px, 915.336px);"
>
<svg class="hot-spot">
<ellipse
cx="10"
cy="10"
rx="8"
ry="8"
fill="blue"
stroke="white"
stroke-width="3"
></ellipse>
</svg>
</a3d-hot-spot>
<!-- -->
</a3d-viewer>
<script>
const myViewer = document.querySelector('#myViewer')
const myWorldHotSpot = document.querySelector('#myWorldHotSpot')
// place the camera on the hot spot
myViewer.focusHotSpot(myWorldHotSpot)
</script>events
sceneloaded
In addition to the existing events provided by the Babylon.js Viewer , sceneloaded is dispatched once all the children of the a3d-viewer are fully loaded.
This event is dispatched once.
<a3d-viewer id="myViewer">
<!-- -->
</a3d-viewer>
<script>
const myViewer = document.querySelector('#myViewer')
myViewer.addEventListener('sceneloaded', () => {
// Things to do after the scene is readability
// (can be used to build your own loader)
})
</script>