aframe-raytrace-component
v1.1.2
Published
An A-Frame component for placing raytraced surfaces in a scene.
Downloads
55
Maintainers
ravenworksReadme
aframe-raytrace-component
An A-Frame component for placing raytraced surfaces in a scene.
Click here to view demo
API
| Property | Description | Default Value | | -------- | ----------- | ------------- | | shader | ID of a shader in a script tag. | (none) | | transparent | Whether the result of the shader is alpha blended with what's behind it. | false | | backside | Whether the shader is drawn on the frontfaces or the backfaces of the mesh. | false |
Installation
Browser
Install and use by directly including the browser files:
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-raytrace-component/dist/aframe-raytrace-component.min.js"></script>
</head>
<body>
<script id="foo-fs" type="x-shader/x-fragment">
uniform float time;
uniform vec3 localCameraPos;
varying vec3 localSurfacePos;
void main(){
vec3 localCameraDirection = normalize(localSurfacePos - localCameraPos);
gl_FragColor = vec4(1.0,0.0,1.0,1.0);
}
</script>
<a-scene>
<a-box position="0 1.6 -2" raytrace="shader:#foo-fs"></a-box>
</a-scene>
</body>Or with angle, you can install the proper version of the component straight into your HTML file, respective to your version of A-Frame:
angle install aframe-raytrace-componentnpm
Install via npm:
npm install aframe-raytrace-componentThen require and use.
require('aframe');
require('aframe-raytrace-component');