Chapter 533: CSS2DObject

Core Idea

The only type of 3D object that is supported by CSS2DRenderer.

Key Concepts

• center : Vector2: The 3D objects center point. ( 0, 0 ) is the lower left, ( 1, 1 ) is the top right.
• element : HTMLElement (readonly): The DOM element which defines the appearance of this 3D object.
• isCSS2DObject : boolean (readonly): This flag can be used for type testing.

Code Examples

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

• What it demonstrates: Typical usage of CSS2DObject.

Reference Tables

Constructor

Signature
new CSS2DObject( element : HTMLElement )

Properties

Property	Description
.center : Vector2	The 3D objects center point. ( 0, 0 ) is the lower left, ( 1, 1 ) is the top right.
.element : HTMLElement (readonly)	The DOM element which defines the appearance of this 3D object.
.isCSS2DObject : boolean (readonly)	This flag can be used for type testing.

Key Takeaways

1. CSS2DObject extends: EventDispatcher → Object3D
2. Most relevant properties: center, element, isCSS2DObject.

Connects To

• EventDispatcher: parent class
• Object3D: parent class
• Source: examples/jsm/renderers/CSS2DRenderer.js