CSS2DRenderer / CSS3DRenderer: allow usage of existing DOM element (#22635)

* Add option to use existing DOM for CSS2DRenderer

This allows for nicer usage with a plethora of frameworks.

* Add option to use existing DOM for CSS2DRenderer & CSS3DRenderer

* chore(CSS2DRenderer/CSS3DRenderer): docs, linting

* feat(CSS2DObject / CSS3DObject): add default parameter values

* feat(CSS2DObject / CSS3DObject): add default parameter values

docs/examples/en/renderers/CSS2DRenderer.html

@@ -22,7 +22,21 @@
 
 		<h2>Constructor</h2>
 
-		<h3>[name]()</h3>
+		<h3>[name]( [param:Object parameters] )</h3>
+		<p>
+		[page:DOMElement element] - A [link:https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement HTMLElement]
+		where the renderer appends its child-elements.
+		This corresponds to the [page:CSS2DRenderer.domElement domElement] property below.
+		If not passed in here, a new div element will be created.
+		</p>
+
+		<h2>Properties</h2>
+
+		<h3>[property:DOMElement domElement]</h3>
+		<p>
+			A [link:https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement HTMLElement] where the renderer appends its child-elements.<br />
+			This is automatically created by the renderer in the constructor (if not provided already).
+		</p>
 
 		<h2>Methods</h2>
 

docs/examples/en/renderers/CSS3DRenderer.html

@@ -33,7 +33,21 @@
 
 		<h2>Constructor</h2>
 
-		<h3>[name]()</h3>
+		<h3>[name]( [param:Object parameters] )</h3>
+		<p>
+			[page:DOMElement element] - A [link:https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement HTMLElement]
+			where the renderer appends its child-elements.
+			This corresponds to the [page:CSS3DRenderer.domElement domElement] property below.
+			If not passed in here, a new div element will be created.
+		</p>
+
+		<h2>Properties</h2>
+
+		<h3>[property:DOMElement domElement]</h3>
+		<p>
+			A [link:https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement HTMLElement] where the renderer appends its child-elements.<br />
+			This is automatically created by the renderer in the constructor (if not provided already).
+		</p>
 
 		<h2>Methods</h2>
 

examples/jsm/renderers/CSS2DRenderer.js

@@ -6,11 +6,11 @@ import {
 
 class CSS2DObject extends Object3D {
 
- 	constructor( element ) {
+	constructor( element = document.createElement( 'div' ) ) {
 
 		super();
 
-		this.element = element || document.createElement( 'div' );
+		this.element = element;
 
 		this.element.style.position = 'absolute';
 		this.element.style.userSelect = 'none';
@@ -57,7 +57,7 @@ const _b = new Vector3();
 
 class CSS2DRenderer {
 
-	constructor() {
+	constructor( parameters = {} ) {
 
 		const _this = this;
 
@@ -68,7 +68,8 @@ class CSS2DRenderer {
 			objects: new WeakMap()
 		};
 
-		const domElement = document.createElement( 'div' );
+		const domElement = parameters.element !== undefined ? parameters.element : document.createElement( 'div' );
+
 		domElement.style.overflow = 'hidden';
 
 		this.domElement = domElement;

examples/jsm/renderers/CSS3DRenderer.js

@@ -15,11 +15,11 @@ const _scale = new Vector3();
 
 class CSS3DObject extends Object3D {
 
-	constructor( element ) {
+	constructor( element = document.createElement( 'div' ) ) {
 
 		super();
 
-		this.element = element || document.createElement( 'div' );
+		this.element = element;
 		this.element.style.position = 'absolute';
 		this.element.style.pointerEvents = 'auto';
 		this.element.style.userSelect = 'none';
@@ -87,7 +87,7 @@ const _matrix2 = new Matrix4();
 
 class CSS3DRenderer {
 
-	constructor() {
+	constructor( parameters = {} ) {
 
 		const _this = this;
 
@@ -99,7 +99,8 @@ class CSS3DRenderer {
 			objects: new WeakMap()
 		};
 
-		const domElement = document.createElement( 'div' );
+		const domElement = parameters.element !== undefined ? parameters.element : document.createElement( 'div' );
+
 		domElement.style.overflow = 'hidden';
 
 		this.domElement = domElement;