I came across a method to create a ground-projected environment in three.js, and I want to use this in my AFrame project. I'm aware that AFrame is built on three.js, so I assume that I should be able to utilize the three.js API to achieve this. However, I'm not sure how to incorporate the GroundProjectedSkybox object from three.js into my AFrame project.
For reference, here is an example of the ground-projected environment in three.js along with the relevant code:
You can export the relevant classes from threejs, or use my ground-projected-skybox component:
<script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
<script src="https://gftruj.github.io/webzamples/aframe/three-components/dist/ground-projected-skybox.js"></script>
<a-scene ground-projected-skybox="envMapUrl: https://threejs.org/examples/textures/equirectangular/blouberg_sunrise_2_1k.hdr"
renderer="colorManagement: true;">
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow material="metalness: 1; roughness: 0"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow material="metalness: 1; roughness: 0"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow material="metalness: 1; roughness: 0"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow="receive: true"></a-plane>
</a-scene>envMapUrl to the hdr texture (which in the above example is from threejs.org)