This is a small A-Frame component, which allows to create cross-sections/dissections and show what is inside of a 3D model/object. It can be used in showing the inner of an architectural model; or in anatomy classes.
To enable cross-section component:
- Attach it to the head of your html file, for example:
<script src="cross-section-component.js"></script>
- Attach attribute of "cross-section" to the model you want to do the cross-section. Also, attach a class, for making it clickable, for example:
<a-entity class="clickable" cross-section gltf-model="#room" rotation="0 180 0" position="0 -1.5 -3" scale="0.02 0.02 0.02">
If necessary define the parameters of the attribute. It has two parameters: distance - a distance from camera to object; animationTime: time for animation of the cross-section. For example:
cross-section="distance: 3; animationTime: 4000"
- Make sure to add click event:
For mouse:
<a-entity cursor="rayOrigin: mouse" raycaster="objects: .clickable;"></a-entity>
For VR controllers:
<a-entity class="controller" laser-controls="hand: left" raycaster="objects: .clickable;" line="color: #000000"></a-entity>
<a-entity class="controller" laser-controls="hand: right" raycaster="objects: .clickable;" line="color: #000000"></a-entity>
The project is powered by AFrame.
The 3D model of the building was created by Nikitos & 3130 and can be found here.
To see the application at work: Demo application