https://github.com/akbartus/a-frame-clipping-plane-component
A-Frame Component demonstrating clipping planes.
https://github.com/akbartus/a-frame-clipping-plane-component
aframe-vr clipping clipping-plane cross-sections threejs
Last synced: 30 days ago
JSON representation
A-Frame Component demonstrating clipping planes.
- Host: GitHub
- URL: https://github.com/akbartus/a-frame-clipping-plane-component
- Owner: akbartus
- License: mit
- Created: 2023-05-26T01:50:30.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-05-31T13:39:10.000Z (about 3 years ago)
- Last Synced: 2025-07-08T04:54:42.695Z (11 months ago)
- Topics: aframe-vr, clipping, clipping-plane, cross-sections, threejs
- Language: JavaScript
- Homepage: https://c-plane.glitch.me/
- Size: 11.2 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# A-Frame-Clipping-Plane-Component
### **Description / Rationale**
This is an A-Frame component, which demonstrates clipping planes. It was developed based on corresponding example provided by Three.js library. However it also has some distinguishing features:
* Clipping direction option.
* Applying clipping in relation to GLTF files and other entity types.
* Manipulating clipping plane using mouse scroll event or touchmove event
* Enabling double-sided meshes.
### **Instructions**
In order to use the component attach "clipping-plane" to an entity. The component has the following attributes:
* clippingDirection: { type: 'string', default: 'top-to-bottom' } - Direction of the clipping plane or from where it should move. Has the following options: "top-to-bottom" (on Y-axis), "bottom-to-top" (on Y-axis), "front-to-back" (on Z-axis), "back-to-front" (on Z-axis), "left-to-right" (on X-axis), "right-to-left" (on X-axis).
* materialSide: { type: 'boolean' } - Whether mesh should have double sided material.
* planeConstant: { type: 'float', default: 2.0 } // Original clipping plane location on X or Y or Z axis depending on clipping plane direction. It is from where it starts.
* minScrollValue: { type: 'float', default: -2.0 } - Minimal value beyond which clipping plane will not go. X or Y or Z axis depending on clipping plane direction.
* maxScrollValue: { type: 'float', default: 2.0 } - Maximal value beyond which clipping plane will not go. X or Y or Z axis depending on clipping plane direction.
* mouseScrollSpeed: { type: 'float', default: 0.0005 } - Mouse scrolling speed or delta.
* touchScrollSpeed: { type: 'float', default: 0.01 } - Touch based scrolling speed or delta.
The code below shows the sample implementation of the component. Please make sure to add 'a-camera' to enable scrolling/touch move events:
```
A-Frame Component: Clipping Plane
```
Clipping plane gets activated after clicking on GTLF/entity. Then use mouse scroller. For touch based devices, first touch the GLTF and then touch and move up or down (drag).
### **Tech Stack**
The project is powered by AFrame and Three.js. The models used in the example were taken from Three.js library.
### **Demo**
See demo of the component here: [Demo](https://c-plane.glitch.me/)