Attempted import error: 'CSS3DObject/CSS3DRenderer' is not exported from 'three' (imported as 'THREE').

[5ervant]

I'm coding with React and Three.js, trying to embed a URL but the following code gives me an Attempted import error: 'CSS3DObject/CSS3DRenderer' is not exported from 'three' (imported as 'THREE'):

import * as THREE from 'three';
import 'three/examples/js/renderers/CSS3DRenderer';
// ...

// create a CSS3DObject to display element
const cssObject = new THREE.CSS3DObject(element);
// synchronize cssObject position/rotation with object position/rotation
cssObject.position = object.position;
cssObject.rotation = object.rotation;
// resize cssObject to same size as object (plus a border)
const percentBorder = 0.05;
cssObject.scale.x /= (1 + percentBorder) * (elementWidth / planeWidth);
cssObject.scale.y /= (1 + percentBorder) * (elementWidth / planeWidth);
// ...

const rendererCSS = new THREE.CSS3DRenderer();

I even tried import 'three/examples/js/renderers/CSS3DRenderer'; and some other random stuffs. It seems that Three.js is not yet ready to be used as a 'node_module'?

'three/examples/jsm/renderers/CSS3DRenderer' and three/examples/jsm/objects/CSS3DObject doesn't even existing yet? And I'm glad that { OBJLoader } can be imported from 'three/examples/jsm/loaders/OBJLoader'.

How can I embed a URL using Three.js in React if the needed constructors couldn't be imported? Is there an official CSS3DObject and CSS3DRenderer modules for it, or any other alternative?

[Mugen87]

As mentioned at stackoverflow, CSS3DRenderer and CSS3DObject are no part of the core. Like most other code in the examples, they are also no modules so you can't just import them in your app. However, more and more classes are converted to modules (see jsm folder). So over the time, CSS3DRenderer and CSS3DObject will be available there.

For now, you have to convert them to modules by yourself or you use an npm package like three-css3drenderer. Be aware that these package are often not maintained so using them with the latest three.js version can lead to conflicts.

Related issue: #9562