How to use Three JS with Angular 7

First install three.js using npm

npm i three

Then in component import it like bellow

import * as THREE from 'three';

Now you could use it from your component like bellow code. Note: This is only for example

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

var animate = function () {
  requestAnimationFrame( animate );

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render( scene, camera );
};

animate();

in package.json file update the typescript to latest version (3.7.2)

"devDependencies": {
    ...
    "typescript": "3.7.2"
  }

Since you are using Angular 7 in tsconfig.json file disable the TypeScript version Check. If you are using the latest Angular version no need to do this one.

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
   "angularCompilerOptions": {
    "disableTypeScriptVersionCheck": true,
  }
 }

Working DEMO is here


If it's not necessary to include, threejs in angular component. You can include threejs script in index.html below Code Demo is here ThreeJS Angular Demo

    <body>
      <app-root></app-root>
      <script src="https://threejs.org/build/three.js"></script>
      <script>
         <!--  Your threejs script that creates and animates the scene --->
         <!--  Note: skip the import threejs module import statement --->

        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera( 75, 
        window.innerWidth/window.innerHeight, 0.1, 1000 );

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );

        var geometry = new THREE.BoxGeometry( 1, 1, 1 );
        var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
        var cube = new THREE.Mesh( geometry, material );
        scene.add( cube );

         camera.position.z = 5;

         var animate = function () {
         requestAnimationFrame( animate );

         cube.rotation.x += 0.01;
         cube.rotation.y += 0.01;

         renderer.render( scene, camera );
       };

       animate();

      </script>
    
    </body>

Tags:

Javascript

Three.Js

Angular

Recent Posts