Why am I getting the error "'CSS3DObject' is not exported from 'three'"?

Question

I wanted to implement the code from this video: https://www.youtube.com/watch?v=nPEYdw2Ssa8 (you can download it from here https://codepen.io/i2801/pen/waQPQj) but using React. I had no luck and got error:

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

Of course I have installed all the dependencies i tried to import

So here is My code

import React, { Component } from 'react';
import * as THREE from 'three';
import OrbitControls from 'three-orbitcontrols';
import Tween from 'three-tween';
import TrackballControls from 'three-trackballcontrols';
import CSS3DRenderer from 'three-css3drenderer';
export default class Scene extends Component {

  componentWillMount() {
    window.addEventListener('resize', this.handleWindowResize)
  }

  componentDidMount() {
    this.setupScene();
    this.THREE = THREE;
  }

  setupScene = () => {
    this.THREE = THREE;
    let objects = [];
    let targets = { table: [], sphere: [], helix: [], grid: [] };
    let table = [
      "H", "Hydrogen", "1.00794", 1, 1,
      //Deleted most of the stuff to save space
      "Uuo", "Ununoctium", "(294)", 18, 7
    ];

    this.width = this.container.clientWidth;
    this.height = this.container.clientHeight;

    const renderer = new THREE.CSS3DRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.domElement.style.position = 'absolute';
    document.getElementById('container').appendChild(renderer.domElement);

    let scene = new THREE.Scene();

    const camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 3000;
    scene.add(camera);

    this.renderer = renderer;
    this.scene = scene;
    this.camera = camera;
    this.objects = objects;
    this.targets = targets;

    for (var i = 0; i < table.length; i += 5) {

      var element = document.createElement('div');
      element.className = 'element';
      element.style.backgroundColor = 'rgba(0,127,127,' + (Math.random() * 0.5 + 0.25) + ')';

      var number = document.createElement('div');
      number.className = 'number';
      number.textContent = (i / 5) + 1;
      element.appendChild(number);

      var symbol = document.createElement('div');
      symbol.className = 'symbol';
      symbol.textContent = table[i];
      element.appendChild(symbol);

      var details = document.createElement('div');
      details.className = 'details';
      details.innerHTML = table[i + 1] + '<br>' + table[i + 2];
      element.appendChild(details);
      var object = new THREE.CSS3DObject(element);
      object.position.x = Math.random() * 4000 - 2000;
      object.position.y = Math.random() * 4000 - 2000;
      object.position.z = Math.random() * 4000 - 2000;
      scene.add(object);

      objects.push(object);

      var object = new THREE.Object3D();
      object.position.x = (table[i + 3] * 140) - 1260;
      object.position.y = - (table[i + 4] * 180) + 990;

      targets.table.push(object);
    }
    for (var i = 0; i < objects.length; i++) {

      var object = new THREE.Object3D();

      object.position.x = ((i % 5) * 400) - 800;
      object.position.y = (- (Math.floor(i / 5) % 5) * 400) + 800;
      object.position.z = (Math.floor(i / 25)) * 1000 - 2000;

      targets.grid.push(object);

    }

    //

    this.renderer = new THREE.CSS3DRenderer();
    this.renderer.setSize(window.innerWidth, window.innerHeight);
    this.renderer.domElement.style.position = 'absolute';
    document.getElementById('container').appendChild(renderer.domElement);

    //

    this.controls = new THREE.TrackballControls(camera, renderer.domElement);
    this.controls.rotateSpeed = 0.5;
    this.controls.minDistance = 500;
    this.controls.maxDistance = 6000;
    this.controls.addEventListener('change', this.renderScene);

    var button = document.getElementById('table');
    button.addEventListener('click', event => {

      this.transform(targets.table, 2000);

    }, false);

    // var button = document.getElementById('sphere');
    // button.addEventListener('click', event => {

    //   transform(targets.sphere, 2000);

    // }, false);

    // var button = document.getElementById('helix');
    // button.addEventListener('click', event => {

    //   transform(targets.helix, 2000);

    // }, false);

    // var button = document.getElementById('grid');
    // button.addEventListener('click', event => {

    //   transform(targets.grid, 2000);

    // }, false);

    this.transform(targets.table, 2000);

    //

    this.start();
  }
  transform = (targets, duration) => {

    TWEEN.removeAll();

    for (var i = 0; i < objects.length; i++) {

      var object = this.objects[i];
      var target = this.targets[i];

      new TWEEN.Tween(object.position)
        .to({ x: target.position.x, y: target.position.y, z: target.position.z }, Math.random() * duration + duration)
        .easing(TWEEN.Easing.Exponential.InOut)
        .start();

      new TWEEN.Tween(object.rotation)
        .to({ x: target.rotation.x, y: target.rotation.y, z: target.rotation.z }, Math.random() * duration + duration)
        .easing(TWEEN.Easing.Exponential.InOut)
        .start();

    }

    new TWEEN.Tween(this)
      .to({}, duration * 2)
      .onUpdate(this.renderScene)
      .start();

  }

