This is A-Frame component for creating lenticular image effects in AR and VR. The original source code was taken from YCW's Codepen Repository and with various modifications was adapted to the A-Frame's environment.
In order to use the component attach "lenticular-image" to a-entity. The component has the following attributes:
- img1: { type: "string", default: "" } - URL to first image.
- img2: { type: "string", default: "" } - URL to second image.
The code below shows the sample implementation of the component:
<html>
<head>
<title>A-Frame Component: Lenticular Image</title>
<script src='https://aframe.io/releases/1.4.2/aframe.min.js'></script>
<script src="js/lenticular-image-component.js"></script>
</head>
<body>
<a-scene>
<a-entity lenticular-image="img1: img/image3.jpg; img2: img/image4.jpg" scale="0.5 0.5 0.5" position="0 1 -2"></a-entity>
<a-entity lenticular-image="img1: img/image1.jpg; img2: img/image2.jpg" scale="0.5 0.5 0.5" position="2 1 -2"></a-entity>
<a-sky color='#ECECEC'></a-sky>
</a-scene>
</body>
</html>
The project is powered by AFrame and Three.js. The all four images used were taken from Unsplash.com: image 1, image 2, image 3, image 4.
See demo of the component here: Demo