How to render Fontawsome icon using CSS2D Renderer/Object

Question

I want to render the map-marker-exclamation icon from the FontAwsome library above a three.js cube, but the icon is not rendered properly as you can see below!

Can you please tell me how can I render a FontAwsome Icon on three.js? thanks 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/three@0.122.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.122.0/examples/js/controls/OrbitControls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.122.0/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">

You're not seeing your 2DObject because you haven't created a `CSS2DRenderer`. `WebGLRenderer` doesn't render CSS objects. Take a look at [the official example](https://threejs.org/examples/?q=css#css2d_label), you can click on the `< >` icon to see the source code, and how they use `CSS2DRenderer` to render `CSS2DObject`s. — M -, Nov 21 '22 at 21:21
@Marquizzo thanks for your kind suggestion, adding the `CSS2DRenderer` as you mentioned was really helpful to render a text, but I wasn't able to render a `Font-awsome` Icon! I have updated the code in my question accordingly. — Bilal, Nov 22 '22 at 07:32

score 2 · Accepted Answer · answered Nov 22 '22 at 18:19

2

The reason you're not seeing the icon is that you're importing your font-awesome CSS file as a <script>.

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"></script>

But it's not a script, it's a stylesheet, and it needs to be imported as such:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">

answered Nov 22 '22 at 18:19

M -

26,908
11
49
81

thanks for your answer, I have updated the code in the question with this note, but still the icon is not rendered! – Bilal Nov 22 '22 at 18:29
1

@Bilal Yeah, in addition to the CSS files, it looks like you need to have the icon font files installed in a `/webfonts` folder. I think you need to spend some time reading the [FontAwesome documentation](https://fontawesome.com/docs) to learn how to install and use their icons. I'm sorry I cannot help you any further with this, as it doesn't pertain to Three.js – M - Nov 22 '22 at 19:35

How to render Fontawsome icon using CSS2D Renderer/Object

1 Answers1

Linked