  start = () => {
    if (!this.frameId) {
      this.frameId = requestAnimationFrame(this.animate)
    }
  }

  renderScene = () => {
    this.renderer.render(this.scene, this.camera)
  }

  animate = () => {
    this.frameId = requestAnimationFrame(this.animate);
    this.renderScene();
    TWEEN.update();
    this.controls.update();
  }

  stop = () => {
    cancelAnimationFrame(this.frameId);
  }

  handleWindowResize = () => {
    this.camera.aspect = window.innerWidth / window.innerHeight;
    this.camera.updateProjectionMatrix();

    this.renderer.setSize(window.innerWidth, window.innerHeight);

    this.renderScene();
  }

  componentWillUnmount = () => {
    this.stop();
    this.destroyContext();
  }

  destroyContext = () => {
    this.container.removeChild(this.renderer.domElement);
    this.renderer.forceContextLoss();
    this.renderer.context = null;
    this.renderer.domElement = null;
    this.renderer = null;
  }


  render() {
    const width = '100%';
    const height = '100%';
    return (
      <div
        ref={(container) => { this.container = container }}
        style={{ width: width, height: height, position: 'absolute', overflow: 'hidden' }}
      >
      </div>
    )
  }

}

Thanks in advance, Stack is complaining about my post being mostly code so here is some dummy text to bypass it: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales volutpat ligula, sed iaculis metus consectetur eget. Sed vulputate tellus vel velit consequat scelerisque. Vestibulum sodales massa risus, ac

The error message suggests that this line const renderer = new THREE.CSS3DRenderer(); is causing a problem since CSS3DRenderer in not inside THREE. github.com/mrdoob/three.js/issues/7309 — Owen Delahoy
– Owen Delahoy, Commented Mar 17, 2019 at 15:32

Mugen87 · Accepted Answer · 2019-03-18 19:35:13Z

4

THREE.CSS3DObject is not part of the three.js core. But you should be able to import it from the npm module three-css3drenderer. Try this:

import { CSS3DObject } from 'three-css3drenderer';

Also ensure to create you renderer like so (notice the missing THREE namespace):

this.renderer = new CSS3DRenderer();

edited Mar 18, 2019 at 19:35

answered Mar 17, 2019 at 15:01

Mugen87

31.2k4 gold badges34 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user11114318 Over a year ago

I did what you said and now i have this error TypeError: three_css3drenderer__WEBPACK_IMPORTED_MODULE_11___default.a is not a constructor

Mugen87 Over a year ago

Can you try the import like so: import { CSS3DObject } from 'three-css3drenderer';. Same for CSS3DRenderer.

user11114318 · Accepted Answer · 2019-03-18 19:43:40Z

With help of Mugen87 i have got every thing set up and working ! If you would like to try this on your own here is the code you need :

import React, { Component } from 'react';
import * as THREE from 'three';
import OrbitControls from 'three-orbitcontrols/OrbitControls';
import TWEEN from 'three-tween';
import TrackballControls from 'three-trackballcontrols';
import { CSS3DRenderer } from 'three-css3drenderer';
import { CSS3DObject } from 'three-css3drenderer';

export default class Scene extends Component {

  componentWillMount() {
    window.addEventListener('resize', this.handleWindowResize)
  }

  componentDidMount() {
    this.setupScene();
    this.THREE = THREE;
  }

