https://github.com/akbartus/a-frame-occlusion-component

This is A-Frame component for occlusions.
https://github.com/akbartus/a-frame-occlusion-component

a-frame aframevr occlusion threejs

Last synced: 2 days ago
JSON representation

This is A-Frame component for occlusions.

• Host: GitHub
• URL: https://github.com/akbartus/a-frame-occlusion-component
• Owner: akbartus
• License: mit
• Created: 2023-09-05T19:58:05.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-09-06T18:59:57.000Z (about 1 year ago)
• Last Synced: 2023-09-06T21:44:21.700Z (about 1 year ago)
• Topics: a-frame, aframevr, occlusion, threejs
• Language: JavaScript
• Homepage: https://occlusion-component.glitch.me/
• Size: 1.17 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# A-Frame-Occlusion-Component



### **Description / Rationale**

This is the A-Frame component, which lets achieve occlusion effects. It can be useful specifically in webAR related projects.     

### **Instructions**

The component has the following attributes:

* occlusionModelUrl: { type: 'string' } - url to a gltf model, which will serve as occlusion model.

* occlusionModelPosition: { type: 'vec3', default: { x: 0, y: 0, z: -3 } } - occlusion model position.

* occlusionModelRotation: { type: 'vec3', default: { x: 0, y: 0, z: 0 } } - occlusion model rotation.

* occlusionModelScale: { type: 'vec3', default: { x: 1, y: 1, z: 1 } } - occlusion model scale.

* occlusionModelPart: { type: 'boolean', default: false } - indicate if specific part/s of the occlusion model will serve for occlusion (i.e. whether only part/s of the model should serve for occlusion). 

* partNames: { type: 'array'} - if occlusionModelPart is true, then include the names of the parts of occlusion model, which will serve for occlusion.

* occludedModelUrl: { type: 'string' } - url to gltf model which will be occluded by occlusion model.

* occludedModelPosition: { type: 'vec3', default: { x: 0, y: 0, z: -4 } } - occluded model position. 

* occludedModelRotation: { type: 'vec3', default: { x: 0, y: 0, z: 0 } } - occluded model rotation.

* occludedModelScale: { type: 'vec3', default: { x: 1, y: 1, z: 1 } } - occluded model scale.

To see component at work, include "occlusion-component" to a-entity.

Below a detailed implementation of the component is given: 

```

    A-Frame Occlusion Component

    

    

    

        

        

        

        

    

```

In addition, a sample implementation of occlusion is provided for Three.js.

Note: When making more complex gltf file serve as occluder (not plane or other primitives), the component sometimes might not work properly (no occlusion occurs). Changing A-Frame version to 1.2.0 solves this issue.

### **Tech Stack**

The project is powered by AFrame and Three.js

### **Demo**

To see the application at work: [Demo application](https://occlusion-component.glitch.me/)