I am trying to display the map-marker-exclamation icon from the FontAwsome library on top of a three.js cube, but unfortunately, the icon is not rendering properly. Can someone guide me on how to successfully render a FontAwsome Icon using three.js? Thank you in advance.
var camera, scene, renderer;
init();
animate();
/**
* draw cube
**/
function drawCube(pos, scene) {
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
material.transparent = true;
material.opacity = 0.2;
const cube = new THREE.Mesh( geometry, material );
const el = document.createElement('div')
el.innerHTML = 'Hi <i class="fa-solid fa-user"</i>'
const objectCSS = new THREE.CSS2DObject(el)
objectCSS.position.set(pos.x, pos.y+1, pos.z)
cube.add(objectCSS);
scene.add(cube);
}
/**
Create the scene, camera, renderer
*/
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0x21252d);
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.x = 1;
camera.position.y = 4;
camera.position.z = 5;
scene.add(camera);
labelRenderer = new THREE.CSS2DRenderer();
labelRenderer.setSize( window.innerWidth, window.innerHeight );
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = '0px';
document.body.appendChild( labelRenderer.domElement );
controls = new THREE.OrbitControls(camera, labelRenderer.domElement);
const cube_pos = new THREE.Vector3(1, 0, 2);
drawCube(cube_pos, scene);
window.addEventListener('resize', onWindowResize);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
renderer.render(scene, camera);
labelRenderer.render( scene, camera );
}<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a0d4c8d2c5c5e0908e9192928e90">[email protected]</a>/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="55213d27303015657b6467677b65">[email protected]</a>/examples/js/controls/OrbitControls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a0d4c8d2c5c5e0908e9192928e90">[email protected]</a>/examples/js/renderers/CSS2DRenderer.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">