{"id":19815174,"url":"https://github.com/akbartus/a-frame-spotlight-with-texture-component","last_synced_at":"2025-10-10T17:42:12.300Z","repository":{"id":169500231,"uuid":"645354113","full_name":"akbartus/A-Frame-SpotLight-with-Texture-Component","owner":"akbartus","description":"A-Frame component for creating spotlight with texture (image and video)","archived":false,"fork":false,"pushed_at":"2023-05-25T21:40:00.000Z","size":9275,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-02T16:25:22.719Z","etag":null,"topics":["a-frame","aframe-vr","spotlight","texture-projection"],"latest_commit_sha":null,"homepage":"https://spotlight-texture.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-25T13:17:18.000Z","updated_at":"2024-07-12T22:05:51.000Z","dependencies_parsed_at":null,"dependency_job_id":"f528858b-481a-4cf8-b0c5-6af8addb2770","html_url":"https://github.com/akbartus/A-Frame-SpotLight-with-Texture-Component","commit_stats":null,"previous_names":["akbartus/a-frame-spotlight-with-texture-component"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/akbartus/A-Frame-SpotLight-with-Texture-Component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akbartus%2FA-Frame-SpotLight-with-Texture-Component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akbartus%2FA-Frame-SpotLight-with-Texture-Component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akbartus%2FA-Frame-SpotLight-with-Texture-Component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akbartus%2FA-Frame-SpotLight-with-Texture-Component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/akbartus","download_url":"https://codeload.github.com/akbartus/A-Frame-SpotLight-with-Texture-Component/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akbartus%2FA-Frame-SpotLight-with-Texture-Component/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279004823,"owners_count":26083784,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-10T02:00:06.843Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["a-frame","aframe-vr","spotlight","texture-projection"],"created_at":"2024-11-12T10:04:58.811Z","updated_at":"2025-10-10T17:42:12.295Z","avatar_url":"https://github.com/akbartus.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# A-Frame-Spotlight-with-Texture-Component\n\u003cimg src=\"img/screenshot.gif\" title=\"Video screen capture\" alt=\"Video screen capture\" height=\"300\"\u003e\n\u003cimg src=\"img/screenshot2.gif\" title=\"Video screen capture\" alt=\"Video screen capture\" height=\"300\"\u003e\n\n### **Description / Rationale**\nThis is an A-Frame component, which demonstrates spotlight with texture. It can also be called as a projected texture component because texture is dynamically projected on mesh surfaces. The component was created based on the works by Marco Fugaro named \u003ca href=\"https://github.com/marcofugaro/three-projected-material\"\u003eThree Projected Material\u003c/a\u003e, \u003ca href=\"https://github.com/marcofugaro/codrops-texture-projection\"\u003eCodrops Texture Projection\u003c/a\u003e as well as Spotlight example provided in \u003ca href=\"https://threejs.org/examples/#webgl_lights_spotlight\"\u003eThree.js library\u003c/a\u003e.     \n\n### **Instructions**\nIn order to use the component attach \"spotlight-texture\" to \"a-scene\". The component has the following attributes: \n* \u003cb\u003elightHelper: { type: 'boolean', default: true }\u003c/b\u003e - spotlight helper. It helps to see the location and direction of spotlight in the scene.\n* \u003cb\u003espotlightShadow: { type: 'boolean', default: false }\u003c/b\u003e - enables or disables shadow of 3d objects. Requires that objects in scene have \"shadow='cast: true'\" attribute.\n* \u003cb\u003espotlightDynamic: { type: 'boolean', default: false }\u003c/b\u003e - Adds spotlight animation (movement). If disabled, spotlight becomes static. \n* \u003cb\u003espotlightColor: { type: 'color', default: '#ffffff' }\u003c/b\u003e - The color of the spotlight.\n* \u003cb\u003espotlightIntensity: { type: 'float', default: 10 }\u003c/b\u003e - Intensity of the spotlight.\n* \u003cb\u003espotlightDistance: { type: 'float', default: 100 }\u003c/b\u003e - Distance of the spotlight.\n* \u003cb\u003espotlightAngle: { type: 'float', default: 0.5 }\u003c/b\u003e - Angle of the spotlight. Accepts float values from 0.0 to 1.0\n* \u003cb\u003espotlightPenubra: { type: 'float', default: 1 }\u003c/b\u003e - Penubra of the spotlight.\n* \u003cb\u003espotlightDecay: { type: 'float', default: 2 }\u003c/b\u003e - Decay of the spotlight.\n* \u003cb\u003espotlightFocus: { type: 'float', default: 1 }\u003c/b\u003e - Focus(size) of the spotlight.\n* \u003cb\u003espotlightPosition: { type: 'vec3', default: { x: 10, y: 35, z: 10 } }\u003c/b\u003e - Position of the spotlight.\n* \u003cb\u003eimgTexture: { type: 'boolean', default: true }\u003c/b\u003e - If enabled projects image texture over objects in scene. If disabled projects video over objects in scene. \n* \u003cb\u003eimgTextureSrc: { type: 'string', default: '' }\u003c/b\u003e - Source/URL of image texture.\n* \u003cb\u003evideoTextureSrc: { type: 'string', default: '' }\u003c/b\u003e - source/URL of video texture.\n\nThe code below shows the sample implementation of the component. Please make sure to disable default lights in scene so that the component takes over (light=\"defaultLightsEnabled: false\"):\n```\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003ctitle\u003eSpotLight Texture Component (aka Texture projection)\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/spotlight-texture-component.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003ca-scene light=\"defaultLightsEnabled: false\" \n    spotlight-texture=\"\n    lightHelper: true; \n    spotlightShadow: true; \n    spotlightDynamic: true;\n    spotlightColor: #ffffff;\n    spotlightIntensity: 15;\n    spotlightDistance: 90;\n    spotlightAngle: 0.5;\n    spotlightPenubra: 1;\n    spotlightDecay: 2;\n    spotlightFocus: 1;\n    spotlightPosition: 0, 40, 0;\n    imgTexture: false;\n    imgTextureSrc: textures/uvGrid.jpg;\n    videoTextureSrc: textures/trailer.mp4\n    \"\u003e\n        \u003ca-camera position=\"0 15 20\"\u003e\u003c/a-camera\u003e\n        \u003ca-box scale=\"10 10 10\" position=\"-20 5 0\" shadow=\"cast: true\"\u003e\u003c/a-box\u003e\n        \u003ca-gltf-model src=\"models/soldier.glb\" scale=\"10 10 10\" rotation=\"0 180 0\" shadow=\"cast: true\"\u003e\u003c/a-gltf-model\u003e\n        \u003ca-sky color=\"#000000\"\u003e\u003c/a-sky\u003e\n    \u003c/a-scene\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### **Tech Stack**\nThe project is powered by AFrame and Three.js. The video used in the example was taken from \u003ca href=\"https://media.w3.org/2010/05/sintel/\"\u003ehere\u003c/a\u003e and image textures from \u003ca href=\"https://github.com/mrdoob/three.js/tree/master/examples/textures\"\u003eThree.js repository\u003c/a\u003e.\n\n### **Demo**\nSee demo of the component here: [Demo](https://spotlight-texture.glitch.me/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakbartus%2Fa-frame-spotlight-with-texture-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fakbartus%2Fa-frame-spotlight-with-texture-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakbartus%2Fa-frame-spotlight-with-texture-component/lists"}