three.js CSS3DRenderer how to control font size

Question

I want to using threejs's CSS3DRenderer to render text in my 3d view, but I can't control the font-size, I try to set font-size: 1px via css, but it stil large. I also have try set scale to css3dobject, but I don't know how to calc the scale ratio. Thank you!

and this is my code: 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() {
    this.scene = new Scene();
    this.camera = new PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 500);
    this.webGLRenderer = new WebGLRenderer();
    this.css3DRenderer = new CSS3DRenderer();
    this.controls = new OrbitControls(this.camera, this.css3DRenderer.domElement);

    this.webGLRenderer.setSize(window.innerWidth, window.innerHeight);
    this.webGLRenderer.setClearColor(0xFFFFFF);
    this.css3DRenderer.setSize(window.innerWidth, window.innerHeight);
    this.css3DRenderer.domElement.style.position = 'absolute';
    this.css3DRenderer.domElement.style.top = '0px';
    this.css3DRenderer.domElement.style.left = '0px';

    this.camera.position.set(0, 0, 10);

    const div = window.document.createElement('div');
    div.innerHTML = `this is content`;
    div.style.width = '10px';
    div.style.height = '10px';
    // div.style.background = 'lightblue';
    const object = new CSS3DObject(div);
    object.position.set(0, 0, 0);
    this.scene.add(object);

    const planeGeometry = new PlaneGeometry(10, 10);
    const planeMesh = new Mesh(planeGeometry, new MeshBasicMaterial({ color: 0xFF0000, side: DoubleSide }));
    planeMesh.position.copy(object.position);
    this.scene.add(planeMesh);

    this.scene.add(this.camera);
    this.scene.add(new GridHelper(100, 100));
    window.document.body.appendChild(this.webGLRenderer.domElement);
    window.document.body.appendChild(this.css3DRenderer.domElement);
    this.render();
  }

  private render() {
    window.requestAnimationFrame(() => this.render());
    this.css3DRenderer.render(this.scene, this.camera);
    this.webGLRenderer.render(this.scene, this.camera);
    this.controls.update();
  }

}

Can you please explain what do you mean with "calc the scale ratio"? — Mugen87
– Mugen87, Commented Dec 9, 2019 at 10:19

M - · Accepted Answer · 2019-12-09 20:22:42Z

2

CSS3DObjects follow CSS rules. If you want to change the font size, you can simply change the style of the div:

div.style.width = '10px';
div.style.height = '10px';
div.style.fontSize = '0.5px';

The thing to keep in mind is that 1px is 1 world unit in 3D space with CSS3DRenderer. So you might want to scale down your 3DObjects, or move your camera back.

answered Dec 9, 2019 at 20:22

M -

28.7k12 gold badges56 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

鸿则_ Over a year ago

Thanks for you help, "1px is 1 world unit in 3D space" now my font size is 16px, so i set scale to 1/16, and it is work well!

Collectives™ on Stack Overflow

three.js CSS3DRenderer how to control font size

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related