a3d-model
Description
Description
The <a3d-model> web component is designed to add a 3D model into the scene or into a node <a3d-node>.
a3d-model can open GLB files but also and Gaussian Splats as PLY files, STL and OBJ.
The loader will depend on file extension or can be specified using its loader attribute.
Installation
Using npm :
npm install @a3d-viewer/viewerImporting the a3d-model :
import '@a3d-viewer/viewer'Usage
<a3d-viewer>
<!-- .... -->
<a3d-model src="PATH_TO_GLB_FILE.glb"></a3d-model>
<!-- .... -->
<a3d-node>
<!-- .... -->
<a3d-model src="PATH_TO_GLB_FILE.glb"></a3d-model>
<!-- .... -->
</a3d-node>
<!-- .... -->
</a3d-viewer>Replace “PATH_TO_GLB_FILE.glb” with the URL or relative path to the GLB file containing the 3D mesh.
Attributes
src
The src attribute correspond to the url pointing to your mesh
loader
The loader attribute will force the loader to use with your file.
It’s used when your src does not have an extension in its path.
Available loaders are glb,ply,stl and obj.
<a3d-viewer>
<!-- .... -->
<a3d-node>
<!-- .... -->
<a3d-model src="URL_WITHOUT_FILE_EXTENSION" loader="glb"></a3d-model>
<!-- .... -->
</a3d-node>
<!-- .... -->
</a3d-viewer>selected-animation & animation-status
The attributes selected-animation and animation-status allow you to define an animation by its name and decide to set its status to ‘play | pause | stop’.
<a3d-viewer>
<!-- .... -->
<a3d-node>
<!-- .... -->
<a3d-model
id="myModel"
src="MODEL_URL"
selected-animation="1"
animation-status="play"
></a3d-model>
<!-- .... -->
</a3d-node>
<!-- .... -->
</a3d-viewer>position
The attribute position sets the local position (referring to its parent) of the model.
<a3d-viewer>
<!-- .... -->
<a3d-node>
<!-- .... -->
<a3d-model src="MODEL_URL" position="0 1 0"></a3d-model>
<!-- .... -->
</a3d-node>
<!-- .... -->
</a3d-viewer>rotation
The attribute rotation sets the local rotation in radians (referring to its parent) of the model.
<a3d-viewer>
<!-- .... -->
<a3d-node>
<!-- .... -->
<a3d-model
src="MODEL_URL"
position="0 1 0"
rotation="0 0 -0.45"
></a3d-model>
<!-- .... -->
</a3d-node>
<!-- .... -->
</a3d-viewer>scaling
The attribute scaling applies a scaling to the meshes in the model.
<a3d-viewer>
<!-- .... -->
<a3d-node>
<!-- .... -->
<a3d-model src="MODEL_URL" scaling="1.1 1.1 1.1"></a3d-model>
<!-- .... -->
</a3d-node>
<!-- .... -->
</a3d-viewer>locked
This attribute (also present on <a3d-node>) prevents the node/model from being transformed.
<!-- This model cannot be transformed -->
<a3d-model locked src="model.glb"></a3d-model>
<!-- Both models along this node cannot be transformed -->
<a3d-node locked>
<a3d-model src="model1.glb"></a3d-model>
<a3d-model src="model2.glb"></a3d-model>
</a3d-node>Properties
transformInfo
The transformInfo property returns the current transformation applied to the model (position and rotation)
<a3d-viewer>
<!-- .... -->
<a3d-model id="myModel" src="MODEL_URL"></a3d-model>
<!-- .... -->
</a3d-viewer>
<script>
const myModel = document.querySelector('#myModel');
console.log(myModel.transformInfo.position)
// {_isDirty: false, _x: 0, _y: 1, _z: 0}
console.log(myModel.transformInfo.rotation)
// {_isDirty: false, _x: 0, _y: 0, _z: -0.45}
</scrip>