Threejs - Positional Tweening

by black strings

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.4.2/Tween.min.js"></script>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<p>
This example relies on the library EaselJS - TweenJS - https://www.createjs.com/tweenjs
</p>

CSS

/* fix mouse click offset errors when doing drags */
body {
  margin: 0;
}

JavaScript

// a container to hold our animation configuration for animating vector3 values
class TweenVecOpt {
	constructor(toVector, duration, vecOption, offset, easingOption){
  	if(!toVector) {
    	throw new Error('<< TweenVecOpt >> failed to create, toVector is null');
    }
  	this.toVector = toVector;
    this.duration = duration ? duration : 1000;
    this.easingOption = easingOption ? easingOption : createjs.Ease.quintOut;
    // typescript is done this way
    //TWEEN.Easing.Quntic.Out
  }
}

class Main {
	constructor(){
    this.objects = []; 
    this.scene = new THREE.Scene();
    
    var width = window.innerWidth;
    var height = window.innerHeight * .75;
    this.camera = new THREE.PerspectiveCamera( 
    	35, width/height, 0.1, 2000 
    );
    
    this.renderer = new THREE.WebGLRenderer();
    
    
    this.renderer.setSize( width, height );
    this.renderer.setClearColor( 0xcccccc, 1 ); 
    
    // controls should set 2nd param or mouse move will be all over the main dom element
    // null on 2nd param, threejs will use the parent as the mouse click and prevent default
    this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
    
    // will turn off zooming while panning with right mouse click, false by default
    this.controls.screenSpacePanning = true;
    
    document.body.appendChild( this.renderer.domElement );
    this.scene.add(this.camera);

    
    this.setToFullOrbit(this.controls);
    this.camera.position.copy(new THREE.Vector3(10,10,10));
    // fix first frame render issue going invisible
    this.camera.lookAt(new THREE.Vector3(0,0,0));

    var axisHelper = new THREE.AxisHelper();
    this.scene.add(axisHelper);
    
    //lights
    this.sun = new THREE.DirectionalLight();
    this.scene.add(this.sun);
    
    this.grid = new THREE.GridHelper(24, 24);
		this.scene.add(this.grid);

		// to toggle between positon A and B
		this.goToPositionA = false;
    
		// a basic cube so we can animate...