rotation3D

euler angles

by Rebecca Chen

HTML

<div id="info">Orientation 3D
  <br/>Euler angles</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r78/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/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 missile;
var pos, vel, force;
var clock = new THREE.Clock();
var target;
var maxSpeed = 60;
var maxForce = 10

init();
animate();

function buildMissile() {
	var missile = new THREE.Object3D();
  var normalMat = new THREE.MeshNormalMaterial();
	var tip = new THREE.Mesh (new THREE.CylinderGeometry (0,5,10,20), normalMat);
  var body = new THREE.Mesh (new THREE.CylinderGeometry (5,5,20,20), normalMat);
 	body.add (tip);
  tip.position.y = 10/2 + 20/2;
  body.position.y = 20/2;
 
 	missile.add (body);
  missile.rotation.z = -Math.PI/2;
  var missileFrame = new THREE.Object3D();
  missileFrame.add (missile);
	return missileFrame;
}

function init() {
  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.z = 800;
  camera.position.y = 100;
  scene.add(camera);

  light = new THREE.PointLight(0xffffff);
  light.position.set(100, 300, 200);
  scene.add(light);

  var gridXZ = new THREE.GridHelper(300, 30, 'red', 'white');
//  gridXZ.setColors(new THREE.Color(0xff0000), new THREE.Color(0xffffff));
  scene.add(gridXZ);

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);

  controls = new THREE.OrbitControls(camera, renderer.domElement);

  document.body.appendChild(renderer.domElement);
  ////////////////////////////////////////////////////////////////////////

	var puck = new THREE.Mesh (new THREE.CylinderGeometry (20,20,60), new THREE.MeshNormalMaterial());
  scene.add (puck);
  puck.position.set (-200,30,280);
  
  missile = buildMissile();
	pos = new THREE.Vector3();
	vel = new THREE.Vector3(120,0,0);
	force = new THREE.Vector3();
 
	missile.rotation.y = 0;//-Math.PI/4;
  missile.rotation.z = Math.PI/6;
  missile.position.set (-280,0,-280);
  
  pos.copy (missile.position);
  vel.applyEuler (missile.rotation);

	scene.add (missile);
  target =...