# Do we need the intermediate object. (.css3dObject.)

**URL:** <https://discourse.threejs.org/t/do-we-need-the-intermediate-object-css3dobject/20313>\
**Category:** Questions\
**Tags:** css-renderer\
**Created:** [October 30, 2020, 4:46pm UTC](https://discourse.threejs.org/t/do-we-need-the-intermediate-object-css3dobject/20313 "2020-10-30T16:46:18Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [October 30, 2020, 4:46pm UTC](https://discourse.threejs.org/t/do-we-need-the-intermediate-object-css3dobject/20313/1 "2020-10-30T16:46:18Z")

</div>

Some years ago I programmed with a not so well known programming language

( _from Germany, XProfan for MS-Windows, I used it for teaching back then,_  
_see [https://de.wikipedia.org/wiki/Liste\_von\_Programmiersprachen](https://de.wikipedia.org/wiki/Liste_von_Programmiersprachen)_ )

the simulation of an absolutely minimal processor ( 8 bit data and addresses, 256 byte RAM).

Links to the project - mostly German.  
[https://hofk.de/cpusimulation/](https://hofk.de/cpusimulation/)  
[https://xprofan.net/intl/de/anwendungen/8bit-cpu-simulation/](https://xprofan.net/intl/de/anwendungen/8bit-cpu-simulation/)  
Sourcecode: [http://hofk.info/sourcecode/HC680\_assembler.xprf](http://hofk.info/sourcecode/HC680_assembler.xprf)

I now transfer the project to JavaScript and add some 3D. I will also transfer it from German to English.

I am currently creating some small test programs to see what is suitable.  
There [https://hofk.de/main/threejs/](https://hofk.de/main/threejs/) are already some available  
in the category -Test- CPU Simulation. (_Top of the page after my addons._)

I also want to mix HTML/CSS and WebGl. See MixedHtmlCssWebGl there.

I used the example [Is there a way to add gradients or stripes to a material color?](https://discourse.threejs.org/t/is-there-a-way-to-add-gradients-or-stripes-to-a-material-color/946/4) from @trusktr as a starting point and simplified it a lot.  
I added some elements.

* * *

**My question:**

Do we need the intermediate object (.css3dObject.) if we want the application to do even more complex things?

e.g. `button.css3dObject.element.style.border = '2px solid #fa5a85'`

* * *

I do not need it for my simple test program.

```
function makeHtmlCssObject( type, width, height ) {

	const element = document.createElement( type );
	obj = new THREE.CSS3DObject( element );
	element.style.width = width + 'px';
	element.style.height = height + 'px';
	return obj;

}	

```

e.g. `button.element.style.border = '1px solid #444444';`

* * *

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [October 30, 2020, 7:58pm UTC](https://discourse.threejs.org/t/do-we-need-the-intermediate-object-css3dobject/20313/2 "2020-10-30T19:58:47Z")

</div>

`CSS3DObject` is responsible for integrating CSS objects into the scene graph and thus retrieve a proper world matrix. In this way, you can add CSS objects to other 3D objects like meshes and ensures that it keeps a relative position to its parent.

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [October 30, 2020, 8:22pm UTC](https://discourse.threejs.org/t/do-we-need-the-intermediate-object-css3dobject/20313/3 "2020-10-30T20:22:26Z")

</div>

My simplified function also creates a CSS3DObject.

The more exact question then is, if you should always bind it to a THREE.Object3D like in the original function of @trusktr.

```
var css3dObject = new THREE.CSS3DObject( element );
    obj.css3dObject = css3dObject
    obj.add(css3dObject)

```

from

```
function makeElementObject(type, width, height) {
    const obj = new THREE.Object3D
    const element = document.createElement( type );
    element.style.width = width+'px';
    element.style.height = height+'px';
    element.style.opacity = 0.999;
    element.style.boxSizing = 'border-box'

    var css3dObject = new THREE.CSS3DObject( element );
    obj.css3dObject = css3dObject
    obj.add(css3dObject)

    // make an invisible plane for the DOM element to chop
    // clip a WebGL geometry with it.
    var material = new THREE.MeshPhongMaterial({
        opacity	: 0.15,
        color	: new THREE.Color( 0x111111 ),
        blending: THREE.NoBlending,
        // side	: THREE.DoubleSide,
    });
    var geometry = new THREE.BoxGeometry( width, height, 1 );
    var mesh = new THREE.Mesh( geometry, material );
    mesh.castShadow = true;
    mesh.receiveShadow = true;
    obj.lightShadowMesh = mesh
    obj.add( mesh );

    return obj
}
```

---

<div class="post-metadata">

**Author:** ![trusktr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trusktr/32/13726_2.png) [@trusktr](https://discourse.threejs.org/u/trusktr)\
**Post date:** [November 5, 2020, 4:47am UTC](https://discourse.threejs.org/t/do-we-need-the-intermediate-object-css3dobject/20313/4 "2020-11-05T04:47:06Z")

</div>

> [@hofk](#):
>
> The more exact question then is, if you should always bind it to a THREE.Object3D like in the original function of @trusktr.

The reason I did that was because in my example I create both a CSS plane (`CSS3DObject`) and a WebGL plane (`Mesh` with a thin `BoxGeometry`) in order to apply the effect of light and shadow to the CSS planes.

But in your case, if you don’t need the light and shadow effects (CSS doesn’t have that feature) then you’re fine with only the `CSS3DObject`.

Or in other words, if you want to add the shine and shadows like in my example, then you’d need the WebGL object too. Without it, you will have only CSS effects (`background`, `border`, font `color`, etc) which is similar to `MeshBasicMaterial` (having no light shading).

And the reason I put both the CSS and WebGL objects under an `Object3D` in my example was so I could transform them as if they were a single object.

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [November 5, 2020, 7:28am UTC](https://discourse.threejs.org/t/do-we-need-the-intermediate-object-css3dobject/20313/5 "2020-11-05T07:28:07Z")

</div>

Thank you for the detailed explanation. 🙂