Can't use CanvasRenderer or Projector when I'm using Three from npm

[marcofugaro]

Description of the problem

Here is a reproducible example, I have in my js file just the THREE import and after that the CanvasRenderer code as taken from here:

import * as THREE from 'three';
import './CanvasRenderer'; // or Projector

The error in the console is

Uncaught TypeError: Cannot set property d of #<Object> which has only a getter.

which happens when you assign the function on this line

THREE.CanvasRenderer = function ( parameters ) {

Basically says that THREE.CanvasRenderer already exists and is not configurable, and indeed it does exist as a deprecation warning in Three.Legacy.js.

The same happens for Projector. As a bundler I use Webpack@2.2.0.

Sorry I wouldn't know what to export instead of that function in order to bypass this error.

Three.js version

• r84

[mrdoob]

Hmm, yeah... we still don't know how to modularise the stuff in the examples folder without breaking traditional workflows...

[marcofugaro]

What do you mean modularise stuff? Do you need any help?

[cecilemuller]

@marcofugaro This thread might provide some context about the modules in examples issue: https://github.com/mrdoob/three.js/issues/9562

Basically, js from the examples folder aren't ES Modules, so they can't be be used with the "import" keyword yet.

[marcofugaro]

Oh, the other day I did this library because I needed some Three.js addons in my workflow, maybe could be of any help.

Of course the only issue is with the two deprecation notice functions, as this issue reports.

[cecilemuller]

In the case of CanvasRenderer, the issue here is the conflict with the export from Three.Legacy.js: should CanvasRenderer be part of the core or only be in examples ?

---

But as for modularising examples in general: as long as we only have one file per example, it won't be usable both as simple Githubissues.

Githubissues is a development platform for aggregating issues.