Topic

quaternion problem

by joe chan

HTML

<h1 style="text-align:center"> move on six faces (k-drive) 
<br>(left:A up:W right:D)
</h1>

<hr>
<div id="container2" style="background:pink; float:left; margin:3px; width:45vw; height:45vw"></div>
<div id="container" style="float:right; margin:3px; width:45vw; height:45vw">
</div>
<br>
<hr style="clear:both">

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
<script src="https://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

.dbutton {
  padding: 4px;
  background: green;
  border-radius: 4px;
  cursor: pointer;
}

.dbutton.selected {
  background: orange;
}

JavaScript

var camera, scene, renderer;
var camera2, scene2, renderer2;
var controls;
var keyboard = new KeyboardState();

var car;
var go = 0;
var change = 0;

var upTemp = new THREE.Vector3();
var cameraOffset;

var changeX = 0, changeY = 1, changeZ = 0;

var carP;
var newCarP;
var avatarBody;
var v;
var vP = new THREE.Vector3(1, 0, 0);

var alpha = 0;
var pos1, pos2, quat1 = new THREE.Quaternion(), quat2 = new THREE.Quaternion();
var localX, localY, localZ;
var changeX2 = 0, changeY2 = 0, changeZ2 = 0;

init();
animate();

function buildModel() {

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

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

    }),
    new THREE.MeshBasicMaterial({ // -Z
      color: 0xFFFF00,
      side: THREE.BackSide
    })
  ];

  var material = new THREE.MultiMaterial(materialArray);
  var cube = new THREE.Mesh(new THREE.BoxGeometry(150, 150, 150), material);

  return cube;
  
}

function buildCarModel() {

  var geometry = new THREE.Geometry();
  // add vertices
  geometry.vertices.push(new THREE.Vector3(0, 0, 10));
  geometry.vertices.push(new THREE.Vector3(25, 0, 0));
  geometry.vertices.push(new THREE.Vector3(0, 13, 0));
  geometry.vertices.push(new THREE.Vector3(0, 0, -10));

  // add faces
  geometry.faces.push(new THREE.Face3(0, 1, 2));
  geometry.faces.push(new THREE.Face3(1, 2, 3));
  geometry.faces.push(new THREE.Face3(0, 1, 3));
  geometry.faces.push(new THREE.Face3(0, 2, 3));

  // build necessary information
  geometry.computeBoundingSphere();
  geometry.computeFaceNormals();
  geometry.computeVertexNormals();

 ...