Angle between quaternion

log in console

by joe chan

HTML

<div id="info">Orientation 3D
  <br>spiral curve</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>

CSS

#info {
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00
}

body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer, light, controls;
var plane;
var sign = 1, alpha = 0;
var pos1, pos2, quat1, quat2;

init();
animate();

function buildModel() {

  var materialArray = [
    new THREE.MeshBasicMaterial({ // +x
      color: 0xFFAA00,
      side: THREE.BackSide
    }),
    new THREE.MeshBasicMaterial({ // -x
      color: 0x880088,
      wireframe: true,
      visible: false
    }),
    new THREE.MeshBasicMaterial({ // +y
      color: 0x999999,
      wireframe: true,
      visible: false

    }),
    new THREE.MeshBasicMaterial({ // -Y
      color: 0x990000,
      wireframe: true,
      visible: false
    }),
    new THREE.MeshBasicMaterial({ // +z
      color: 0x009999,
      wireframe: true,
      visible: false

    }),
    new THREE.MeshBasicMaterial({ // -Z
      color: 0xFFFF00,
      wireframe: true,
      visible: false
    })
  ];

  var material = new THREE.MultiMaterial(materialArray);
  cube = new THREE.Mesh(new THREE.BoxGeometry(200, 200, 200), material);
  // the "new format": not yet work ...
  //cube = new THREE.Mesh (geometry, materialArray);

  return cube;

}

function buildPlane() {
	var plane = new THREE.Object3D();
  
	var geometry = new THREE.Geometry();
  geometry.vertices.push(new THREE.Vector3(15, 0, 0));
  geometry.vertices.push(new THREE.Vector3(0, 5, 0));
  geometry.vertices.push(new THREE.Vector3(0, 0, 5));
  geometry.vertices.push(new THREE.Vector3(0, 0, -5));
  var face;
  face = new THREE.Face3(0, 1, 2);
  geometry.faces.push(face);
  face = new THREE.Face3(1, 3, 2);
  geometry.faces.push(face);
  face = new THREE.Face3(3, 1, 0);
  geometry.faces.push(face);
  face = new THREE.Face3(2, 3, 0);
  geometry.faces.push(face);

  geometry.computeBoundingSphere();
  geometry.computeFaceNormals();
  geometry.computeVertexNormals();

  mesh = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial());
  plane.add(mesh);
  
  var axis0 = new THREE.Mesh (new THREE.CylinderGeometry (1,1,30), new...