[THREE] 请问CSS3DRenderer怎么控制字体的大小
我在使用CSS3DRenderer
渲染的时候DIV中的文字变的非常大,请问怎么控制DIV中的文字大小。
全部代码:
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();
}
}
CodePen: https://codepen.io/hungtcs/pen/xxbZOQV
谢谢!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
浏览器会限制最小字体大小,比如Chrome为8px,所以设置非常小的font-size没有效果。
CSS3DRenderer中,一个px相当于一个3D世界单位,假如字体大小为16px,可以将缩放设置为
1/16
试了一下,this.css3DRenderer.domElement.style.fontSize = '20px';这样可以设置大小,但是fontsize小到一定程度之后就没什么效果了,这个时候可以试试object.scale.set(0.5, 0.5, 0.5);