CODEWITHSUNDEEP
cssthree.jsfont-awesome
Bilal
Bilal

Reputation: 3864

How to render Fontawsome icon using CSS2D Renderer/Object

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/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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">

Upvotes: 0

Views: 295

Answers (1)

M -
M -

Reputation: 28502

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">

Upvotes: 2

Related Questions