cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              #scene
p.noselect Plain Plane
sub.noselect Click to Roll
            
          
!
            
              body{
  background:#046380;


}

#scene{
  background:linear-gradient(#046380,#468966);

  position:absolute;
  width:100%;
  overflow:hidden;
  top:0;
  left:0;
}

p {
  font-weight: bold;
  position: absolute;
  top: 1em;
  left: 1em;
  margin: 0;  
}

sub {
  font-weight: 100;
  position: absolute;
  top: 2em;
  left: 1em;
  margin: 0;
  opacity: 0.5;
}

.noselect {
  color: #FFF;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.2em;
  
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}
            
          
!
            
              var camera, scene, controls, renderer, light;

var geometry,
  base_mesh,
  switch_mesh,
  spotLight,
  light,
  dirLight,
  line_geo,
  line,
  orbit_group,
  point,
  sphere_world,
  sphere,
  Propellor,
  Plane_Group;

anim = true;

function init() {
  camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    1,
    1000
  );
  camera.position.z = 490;

  scene = new THREE.Scene();

  renderer = new THREE.WebGLRenderer({
    alpha: true,
    antialias: true
  });
  controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.enableDamping = false;
  controls.dampingFactor = 0.25;
  controls.enableZoom = false;
  HEIGHT = window.innerHeight;
  WIDTH = window.innerWidth;

  //controls.minDistance = 10;
  //controls.maxDistance = 50;
  // controls = new THREE.OrbitControls( 'camera', renderer.domElement );
  //controls.addEventListener( 'change', render ); // add this only if there is no animation loop (requestAnimationFrame)
  //controls.enableDamping = true;
  //controls.dampingFactor = 0.25;
  //controls.enableZoom = false;

  renderer.setSize(WIDTH, HEIGHT);
  renderer.shadowMapEnabled = true;
  container = document.getElementById("scene");
  container.appendChild(renderer.domElement);
}

