CSS2DObject is not defined

Questions
1

Hello,

I have searched the forums but not found an answer to this. I am getting the error
Uncaught ReferenceError: CSS2DObject is not defined

I have CSS2DRenderer.js in my script tags at the start. When I try to import it directly as an import statement, it doesn’t work as I am building this in an embedded script tag within the HTML.

I tried to make a codepen but it says the files are too large.

Anyone encountered this or have an idea why it is happening?

2

If you import this file (/js) - import using <script> and both the renderer and CSS2DObject will be appended to the global THREE scope.

If you’re importing using ES modules import - use this file (/jsm) and import both the renderer and the CSS2DObject from the module scope.

Ex:

import { CSS2DRenderer, CSS2DObject } from '//cdn.rawgit.com/mrdoob/three.js/master/examples/jsm/renderers/CSS2DRenderer.js';

console.info({ CSS2DRenderer, CSS2DObject });
1 Like
3

Hello,

So If I do it the first way, I just need to do:

var earthLabel = new THREE.CSS2DObject ( earthDiv );

Instead of:

var earthLabel = new CSS2DObject ( earthDiv );

4

Yep, it’s defined in the first line :point_right: source.

Just be sure to use the file from js directory, not from jsm.

5

Do I need that file in addition to the normal ThreeJS file?

6

Yep, CSS2D is not a part of the core library, it’s in an external examples/ directory.

7

Great. I have done that and I am now not getting the error. Still am not getting the text to appear despite using the code like the example.

const earthDiv = document.createElement("div");
earthDiv.className = "label";
earthDiv.textContent = "Earth";
earthDiv.style.marginTop = "-1em";
var earthLabel = new THREE.CSS2DObject ( earthDiv );
earthLabel.position.set(0, 1, 0);
INTERSECTED.add(earthLabel);

I am trying to add the label when my intersect mouseover occurs.
I will keep trying but thank you for the help.