时间戳

首页 > 解决方案 > 三.js CSS3DRenderer如何控制字体大小

javascript - 三.js CSS3DRenderer如何控制字体大小

问题描述

我想使用threejsCSS3DRenderer在我的3d视图中渲染文本，但我无法控制字体大小，我尝试font-size: 1px通过css设置，但它仍然很大。我也尝试将比例设置为 css3dobject，但我不知道如何计算比例。谢谢！

这是我的代码：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();
  }

}

标签： javascriptcssthree.js

解决方案

CSS3DObjects 遵循 CSS 规则。如果要更改字体大小，只需更改以下样式即可div：

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

要记住的是，1px 是使用 CSS3DRenderer 的 3D 空间中的 1 个世界单位。所以你可能想要缩小你的 3DObjects，或者把你的相机向后移动。

推荐阅读