a3d-node
Description
Description
The purpose of the <a3d-node> tag is to provide a way to scope 3D components.
It’s commonly used to apply transformation on 3D components.
Installation
Using npm :
npm install @a3d-viewer/viewerImporting the a3d-node :
import '@a3d-viewer/viewer'Usage
To use the a3d-node component, simply include it in your HTML:
<a3d-viewer>
<!-- .... -->
<a3d-node>
<!-- Insert scoped 3D components here -->
</a3d-node>
<!-- .... -->
</a3d-viewer>Attributes
position
The attribute position sets the local position (referring to its parent) of the model.
<a3d-viewer>
<!-- .... -->
<a3d-node position="0 1 0">
<!-- .... -->
</a3d-node>
<!-- .... -->
</a3d-viewer>rotation
The attribute rotation sets the local rotation in radians (referring to its parent) of the node.
<a3d-viewer>
<!-- .... -->
<a3d-node rotation="0 0 -0.45">
<!-- .... -->
</a3d-node>
<!-- .... -->
</a3d-viewer>scaling
The attribute scaling applies a scaling to the meshes in the node.
<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-model>) 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 node (position and rotation)
<a3d-viewer>
<!-- .... -->
<a3d-node id="myNode" position="0 1 0" rotation="0 0 -0.45">
<!-- .... -->
</a3d-node>
<!-- .... -->
</a3d-viewer>
<script>
const myNode = document.querySelector('#myNode');
console.log(myNode.transformInfo.position)
// {_isDirty: false, _x: 0, _y: 1, _z: 0}
console.log(myNode.transformInfo.rotation)
// {_isDirty: false, _x: 0, _y: 0, _z: -0.45}
</scrip>
Last updated on