Chapter 246: CSS2DRenderer

Core Idea

This renderer is a simplified version of CSS3DRenderer. The only transformation that is supported is translation.

The renderer is very useful if you want to combine HTML based labels with 3D objects. Here too, the respective DOM elements are wrapped into an instance of CSS2DObject and added to the scene graph. All other types of renderable 3D objects (like meshes or point clouds) are ignored.

CSS2DRenderer only supports 100% browser and display zoom.

Key Concepts

• domElement : HTMLElement: The DOM where the renderer appends its child-elements.
• sortObjects : boolean: Controls whether the renderer assigns z-index values to CSS2DObject DOM elements. If set to true, z-index values are assigned first bas…

Code Examples

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

• What it demonstrates: Typical usage of CSS2DRenderer.

Reference Tables

Constructor

Signature
new CSS2DRenderer( parameters : CSS2DRenderer~Parameters )

Properties

Property	Description
.domElement : HTMLElement	The DOM where the renderer appends its child-elements.
.sortObjects : boolean	Controls whether the renderer assigns z-index values to CSS2DObject DOM elements. If set to true, z-index values are assigned first based on the renderOrder and secondly - the distance to the c…

Methods

Method	Description
.getSize() : Object	Returns an object containing the width and height of the renderer.
.render( scene : Object3D, camera : Camera )	Renders the given scene using the given camera.
.setSize( width : number, height : number )	Resizes the renderer to the given width and height.

Key Takeaways

1. Most relevant properties: domElement, sortObjects.
2. Key methods: getSize, render, setSize.

Connects To

• Source: examples/jsm/renderers/CSS2DRenderer.js