How to use THREE.CSS3DRenderer in angular2

Question

I have already applied three.js in my angular2 app by npm install both @types/[email protected] and [email protected] and I import them in my service.

import * as THREE from "three";

but when i try to use CSS3DRenderer,

this.renderer = new THREE.CSS3DRenderer();

I got the error

core.umd.js:3004 EXCEPTION: THREE.CSS3DRenderer is not a constructor. It seems like css3drenderer is not in the three.js package.

I also did npm install css3drenderer. Now I have both CSS3DRenderer.js in node_modules/css3drenderer/ and three-css3drenderer.d.ts in node_modules/@types/three/

So how could I use new THREE.CSS3DRenderer() in angular2? BTW I have [email protected] with webpack. Any advise will be appreciated, Thanks!

Answer 1

Edit 2 - Example features such as OrbitControls

Extended features of Three.js such as the examples folder which shows OrbitControls, etc, are not packaged within the main build. Because of this they don't technically exist at runtime as they are not linked to Angular and not compiled into the vendor/build files.

To include these you need to add them manually to the angular.json file. e.g.

https://github.com/marcusbelcher/angular-three-js-composition/blob/master/angular.json

In this file go to project.architect.scripts array and add their node_modules path.

"scripts": [
     "./node_modules/hammerjs/hammer.min.js",
     "./node_modules/three/build/three.min.js",
     "./node_modules/three/examples/controls/OrbitControls.js"
]

Notice the difference between build and examples folder. For each extra feature add it's direct path. Also becareful about typing as the typings definition of Three might not include all of the examples thus look at Edit 1 in how to extend this locally.

---

Edit 1 - Typings

Since Angular 6 typings.d.ts is no longer created on application creation. This needs to be done inside the app typings inside of the src folder. Please see the following example if you get stuck.

https://github.com/marcusbelcher/angular-three-js-composition

Primarily these two files: https://github.com/marcusbelcher/angular-three-js-composition/blob/master/src/tsconfig.app.json

https://github.com/marcusbelcher/angular-three-js-composition/blob/master/src/typings.d.ts

Note: I have used type Any here, however this should ideally be an interface, etc.

---

This is dependant on Angular 4 CLI. Also this is a quick solution I needed for a throw away project, nothing long term...

Firstly create a project with the cli and then install Three.JS normally through npm.

If you install the @types/three bindings you should have access to the typical Three.JS objects such as the WebGLRenderer, etc, within a *component.ts. GitHub user Augle-me published the following to do the typescript bindings for a CSS3Renderer: Link

However, instead of another 3rd party, I chose the route of adding external global scripts to an Angular CLI project and explicitly declaring the types. The following are my steps in getting something basic rendering:

1. Remove the @types/three types
2. Add "declare var THREE: any;" to typings.d.ts

3. Add the node_module paths to .angular-cli.json

   "scripts": [ "../node_modules/three/build/three.min.js", "../node_modules/three/examples/js/renderers/CSS3DRenderer.js" ],

4. Add the following code to a component to create and render a CSS3 scene

   this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 5000);
   this.camera.position.set(0, 0, 0);
   this.camera.lookAt(new THREE.Vector3(0, 0, -1000));
   this.scene = new THREE.Scene();
   
   this.element = document.createElement('div');
   this.element.innerHTML = 'Plain text inside a div.';
   this.element.className = 'three-div';
   
   //CSS3D renderer
   this.renderer = new THREE.CSS3DRenderer();
   this.renderer.setSize(window.innerWidth, window.innerHeight);
   this.renderer.domElement.style.position = 'absolute';
   this.renderer.domElement.style.top = 0;
   //css3SandbboxEl is bound to a div via @ViewChild('css3Sandbox')
   this.css3SandboxEl.nativeElement.appendChild(this.renderer.domElement);
   
   this.element3d = new THREE.CSS3DObject(this.element);
   this.element3d.position.x = 50;
   this.element3d.position.y = 50;
   this.element3d.position.z = -1000;
   this.scene.add(this.element3d);
   this.renderer.render(this.scene, this.camera);
   

Hope this helps.

Marcus