Can I use the js/examples within a Typescript/Ionic Project?

Ionic Framework ionic-v3
1

I am trying to use it on ionic3 Framework(Typescript).

I import threejs by

import * as THREE from ‘three’;
But when I try to use

this.effect = new THREE.StereoEffect(this.renderer);
The debug says: StereoEffect is not a constructor

How can I use this examples on threejs typescript library?

2

Post a link to the documentation please. The critical part is how to use the library with NodeJS, and whether there are defined types for the library.

3

https://threejs.org/docs/index.html#manual/introduction/Import-via-modules

The problem is the library is pure javascript and in your examples do this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Cardboard Example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
      body {
        margin: 0px;
        overflow: hidden;
      }
      #example {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }
    </style>
    <script src="js/third-party/threejs/StereoEffect.js"></script>
  </head>
  <body>
    <div id="example"></div>

  <script src="js/third-party/threejs/three.js"></script>
  <script src="js/third-party/threejs/StereoEffect.js"></script>
  <script src="js/third-party/threejs/DeviceOrientationControls.js"></script>
  <script src="js/third-party/threejs/OrbitControls.js"></script>

  <script>

They import the examples via script src but if install library via npm on typescript I don’t know how to import this examples.

This examples are on node_modules/threjs…

4

Use the ES6 syntax. Post the error if you get one.

5

How would be an import of this libraries with ES6?

I use import * as THREE from ‘three’; to import the main library into a page and works fine but some extras like StereoEffect are only available on examples folder for example StereoEffect has this code

/**
 * @author alteredq / http://alteredqualia.com/
 * @authod mrdoob / http://mrdoob.com/
 * @authod arodic / http://aleksandarrodic.com/
 * @authod fonserbc / http://fonserbc.github.io/
*/

THREE.StereoEffect = function ( renderer ) {

	var _stereo = new THREE.StereoCamera();
	_stereo.aspect = 0.5;

	this.setEyeSeparation = function ( eyeSep ) {

		_stereo.eyeSep = eyeSep;

	};

	this.setSize = function ( width, height ) {

		renderer.setSize( width, height );

	};

	this.render = function ( scene, camera ) {

		scene.updateMatrixWorld();

		if ( camera.parent === null ) camera.updateMatrixWorld();

		_stereo.update( camera );

		var size = renderer.getSize();

		if ( renderer.autoClear ) renderer.clear();
		renderer.setScissorTest( true );

		renderer.setScissor( 0, 0, size.width / 2, size.height );
		renderer.setViewport( 0, 0, size.width / 2, size.height );
		renderer.render( scene, _stereo.cameraL );

		renderer.setScissor( size.width / 2, 0, size.width / 2, size.height );
		renderer.setViewport( size.width / 2, 0, size.width / 2, size.height );
		renderer.render( scene, _stereo.cameraR );

		renderer.setScissorTest( false );

	};

};

But when i try to use THREE.StereoEffect() it not works

6

Looks unsolvable. This isn’t an Ionic problem. It’s a threejs namespace issue discussed in the link at the bottom of the page.