Threejs - Vector Project On Vector

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>

CSS

body {
  margin:0;
}

JavaScript

var objects = []; 
var scene = new THREE.Scene();

var width = window.innerWidth;
var height = window.innerHeight / 2;

var camera = new THREE.PerspectiveCamera( 35, width/height, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();

renderer.setSize( width, height );
renderer.setClearColor( 0xcccccc, 1 ); 
document.body.appendChild( renderer.domElement );
scene.add(camera);

controls = new THREE.OrbitControls(camera);
controls.screenSpacePanning = true;
setToFullOrbit(controls)
camera.position.copy(new THREE.Vector3(fti(5), fti(5), fti(5)) );
// fix first frame render issue going invisible
camera.lookAt(new THREE.Vector3(0,0,0));

var axisHelper = new THREE.AxisHelper();
scene.add(axisHelper);

var grid = new THREE.GridHelper(fti(12), 12);
scene.add(grid);

// ---- playground here
var canAnimate = false;

var playBtn = document.createElement('button');
playBtn.innerHTML = 'Play';
playBtn.addEventListener('click', () => {
  // toggle
  if(canAnimate){
  	canAnimate = false;
  } else {
  	canAnimate = true;
  }
});
document.body.appendChild(playBtn);

var vec3 = new THREE.Vector3(0,1,0);
vec3.applyAxisAngle (new THREE.Vector3(0,0,1), Math.PI / 4);
console.error(vec3);


var shapeCoords = [
	new THREE.Vector2(0,0),
  new THREE.Vector2(0,10),
  new THREE.Vector2(10,10),
  new THREE.Vector2(10,0),
]
var shape = new THREE.Shape(shapeCoords);
var shapeGeo = new THREE.ShapeGeometry(shape);
shapeGeo.applyMatrix(new THREE.Matrix4().makeTranslation(-5,0,0));
var shapeMesh = new THREE.Mesh(shapeGeo, new THREE.MeshBasicMaterial({side: THREE.DoubleSide}));
scene.add(shapeMesh);
shapeMesh.scale.set(3,1,1);
shapeMesh.rotateY(THREE.Math.degToRad(65));

var v1 = new THREE.Vector3();
var s = createSphere();

var v2 = new THREE.Vector3(12,0,-12);
var s2 = createSphere(false, 0xff0000);
s2.position.copy(v2);

var v3 = new THREE.Vector3(24,0,10);
var s3 = createSphere();
s3.position.copy(v3);

// intersection
var s4 = createSphere();
var goForward = true;
var frame = 0;

var...