Quadcopter

by Leoooo

HTML

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js">
</script>

CSS

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

body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer, light, controls;
var airplane, motors = [];
init();
animate();

function lineExample() {

  var lineGeometry = new THREE.Geometry();
  var vertArray = lineGeometry.vertices;
  vertArray.push(new THREE.Vector3(-100, -100, 0), new THREE.Vector3(-100, 100, 0), new THREE.Vector3(50, 100, 0));
  lineGeometry.computeLineDistances();
  var lineMaterial = new THREE.LineDashedMaterial({
    color: 0x00cc00,
    dashSize: 4,
    gapSize: 2
  });

  return new THREE.Line(lineGeometry, lineMaterial);
}

function createMotor(){
  var geometry = new THREE.Geometry();

  geometry.vertices.push(
    new THREE.Vector3( -10,  10, 0 ),
    new THREE.Vector3( -10, -10, 0 ),
    new THREE.Vector3(  10, -10, 0 )
  );

  geometry.faces.push( new THREE.Face3( 0, 1, 2 ) );
  var material = new THREE.MeshBasicMaterial({color: 0x333333})
  return new THREE.Mesh(geometry, material);
}

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

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

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);
  light = new THREE.PointLight(0xffffff);
  light.position.set(0, 100, 100);
  scene.add(light);
  controls = new THREE.OrbitControls(camera, renderer.domElement);
  document.body.appendChild(renderer.domElement);
  window.addEventListener('resize', onWindowResize, false);
  var gridXZ = new THREE.GridHelper(1000, 20, 'red', 'white');
   //scene.add(gridXZ);
var axesHelper = new THREE.AxesHelper( 20 );
  //scene.add( axesHelper );
  //////////////////////////////////////////////////////////////
	let loader = new THREE.TextureLoader();
  loader.crossOrigin = '';
  airplane = new THREE.Object3D();
  texture = loader.load('https://i.imgur.com/qr8kAad.png');

  var box = new THREE.Mesh(new THREE.BoxGeometry(30, 20, 60), new...