  setupScene = () => {
    this.THREE = THREE;
    this.objects = [];
    this.targets = { table: [], sphere: [], helix: [], grid: [] };
    this.table = [
      "H", "Hydrogen", "1.00794", 1, 1,
      //Deleted most of the stuff to save up space
      "Uuo", "Ununoctium", "(294)", 18, 7
    ];

    this.width = this.container.clientWidth;
    this.height = this.container.clientHeight;

    this.renderer = new CSS3DRenderer();
    this.renderer.setSize(window.innerWidth, window.innerHeight);
    this.renderer.domElement.style.position = 'absolute';
    document.getElementById('container').appendChild(this.renderer.domElement);

    this.scene = new THREE.Scene();

    this.camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
    this.camera.position.z = 3000;
    this.scene.add(this.camera);




    for (var i = 0; i < this.table.length; i += 5) {

      var element = document.createElement('div');
      element.className = 'element';
      element.style.backgroundColor = 'rgba(0,127,127,' + (Math.random() * 0.5 + 0.25) + ')';

      var number = document.createElement('div');
      number.className = 'number';
      number.textContent = (i / 5) + 1;
      element.appendChild(number);

      var symbol = document.createElement('div');
      symbol.className = 'symbol';
      symbol.textContent = this.table[i];
      element.appendChild(symbol);

      var details = document.createElement('div');
      details.className = 'details';
      details.innerHTML = this.table[i + 1] + '<br>' + this.table[i + 2];
      element.appendChild(details);
      var object = new CSS3DObject(element);
      object.position.x = Math.random() * 4000 - 2000;
      object.position.y = Math.random() * 4000 - 2000;
      object.position.z = Math.random() * 4000 - 2000;
      this.scene.add(object);

      this.objects.push(object);

      var object = new THREE.Object3D();
      object.position.x = (this.table[i + 3] * 140) - 1260;
      object.position.y = - (this.table[i + 4] * 180) + 990;

      this.targets.table.push(object);
    }
    for (var i = 0; i < this.objects.length; i++) {

      var object = new THREE.Object3D();

      object.position.x = ((i % 5) * 400) - 800;
      object.position.y = (- (Math.floor(i / 5) % 5) * 400) + 800;
      object.position.z = (Math.floor(i / 25)) * 1000 - 2000;

      this.targets.grid.push(object);

    }


    this.controls = new TrackballControls(this.camera, this.renderer.domElement);
    this.controls.rotateSpeed = 0.5;
    this.controls.minDistance = 500;
    this.controls.maxDistance = 6000;
    this.controls.addEventListener('change', this.renderScene);

    // var button = document.getElementById('table');
    // button.addEventListener('click', event => {

    //   this.transform(this.targets.table, 2000);

    // }, false);

    // var button = document.getElementById('sphere');
    // button.addEventListener('click', event => {

    //   transform(targets.sphere, 2000);

    // }, false);

    // var button = document.getElementById('helix');
    // button.addEventListener('click', event => {

    //   transform(targets.helix, 2000);

    // }, false);

    // var button = document.getElementById('grid');
    // button.addEventListener('click', event => {

    //   transform(targets.grid, 2000);

    // }, false);

    this.transform(this.targets.table, 2000);

    //

    this.start();
  }
  transform = (targets, duration) => {

    TWEEN.removeAll();

    for (var i = 0; i < this.objects.length; i++) {

      var object = this.objects[i];
      var target = targets[i];

      new TWEEN.Tween(object.position)
        .to({ x: target.position.x, y: target.position.y, z: target.position.z }, Math.random() * duration + duration)
        .easing(TWEEN.Easing.Exponential.InOut)
        .start();

      new TWEEN.Tween(object.rotation)
        .to({ x: target.rotation.x, y: target.rotation.y, z: target.rotation.z }, Math.random() * duration + duration)
        .easing(TWEEN.Easing.Exponential.InOut)
        .start();

    }

    new TWEEN.Tween(this)
      .to({}, duration * 2)
      .onUpdate(this.renderScene)
      .start();

  }

  start = () => {
    if (!this.frameId) {
      this.frameId = requestAnimationFrame(this.animate)
    }
  }

  renderScene = () => {
    this.renderer.render(this.scene, this.camera)
  }

  animate = () => {
    this.frameId = requestAnimationFrame(this.animate);
    this.renderScene();
    TWEEN.update();
    this.controls.update();
  }

  stop = () => {
    cancelAnimationFrame(this.frameId);
  }

  handleWindowResize = () => {
    this.camera.aspect = window.innerWidth / window.innerHeight;
    this.camera.updateProjectionMatrix();

    this.renderer.setSize(window.innerWidth, window.innerHeight);

    this.renderScene();
  }

  componentWillUnmount = () => {
    this.stop();
    this.destroyContext();
  }

  destroyContext = () => {
    this.container.removeChild(this.renderer.domElement);
    this.renderer.forceContextLoss();
    this.renderer.context = null;
    this.renderer.domElement = null;
    this.renderer = null;
  }


  render() {
    const width = '100%';
    const height = '100%';
    return (
      <React.Fragment>
        <div
          ref={(container) => { this.container = container }}
          style={{ width: width, height: height, position: 'absolute', overflow: 'hidden' }}
        >
        </div>
        <div id="container"></div>
      </React.Fragment>
    )
  }

}

Why this view-source:stemkoski.github.io/Three.js/CSS3D.html has two instances of new THREE.Scene(), one for scene and one for cssScene?

Collectives™ on Stack Overflow

Why am I getting the error "'CSS3DObject' is not exported from 'three'"?

2 Answers 2

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Related