function createWorld() {
  var material = new THREE.MeshPhongMaterial({
    color: 0x999999,
    shading: THREE.FlatShading,
    shininess: 200,
    specularity: 10,
    specular: 0xffffff,
    side: THREE.DoubleSide
  });

  var drag_material = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    shading: THREE.FlatShading,
    opacity: 0.25,
    transparent: true
  });

  //Geometry
  var Propellor_geo = new THREE.CylinderGeometry(50, 10, 5, 32);
  var Cockpit_geo = new THREE.CylinderGeometry(20, 60, 70, 4);
  var Body_geo = new THREE.CylinderGeometry(20, 60, 70, 4);
  var Body_Shaft_geo = new THREE.CylinderGeometry(15, 20, 60, 4);
  var Wings_geo = new THREE.BoxGeometry(300, 5, 70);
  var Coloumms_geo = new THREE.CylinderGeometry(3, 3, 45, 10);
  var Drag_geo = new THREE.CylinderGeometry(1, 2, 75, 4);

  //Body
  var Cockpit = new THREE.Mesh(Cockpit_geo, material);
  var Body_Back = new THREE.Mesh(Body_geo, material);
  var Body_Shaft = new THREE.Mesh(Body_Shaft_geo, material);

  //Wings
  var Wings = new THREE.Mesh(Wings_geo, material);
  var Wings_2 = new THREE.Mesh(Wings_geo, material);
  var Wings_Rear = new THREE.Mesh(Wings_geo, material);
  var Wings_Rear_2 = new THREE.Mesh(Wings_geo, material);

  //Columns
  var Coloumm_1 = new THREE.Mesh(Coloumms_geo, material);
  var Coloumm_2 = new THREE.Mesh(Coloumms_geo, material);
  var Coloumm_3 = new THREE.Mesh(Coloumms_geo, material);
  var Coloumm_4 = new THREE.Mesh(Coloumms_geo, material);

  var Drag_1 = new THREE.Mesh(Drag_geo, drag_material);
  var Drag_2 = new THREE.Mesh(Drag_geo, drag_material);

  Drag_1.name = "drag";
  Drag_2.name = "drag";

  Propellor = new THREE.Mesh(Propellor_geo, material);
  Propellor.rotation.x = 1.6;
  Propellor.position.z = -45;
  Propellor.scale.x = 1.5;
  Propellor.scale.z = 0.2;
  Cockpit.rotation.x = 4.7;
  Cockpit.scale.y = -2;
  Cockpit.position.z = 105;
  Cockpit.rotation.y = 0.8;
  Body_Back.rotation.x = 4.7;
  Body_Back.rotation.y = 0.8;
  Wings.position.z = 70;
  Wings.position.y = 45;

  Wings_2.position.z = 70;
  Wings_2.position.y = 0;

  Wings_Rear.scale.x = 0.2;
  Wings_Rear.scale.z = 0.2;
  Wings_Rear.scale.y = 1;
  Wings_Rear.position.z = 200;
  Wings_Rear.position.y = 20;

  Wings_Rear_2.scale.x = 0.2;
  Wings_Rear_2.scale.z = 0.2;
  Wings_Rear_2.scale.y = 1;
  Wings_Rear_2.position.z = 210;
  Wings_Rear_2.position.y = 40;

  Body_Shaft.position.z = 180;
  Body_Shaft.position.y = 20;
  Body_Shaft.rotation.y = 0.8;
  Body_Shaft.rotation.x = 0.6;

  Coloumm_1.position.x = 130;
  Coloumm_1.position.y = 25;
  Coloumm_1.position.z = 90;

  Coloumm_2.position.x = 100;
  Coloumm_2.position.y = 25;
  Coloumm_2.position.z = 55;

  Coloumm_3.position.x = -130;
  Coloumm_3.position.y = 25;
  Coloumm_3.position.z = 90;

  Coloumm_4.position.x = -100;
  Coloumm_4.position.y = 25;
  Coloumm_4.position.z = 55;

  Drag_1.rotation.x = 1.6;
  Drag_1.position.x = 150;
  Drag_1.position.y = 42;
  Drag_1.position.z = 150;

  Drag_2.rotation.x = 1.6;
  Drag_2.position.x = -150;
  Drag_2.position.y = 42;
  Drag_2.position.z = 150;

  Plane_Group = new THREE.Object3D();
  Plane_Group.add(Propellor);
  Plane_Group.add(Cockpit);
  Plane_Group.add(Body_Back);
  Plane_Group.add(Wings);
  Plane_Group.add(Wings_2);
  //Plane_Group.add(Wings_Rear);
  Plane_Group.add(Wings_Rear_2);
  Plane_Group.add(Body_Shaft);
  Plane_Group.add(Coloumm_1);
  Plane_Group.add(Coloumm_2);
  Plane_Group.add(Coloumm_3);
  Plane_Group.add(Coloumm_4);
  Plane_Group.add(Drag_1);
  Plane_Group.add(Drag_2);

  Plane_Group.rotation.y = -1.8;

  scene.add(Plane_Group);
  //Iteracte through object group and assign EdgesHelper to each
  for (var i = 0; i < Plane_Group.children.length; ++i) {
    if (Plane_Group.children[i].name != "drag") {
      var refMesh = Plane_Group.children[i];
      var egh = new THREE.EdgesHelper(refMesh, 0x000000);
      egh.material.linewidth = 2;
      scene.add(egh);
    }
  }
}

function createLight() {
  var spotLight = new THREE.SpotLight(0x444444);
  spotLight.position.set(500, 1000, 100);
  spotLight.castShadow = true;
  spotLight.shadowMapWidth = 1024;
  spotLight.shadowMapHeight = 1024;
  spotLight.shadowCameraNear = 500;
  spotLight.shadowCameraFar = 4000;
  spotLight.shadowCameraFov = 30;
  scene.add(spotLight);

  var light = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.3);
  scene.add(light);

  var dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
  dirLight.position.set(1, 1, 1);
  scene.add(dirLight);
}

function animation() {
  controls.update();
  window.requestAnimationFrame(animation);
  if (anim) {
    Propellor.rotation.y += 0.5;
    //Plane_Group.rotation.y += 0.01
    //Plane_Group.rotation.z += 0.02
  }
  renderer.render(scene, camera);
}

function setTween() {
  TweenMax.to(Plane_Group.position, 2, {
    y: 68,
    x: 20,
    z: 20,
    ease: Power2.easeInOut,
    yoyo: true,
    repeat: -1
  });
  /*TweenMax.to(Plane_Group.rotation, 2, {
      z: 18.85,
      ease: Power2.easeInOut,
      yoyo: true,
      repeat: -1,
      repeatDelay: 2
    })*/
  TweenMax.to(Plane_Group.rotation, 0.5, {
    x: 0.1,
    ease: Power2.easeInOut,
    yoyo: true,
    repeat: -1
  });
}
window.onclick = handleClick;

function handleClick() {
  if (Plane_Group.rotation.z === 0) {
    TweenMax.to(Plane_Group.rotation, 2, {
      z: 6.28,
      ease: Elastic.easeOut,
      onComplete: backToZero
    });
  }
}

function backToZero() {
  Plane_Group.rotation.z = 0;
}

init();
createWorld();
createLight();
setTween();
animation();

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console