I am trying to use threejs's CSS3DRenderer to display text in my 3D view. However, I am facing issues with controlling the font size. Despite setting font-size: 1px in CSS, the text remains large. I also attempted to adjust the scale of the css3dobject, but I am unsure how to calculate the scale ratio. Any help would be appreciated!
If you would like to take a look at my code, you can find it here: https://codepen.io/hungtcs/pen/xxbZOQV
import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer';
import { Scene, PerspectiveCamera, Mesh, PlaneGeometry, MeshPhongMaterial, Color, DoubleSide, NoBlending, WebGLRenderer, MeshBasicMaterial, GridHelper } from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
export class CSS3DDemo {
private scene: Scene;
private camera: PerspectiveCamera;
private css3DRenderer: CSS3DRenderer;
private webGLRenderer: WebGLRenderer;
private controls: OrbitControls;
constructor() {
// Code for initializing and rendering the scene goes here
}
private render() {
// Code for rendering the scene continuously goes here
}
}