{"id":19815181,"url":"https://github.com/akbartus/a-frame-clipping-plane-component","last_synced_at":"2026-05-17T18:07:30.832Z","repository":{"id":170195345,"uuid":"645586917","full_name":"akbartus/A-Frame-Clipping-Plane-Component","owner":"akbartus","description":"A-Frame Component demonstrating clipping planes. ","archived":false,"fork":false,"pushed_at":"2023-05-31T13:39:10.000Z","size":11733,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-08T04:54:42.695Z","etag":null,"topics":["aframe-vr","clipping","clipping-plane","cross-sections","threejs"],"latest_commit_sha":null,"homepage":"https://c-plane.glitch.me/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/akbartus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-26T01:50:30.000Z","updated_at":"2024-07-12T22:05:29.000Z","dependencies_parsed_at":null,"dependency_job_id":"a9a6fd66-f321-4a96-b83e-842e24be0a0d","html_url":"https://github.com/akbartus/A-Frame-Clipping-Plane-Component","commit_stats":null,"previous_names":["akbartus/a-frame-clipping-plane-component"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/akbartus/A-Frame-Clipping-Plane-Component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akbartus%2FA-Frame-Clipping-Plane-Component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akbartus%2FA-Frame-Clipping-Plane-Component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akbartus%2FA-Frame-Clipping-Plane-Component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akbartus%2FA-Frame-Clipping-Plane-Component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/akbartus","download_url":"https://codeload.github.com/akbartus/A-Frame-Clipping-Plane-Component/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akbartus%2FA-Frame-Clipping-Plane-Component/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33149519,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-17T09:28:26.183Z","status":"ssl_error","status_checked_at":"2026-05-17T09:27:52.702Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aframe-vr","clipping","clipping-plane","cross-sections","threejs"],"created_at":"2024-11-12T10:04:59.276Z","updated_at":"2026-05-17T18:07:30.815Z","avatar_url":"https://github.com/akbartus.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# A-Frame-Clipping-Plane-Component\n\u003cimg src=\"img/screenshot.gif\" title=\"Video screen capture\" alt=\"Video screen capture\" height=\"400\"\u003e\n\n### **Description / Rationale**\nThis is an A-Frame component, which demonstrates clipping planes. It was developed based on corresponding \u003ca href=\"https://threejs.org/examples/webgl_clipping.html\"\u003eexample\u003c/a\u003e provided by Three.js library. However it also has some distinguishing features: \n* Clipping direction option.\n* Applying clipping in relation to GLTF files and other entity types.\n* Manipulating clipping plane using mouse scroll event or touchmove event\n* Enabling double-sided meshes.     \n\n### **Instructions**\nIn order to use the component attach \"clipping-plane\" to an entity. The component has the following attributes: \n* \u003cb\u003eclippingDirection: { type: 'string', default: 'top-to-bottom' }\u003c/b\u003e - 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).  \n* \u003cb\u003ematerialSide: { type: 'boolean' }\u003c/b\u003e - Whether mesh should have double sided material.\n* \u003cb\u003eplaneConstant: { type: 'float', default: 2.0 }\u003c/b\u003e // Original clipping plane location on X or Y or Z axis depending on clipping plane direction. It is from where it starts.\n* \u003cb\u003eminScrollValue: { type: 'float', default: -2.0 }\u003c/b\u003e - Minimal value beyond which clipping plane will not go. X or Y or Z axis depending on clipping plane direction.\n* \u003cb\u003emaxScrollValue: { type: 'float', default: 2.0 }\u003c/b\u003e - Maximal value beyond which clipping plane will not go. X or Y or Z axis depending on clipping plane direction.\n* \u003cb\u003emouseScrollSpeed: { type: 'float', default: 0.0005 }\u003c/b\u003e - Mouse scrolling speed or delta. \n* \u003cb\u003etouchScrollSpeed: { type: 'float', default: 0.01 }\u003c/b\u003e - Touch based scrolling speed or delta.\n\nThe code below shows the sample implementation of the component. Please make sure to add 'a-camera' to enable scrolling/touch move events:\n```\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003ctitle\u003eA-Frame Component: Clipping Plane\u003c/title\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0\"\u003e\n    \u003cscript src=\"https://aframe.io/releases/1.4.2/aframe.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"js/clipping-plane-component.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n    \u003ca-scene\u003e\n        \u003ca-entity position=\"0 1 -2\" scale=\"50 50 50\" gltf-model=\"src: url(models/toyCar.glb);\"\n            clipping-plane=\"clippingDirection: top-to-bottom;\" class=\"clickable\"\u003e\u003c/a-entity\u003e\n        \u003ca-entity position=\"2 0.2 -2\" scale=\"1 1 1\" gltf-model=\"src: url(models/sheenChair.glb);\"\n            clipping-plane=\"clippingDirection: bottom-to-top;\" class=\"clickable\"\u003e\u003c/a-entity\u003e\n        \u003ca-entity id=\"model\" class=\"clickable\" clipping-plane=\"clippingDirection: left-to-right; materialSide: true;\"\n            geometry=\"primitive: box\" position=\"3 1 0\" scale=\"1 1 1\"\u003e\u003c/a-entity\u003e\n        \u003ca-entity id=\"model2\" class=\"clickable\" clipping-plane=\"clippingDirection: right-to-left; materialSide: true;\"\n            geometry=\"primitive: box\" position=\"-2 1 0\"\u003e\u003c/a-entity\u003e\n        \u003ca-plane position=\"0 0 -1\" rotation=\"-90 0 0\" width=\"8\" height=\"8\" color=\"#a4b6c9\"\n            shadow=\"receive: true\"\u003e\u003c/a-plane\u003e\n        \u003ca-camera position=\"0 2 2.5\"\u003e\u003c/a-camera\u003e \u003c!-- Required for click events --\u003e\n        \u003ca-sky color=\"#dfdfdf\"\u003e\u003c/a-sky\u003e\n    \u003c/a-scene\u003e\n\u003c/body\u003e\n\n\u003c/html\u003e\n```\nClipping 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).\n\n### **Tech Stack**\nThe project is powered by AFrame and Three.js. The models used in the example were taken from \u003ca href=\"[https://media.w3.org/2010/05/sintel/](https://github.com/mrdoob/three.js/tree/master/examples/models/gltf)\"\u003eThree.js library\u003c/a\u003e.\n\n### **Demo**\nSee demo of the component here: [Demo](https://c-plane.glitch.me/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakbartus%2Fa-frame-clipping-plane-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fakbartus%2Fa-frame-clipping-plane-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakbartus%2Fa-frame-clipping-plane-component/lists"}