https://github.com/akbartus/a-frame-spotlight-with-texture-component
A-Frame component for creating spotlight with texture (image and video)
https://github.com/akbartus/a-frame-spotlight-with-texture-component
a-frame aframe-vr spotlight texture-projection
Last synced: 7 days ago
JSON representation
A-Frame component for creating spotlight with texture (image and video)
- Host: GitHub
- URL: https://github.com/akbartus/a-frame-spotlight-with-texture-component
- Owner: akbartus
- License: mit
- Created: 2023-05-25T13:17:18.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-05-25T21:40:00.000Z (over 2 years ago)
- Last Synced: 2025-06-02T16:25:22.719Z (5 months ago)
- Topics: a-frame, aframe-vr, spotlight, texture-projection
- Language: JavaScript
- Homepage: https://spotlight-texture.glitch.me/
- Size: 8.85 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# A-Frame-Spotlight-with-Texture-Component
### **Description / Rationale**
This 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 Three Projected Material, Codrops Texture Projection as well as Spotlight example provided in Three.js library.
### **Instructions**
In order to use the component attach "spotlight-texture" to "a-scene". The component has the following attributes:
* lightHelper: { type: 'boolean', default: true } - spotlight helper. It helps to see the location and direction of spotlight in the scene.
* spotlightShadow: { type: 'boolean', default: false } - enables or disables shadow of 3d objects. Requires that objects in scene have "shadow='cast: true'" attribute.
* spotlightDynamic: { type: 'boolean', default: false } - Adds spotlight animation (movement). If disabled, spotlight becomes static.
* spotlightColor: { type: 'color', default: '#ffffff' } - The color of the spotlight.
* spotlightIntensity: { type: 'float', default: 10 } - Intensity of the spotlight.
* spotlightDistance: { type: 'float', default: 100 } - Distance of the spotlight.
* spotlightAngle: { type: 'float', default: 0.5 } - Angle of the spotlight. Accepts float values from 0.0 to 1.0
* spotlightPenubra: { type: 'float', default: 1 } - Penubra of the spotlight.
* spotlightDecay: { type: 'float', default: 2 } - Decay of the spotlight.
* spotlightFocus: { type: 'float', default: 1 } - Focus(size) of the spotlight.
* spotlightPosition: { type: 'vec3', default: { x: 10, y: 35, z: 10 } } - Position of the spotlight.
* imgTexture: { type: 'boolean', default: true } - If enabled projects image texture over objects in scene. If disabled projects video over objects in scene.
* imgTextureSrc: { type: 'string', default: '' } - Source/URL of image texture.
* videoTextureSrc: { type: 'string', default: '' } - source/URL of video texture.
The 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"):
```
SpotLight Texture Component (aka Texture projection)
```
### **Tech Stack**
The project is powered by AFrame and Three.js. The video used in the example was taken from here and image textures from Three.js repository.
### **Demo**
See demo of the component here: [Demo](https://spotlight-texture.glitch.me/)