CSS 2D渲染器（[name]）

[name]是[page:CSS3DRenderer]（CSS 3D渲染器）的简化版本，唯一支持的变换是位移。

如果你希望将三维物体和基于HTML的标签相结合，则这一渲染器将十分有用。在这里，各个DOM元素也被包含到一个*CSS2DObject*实例中，并被添加到场景图中。

`[name]` 仅支持100%的浏览器缩放和显示缩放。

导入

[name] 是一个附加组件，必须显式导入。 See [link:#manual/introduction/Installation Installation / Addons].


			import { CSS2DRenderer } from 'three/addons/renderers/CSS2DRenderer.js';

例子

[example:css2d_label]
[example:webgl_loader_pdb molecules]

构造函数

[name]( [param:DOMElement element] )

[page:DOMElement element] - 一个承载子元素的 [link:https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement HTMLElement]。这对应于下面的 [page:CSS2DRenderer.domElement domElement] 属性。如果未在此处传递，则会创建一个新的 div 元素。

Properties

[property:DOMElement domElement]

渲染器承载其子元素的 [link:https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement HTMLElement]。这是由渲染器在构造函数中自动创建的（如果尚未提供）。

方法

[method:Object getSize]()

返回一个包含有渲染器宽和高的对象。

[method:undefined render]( [param:Scene scene], [param:Camera camera] )

使用[page:Camera camera]渲染[page:Scene scene]。

[method:undefined setSize]([param:Number width], [param:Number height])

将渲染器的尺寸调整为(width, height).

源代码

[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/renderers/CSS2DRenderer.js examples/jsm/renderers/CSS2DRenderer.js]