An A-Frame component for placing raytraced surfaces in a scene.
| 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 |
Install and use by directly including the browser files:
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/1.0.3/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-componentInstall via npm:
npm install aframe-raytrace-componentThen require and use.
require('aframe');
require('aframe-raytrace-component');