Как визуализировать значок Fontawsome с помощью CSS2D Renderer/Object

Я хочу отобразить значок map-marker-exclamation из библиотеки FontAwsome над кубом three.js, но значок отображается неправильно, как вы можете видеть ниже!

Подскажите, пожалуйста, как мне отрендерить иконку FontAwsome на three.js? заранее спасибо.

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

Вы не видите свой 2D-объект, потому что не создали CSS2DRenderer. WebGLRenderer не отображает объекты CSS. Взгляните на официальный пример, вы можете щелкнуть значок < >, чтобы увидеть исходный код и то, как они используют CSS2DRenderer для рендеринга CSS2DObjects.

Marquizzo 21.11.2022 22:21

@Marquizzo спасибо за ваше любезное предложение, добавление CSS2DRenderer, как вы упомянули, было действительно полезно для отображения текста, но я не смог отобразить значок Font-awsome! Я обновил код в своем вопросе соответственно.

Bilal 22.11.2022 08:32

зачем использовать веб-шрифт? почему бы просто не использовать svg?

2pha 22.11.2022 22:53
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
Начала с розового дизайна
Начала с розового дизайна
Pink Design - это система дизайна Appwrite с открытым исходным кодом для создания последовательных и многократно используемых пользовательских...
Анимация SVG-узоров без единой строки CSS
Анимация SVG-узоров без единой строки CSS
Недавно я работал над веб-проектом, который позволил мне поэкспериментировать с шаблонами SVG. С SVG очень приятно работать, как только вы получите...
Неделя 1 - Карточки с временной шкалой
Неделя 1 - Карточки с временной шкалой
Поскольку это была первая неделя, я решил начать с простого. Предполагалось, что у меня будет временная шкала с несколькими карточками, которые можно...
8 репозиториев GitHub, о которых должен знать каждый веб-разработчик
8 репозиториев GitHub, о которых должен знать каждый веб-разработчик
Здесь представлена дополнительная информация о восьми репозиториях GitHub, о которых должен знать каждый веб-разработчик:
Как создать модальное окно с помощью CSS и JS
Как создать модальное окно с помощью CSS и JS
В этой статье мы создадим модальное окно на чистом JavaScript.
0
3
67
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Причина, по которой вы не видите значок, заключается в том, что вы импортируете свой CSS-файл с потрясающим шрифтом как <script>.

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

Но это не скрипт, это таблица стилей, и ее нужно импортировать как таковую:

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

спасибо за ваш ответ, я обновил код в вопросе с помощью этой заметки, но значок все равно не отображается!

Bilal 22.11.2022 19:29

@Bilal Да, в дополнение к файлам CSS, похоже, вам нужно установить файлы шрифтов значков в папку /webfonts. Я думаю, вам нужно потратить некоторое время на чтение документации FontAwesome, чтобы узнать, как устанавливать и использовать их иконки. Извините, я больше не могу вам помочь, так как это не относится к Three.js.

Marquizzo 22.11.2022 20:35

Другие вопросы по теме