_projector.projectScene is not a function: How to Get Projector.js + SVGRenderer.js loaded together?

Questions
1

I’m using three.js r95 in a WebPack project and I’ve successfully navigated using RequirePlugin to load THREE into the global name space, and I seem to be able to make calls like new THREE.Scene() just fine, and all is well in a very general case.

I have a need to use the SVGRenderer. I can import this just fine where it’s used…

import '../node_modules/three/examples/js/renderers/SVGRenderer.js';

…and the call I make to instantiate one works okay, and I can call things like setClearColor() on it without trouble…

this.renderer = new THREE.SVGRenderer();
this.renderer.setClearColor(0xFFFFFF);

…but when I actually render anything…

this.renderer.render(this.scene, this.camera);

I get an error “_projector.projectScene is not a function” at this line in SVGRenderer.js…

_renderData = _projector.projectScene( scene, camera, this.sortObjects, this.sortElements );

I understand Projector.js contains code that has been refactored out of things like SVGRenderer and CanvasRenderer, but I can’t for the life of me figure out how to import or otherwise incorporate this in a way that gets it to connect to SVGRenderer appropriately. I’ve tried import statements both before and after the import of SVGRenderer.js, and I’ve even gone as far as copying/pasting the Projector.js source at the top/bottom of SVGRenderer.js, but I still get this same error. It makes me think it’s not enough to import the file, that I need to somehow execute something in there to get it to patch the prototype in SVGRenderer or something.

I’m completely lost and so close on getting this running. Any advice would be appreciated.

2

import ‘…/node_modules/three/examples/js/renderers/SVGRenderer.js’;

SVGRenderer is not a module. Same for Projector. So it’s not possible to directly use them in an import statement. I think this might be the source of your problem.

3

Is there a different way I can load it? And I think I need to load Projector.js as well?

It seems like I’m getting SVGRenderer.js imported/loaded okay, it just seems as though the way it’s extending or attaching to Projector.js is somehow screwed up.

4

Also, is there some ordering dependency for Projector.js and SVGRenderer.js? Do I have to include one before the other?

5

No, that does not matter in this case. You can easily verify this by yourself: Just change the order of the imports and you will see that the following live example still works:

I suggest you manually turn SVGRenderer and Projector into modules and the load them via import.

6

Thanks Michael… I wound up just knocking a custom version of three.modules.js and replaced the stub Projector definition with the one from Projector.js and added SVGRender.js at the end. That seems to have gotten everything happy (finally.)

I realize that it’s a bit of a brittle solution, but it’ll hopefully keep me running until there’s a three.js version with proper module support for the extensions in the example directory…

Appreciate the help!

1 Like