From 962b0d665e95610e06b17c6bf0d5e2a53e5d8962 Mon Sep 17 00:00:00 2001 From: Pim de Wit Date: Mon, 4 Oct 2021 12:47:38 +0100 Subject: [PATCH 1/5] Add option to use existing DOM for CSS2DRenderer This allows for nicer usage with a plethora of frameworks. --- examples/jsm/renderers/CSS2DRenderer.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/examples/jsm/renderers/CSS2DRenderer.js b/examples/jsm/renderers/CSS2DRenderer.js index 43c46f948df672..fd316a5b696d1b 100644 --- a/examples/jsm/renderers/CSS2DRenderer.js +++ b/examples/jsm/renderers/CSS2DRenderer.js @@ -57,7 +57,7 @@ const _b = new Vector3(); class CSS2DRenderer { - constructor() { + constructor( element ) { const _this = this; @@ -68,7 +68,8 @@ class CSS2DRenderer { objects: new WeakMap() }; - const domElement = document.createElement( 'div' ); + + const domElement = element || document.createElement( 'div' ); domElement.style.overflow = 'hidden'; this.domElement = domElement; From c338d33097e3b1c3348f3a0844461c7fb32a616a Mon Sep 17 00:00:00 2001 From: Pim de Wit Date: Mon, 4 Oct 2021 14:33:51 +0100 Subject: [PATCH 2/5] Add option to use existing DOM for CSS2DRenderer & CSS3DRenderer --- docs/examples/en/renderers/CSS2DRenderer.html | 7 ++++++- docs/examples/en/renderers/CSS3DRenderer.html | 7 ++++++- examples/jsm/renderers/CSS2DRenderer.js | 9 +++++---- examples/jsm/renderers/CSS3DRenderer.js | 6 ++++-- 4 files changed, 21 insertions(+), 8 deletions(-) diff --git a/docs/examples/en/renderers/CSS2DRenderer.html b/docs/examples/en/renderers/CSS2DRenderer.html index 1cf62514e51102..ac2558c82e3c87 100644 --- a/docs/examples/en/renderers/CSS2DRenderer.html +++ b/docs/examples/en/renderers/CSS2DRenderer.html @@ -22,7 +22,12 @@

Examples

Constructor

-

[name]()

+

[name]( [param:Object parameters] )

+

+ [page:DOMElement element] - A [link:https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement HTMLElement] + where the renderer appends its child-elements. + If not passed in here, a new div element will be created. +

Methods

diff --git a/docs/examples/en/renderers/CSS3DRenderer.html b/docs/examples/en/renderers/CSS3DRenderer.html index 97a09a73da8075..4d961ec3362f83 100644 --- a/docs/examples/en/renderers/CSS3DRenderer.html +++ b/docs/examples/en/renderers/CSS3DRenderer.html @@ -33,7 +33,12 @@

Examples

Constructor

-

[name]()

+

[name]( [param:Object parameters] )

+

+ [page:DOMElement element] - A [link:https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement HTMLElement] + where the renderer appends its child-elements. + If not passed in here, a new div element will be created. +

Methods

diff --git a/examples/jsm/renderers/CSS2DRenderer.js b/examples/jsm/renderers/CSS2DRenderer.js index fd316a5b696d1b..ae6a6ed73e608b 100644 --- a/examples/jsm/renderers/CSS2DRenderer.js +++ b/examples/jsm/renderers/CSS2DRenderer.js @@ -6,7 +6,7 @@ import { class CSS2DObject extends Object3D { - constructor( element ) { + constructor( element ) { super(); @@ -57,7 +57,9 @@ const _b = new Vector3(); class CSS2DRenderer { - constructor( element ) { + constructor( parameters ) { + + parameters = parameters || {}; const _this = this; @@ -68,8 +70,7 @@ class CSS2DRenderer { objects: new WeakMap() }; - - const domElement = element || document.createElement( 'div' ); + const domElement = parameters.element !== undefined ? parameters.element : document.createElement( 'div' ); domElement.style.overflow = 'hidden'; this.domElement = domElement; diff --git a/examples/jsm/renderers/CSS3DRenderer.js b/examples/jsm/renderers/CSS3DRenderer.js index b1091fe4c1e914..adad32bd81c508 100644 --- a/examples/jsm/renderers/CSS3DRenderer.js +++ b/examples/jsm/renderers/CSS3DRenderer.js @@ -87,7 +87,9 @@ const _matrix2 = new Matrix4(); class CSS3DRenderer { - constructor() { + constructor( parameters ) { + + parameters = parameters || {}; const _this = this; @@ -99,7 +101,7 @@ 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; From ffc329086986644ad079e9749465a5d85dd4e327 Mon Sep 17 00:00:00 2001 From: Pim de Wit Date: Mon, 4 Oct 2021 15:23:46 +0100 Subject: [PATCH 3/5] chore(CSS2DRenderer/CSS3DRenderer): docs, linting --- docs/examples/en/renderers/CSS2DRenderer.html | 9 +++++++++ docs/examples/en/renderers/CSS3DRenderer.html | 9 +++++++++ examples/jsm/renderers/CSS2DRenderer.js | 1 + examples/jsm/renderers/CSS3DRenderer.js | 1 + 4 files changed, 20 insertions(+) diff --git a/docs/examples/en/renderers/CSS2DRenderer.html b/docs/examples/en/renderers/CSS2DRenderer.html index ac2558c82e3c87..ed3baf416020be 100644 --- a/docs/examples/en/renderers/CSS2DRenderer.html +++ b/docs/examples/en/renderers/CSS2DRenderer.html @@ -26,9 +26,18 @@

[name]( [param:Object parameters] )

[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.

+

Properties

+ +

[property:DOMElement domElement]

+

+ A [link:https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement HTMLElement] where the renderer appends its child-elements.
+ This is automatically created by the renderer in the constructor (if not provided already). +

+

Methods

[method:Object getSize]()

diff --git a/docs/examples/en/renderers/CSS3DRenderer.html b/docs/examples/en/renderers/CSS3DRenderer.html index 4d961ec3362f83..39d1246440cdc3 100644 --- a/docs/examples/en/renderers/CSS3DRenderer.html +++ b/docs/examples/en/renderers/CSS3DRenderer.html @@ -37,9 +37,18 @@

[name]( [param:Object parameters] )

[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.

+

Properties

+ +

[property:DOMElement domElement]

+

+ A [link:https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement HTMLElement] where the renderer appends its child-elements.
+ This is automatically created by the renderer in the constructor (if not provided already). +

+

Methods

[method:Object getSize]()

diff --git a/examples/jsm/renderers/CSS2DRenderer.js b/examples/jsm/renderers/CSS2DRenderer.js index ae6a6ed73e608b..990d8bb68975ff 100644 --- a/examples/jsm/renderers/CSS2DRenderer.js +++ b/examples/jsm/renderers/CSS2DRenderer.js @@ -71,6 +71,7 @@ class CSS2DRenderer { }; const domElement = parameters.element !== undefined ? parameters.element : document.createElement( 'div' ); + domElement.style.overflow = 'hidden'; this.domElement = domElement; diff --git a/examples/jsm/renderers/CSS3DRenderer.js b/examples/jsm/renderers/CSS3DRenderer.js index adad32bd81c508..7dccf9af90673e 100644 --- a/examples/jsm/renderers/CSS3DRenderer.js +++ b/examples/jsm/renderers/CSS3DRenderer.js @@ -102,6 +102,7 @@ class CSS3DRenderer { }; const domElement = parameters.element !== undefined ? parameters.element : document.createElement( 'div' ); + domElement.style.overflow = 'hidden'; this.domElement = domElement; From e0ec22db9a36b2954e750cf11aab0d156a013b47 Mon Sep 17 00:00:00 2001 From: Pim de Wit Date: Mon, 4 Oct 2021 17:26:28 +0100 Subject: [PATCH 4/5] feat(CSS2DObject / CSS3DObject): add default parameter values --- examples/jsm/renderers/CSS2DRenderer.js | 4 ++-- examples/jsm/renderers/CSS3DRenderer.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/examples/jsm/renderers/CSS2DRenderer.js b/examples/jsm/renderers/CSS2DRenderer.js index 990d8bb68975ff..f4731923f1e652 100644 --- a/examples/jsm/renderers/CSS2DRenderer.js +++ b/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'; diff --git a/examples/jsm/renderers/CSS3DRenderer.js b/examples/jsm/renderers/CSS3DRenderer.js index 7dccf9af90673e..f8df565ed29d62 100644 --- a/examples/jsm/renderers/CSS3DRenderer.js +++ b/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'; From e9be79ee131771fdc1a9d7e5a39621837806c320 Mon Sep 17 00:00:00 2001 From: Pim de Wit Date: Mon, 4 Oct 2021 17:40:38 +0100 Subject: [PATCH 5/5] feat(CSS2DObject / CSS3DObject): add default parameter values --- examples/jsm/renderers/CSS2DRenderer.js | 4 +--- examples/jsm/renderers/CSS3DRenderer.js | 4 +--- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/examples/jsm/renderers/CSS2DRenderer.js b/examples/jsm/renderers/CSS2DRenderer.js index f4731923f1e652..276f881610913a 100644 --- a/examples/jsm/renderers/CSS2DRenderer.js +++ b/examples/jsm/renderers/CSS2DRenderer.js @@ -57,9 +57,7 @@ const _b = new Vector3(); class CSS2DRenderer { - constructor( parameters ) { - - parameters = parameters || {}; + constructor( parameters = {} ) { const _this = this; diff --git a/examples/jsm/renderers/CSS3DRenderer.js b/examples/jsm/renderers/CSS3DRenderer.js index f8df565ed29d62..00428bba7f99a7 100644 --- a/examples/jsm/renderers/CSS3DRenderer.js +++ b/examples/jsm/renderers/CSS3DRenderer.js @@ -87,9 +87,7 @@ const _matrix2 = new Matrix4(); class CSS3DRenderer { - constructor( parameters ) { - - parameters = parameters || {}; + constructor( parameters = {} ) { const _this = this;