Я хочу отобразить значок 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">
@Marquizzo спасибо за ваше любезное предложение, добавление CSS2DRenderer
, как вы упомянули, было действительно полезно для отображения текста, но я не смог отобразить значок Font-awsome
! Я обновил код в своем вопросе соответственно.
зачем использовать веб-шрифт? почему бы просто не использовать svg?
Причина, по которой вы не видите значок, заключается в том, что вы импортируете свой 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 Да, в дополнение к файлам CSS, похоже, вам нужно установить файлы шрифтов значков в папку /webfonts
. Я думаю, вам нужно потратить некоторое время на чтение документации FontAwesome, чтобы узнать, как устанавливать и использовать их иконки. Извините, я больше не могу вам помочь, так как это не относится к Three.js.
Вы не видите свой 2D-объект, потому что не создали
CSS2DRenderer
.WebGLRenderer
не отображает объекты CSS. Взгляните на официальный пример, вы можете щелкнуть значок< >
, чтобы увидеть исходный код и то, как они используютCSS2DRenderer
для рендерингаCSS2DObject
s.