rlamana/aviator.html

## aviator.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Aviator using A-Frame</title>
    <meta name="description" content="Hello, World! • A-Frame">
    <script src="aframe.js"></script>
  </head>
  <body>
    <script type="text/javascript">
      AFRAME.registerComponent('shadow', {
        schema: {
          type: 'boolean',
          default: false
        },

        update: function () {
          var mesh;
          if (this.data) {
            // if (this.el.tagName === 'A-SCENE') {
            //   this.el.renderer.shadowMap.enabled = true;
            // }

            // if (this.el.hasAttribute('light')) {
            //   light = this.el.getObject3D('light');
            //   light.castShadow = true;
            //   light.shadow.camera.left = -400;
            //   light.shadow.camera.right = 400;
            //   light.shadow.camera.top = 400;
            //   light.shadow.camera.bottom = -400;
            //   light.shadow.camera.near = 1;
            //   light.shadow.camera.far = 1000;
            //   light.shadow.mapSize.width = 2048;
            //   light.shadow.mapSize.height = 2048;
            // } else if (this.el.hasAttribute('geometry')) {
            //   mesh = this.el.getObject3D('mesh');
            //   mesh.castShadow = true;
            //   mesh.receiveShadow = true;
            // }
          }
        }
      });

      AFRAME.registerComponent('cockpit', {
        schema: {
          type: 'string',
          default: 'normal'
        },

        update: function () {
          var mesh;
          if (this.data === 'cool') {
            mesh = this.el.getOrCreateObject3D('mesh', THREE.Mesh);
            mesh.geometry.vertices[4].y -= 10;
            mesh.geometry.vertices[4].z += 20;
            mesh.geometry.vertices[5].y -= 10;
            mesh.geometry.vertices[5].z -= 20;
            mesh.geometry.vertices[6].y += 30;
            mesh.geometry.vertices[6].z += 20;
            mesh.geometry.vertices[7].y += 30;
            mesh.geometry.vertices[7].z -= 20;
          }
        }
      });
    </script>
    <a-entity light="type: hemisphere; color: #aaaaaa; groundColor: #000000; intensity: 0.9" position="0 0 0"></a-entity>
    <a-entity light="type: directional; color: #ffffff; intensity: 0.9" position="150 350 350" shadow="true"></a-entity>

    <a-scene fog="type: linear; color: #f7d9aa; near: 100; far: 950" shadow="true">
      <a-entity id="airplane" position="0 100 0" scale=".25 .25 .25">
        <a-entity id="cabin" shadow="true" cockpit="cool" geometry="primitive: box; width: 80; height: 50; depth: 50" position="0 0 0" material="color: #f25346;"></a-entity>
        <a-entity id="engine" shadow="true" geometry="primitive: box; width: 20; height: 50; depth: 50" position="40 0 0" material="color: #d8d0d1;"></a-entity>
        <a-entity id="tail" shadow="true" geometry="primitive: box; width: 15; height: 20; depth: 5" position="-35 25 0" material="color: #f25346;"></a-entity>
        <a-entity id="wing" shadow="true" geometry="primitive: box; width: 40; height: 8; depth: 150" position="0 0 0" material="color: #f25346;"></a-entity>
        <a-entity>
          <a-entity id="propeller" shadow="true" geometry="primitive: box; width: 20; height: 10; depth: 10" position="50 0 0" material="color: #59332e;">
            <a-entity id="blade" shadow="true" geometry="primitive: box; width: 1; height: 100; depth: 20" position="8 0 0" material="color: #23190f;"></a-entity>
            <a-animation attribute="rotation"
               dur="500"
               fill="forwards"
               to="360 0 0"
               easing="linear"
               repeat="indefinite"></a-animation>
          </a-entity>
        </a-entity>
      </a-entity>

      <a-entity position="0 100 200">
        <a-entity camera="fov:60; far:10000; near:1" look-controls></a-entity>
      </a-entity>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>

    <script src="aframe-editor.js"></script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Aviator using A-Frame</title>
	<meta name="description" content="Hello, World! • A-Frame">
	<script src="aframe.js"></script>
	</head>
	<body>
	<script type="text/javascript">
	AFRAME.registerComponent('shadow', {
	schema: {
	type: 'boolean',
	default: false
	},

	update: function () {
	var mesh;
	if (this.data) {
	// if (this.el.tagName === 'A-SCENE') {
	// this.el.renderer.shadowMap.enabled = true;
	// }

	// if (this.el.hasAttribute('light')) {
	// light = this.el.getObject3D('light');
	// light.castShadow = true;
	// light.shadow.camera.left = -400;
	// light.shadow.camera.right = 400;
	// light.shadow.camera.top = 400;
	// light.shadow.camera.bottom = -400;
	// light.shadow.camera.near = 1;
	// light.shadow.camera.far = 1000;
	// light.shadow.mapSize.width = 2048;
	// light.shadow.mapSize.height = 2048;
	// } else if (this.el.hasAttribute('geometry')) {
	// mesh = this.el.getObject3D('mesh');
	// mesh.castShadow = true;
	// mesh.receiveShadow = true;
	// }
	}
	}
	});

	AFRAME.registerComponent('cockpit', {
	schema: {
	type: 'string',
	default: 'normal'
	},

	update: function () {
	var mesh;
	if (this.data === 'cool') {
	mesh = this.el.getOrCreateObject3D('mesh', THREE.Mesh);
	mesh.geometry.vertices[4].y -= 10;
	mesh.geometry.vertices[4].z += 20;
	mesh.geometry.vertices[5].y -= 10;
	mesh.geometry.vertices[5].z -= 20;
	mesh.geometry.vertices[6].y += 30;
	mesh.geometry.vertices[6].z += 20;
	mesh.geometry.vertices[7].y += 30;
	mesh.geometry.vertices[7].z -= 20;
	}
	}
	});
	</script>
	<a-entity light="type: hemisphere; color: #aaaaaa; groundColor: #000000; intensity: 0.9" position="0 0 0"></a-entity>
	<a-entity light="type: directional; color: #ffffff; intensity: 0.9" position="150 350 350" shadow="true"></a-entity>

	<a-scene fog="type: linear; color: #f7d9aa; near: 100; far: 950" shadow="true">
	<a-entity id="airplane" position="0 100 0" scale=".25 .25 .25">
	<a-entity id="cabin" shadow="true" cockpit="cool" geometry="primitive: box; width: 80; height: 50; depth: 50" position="0 0 0" material="color: #f25346;"></a-entity>
	<a-entity id="engine" shadow="true" geometry="primitive: box; width: 20; height: 50; depth: 50" position="40 0 0" material="color: #d8d0d1;"></a-entity>
	<a-entity id="tail" shadow="true" geometry="primitive: box; width: 15; height: 20; depth: 5" position="-35 25 0" material="color: #f25346;"></a-entity>
	<a-entity id="wing" shadow="true" geometry="primitive: box; width: 40; height: 8; depth: 150" position="0 0 0" material="color: #f25346;"></a-entity>
	<a-entity>
	<a-entity id="propeller" shadow="true" geometry="primitive: box; width: 20; height: 10; depth: 10" position="50 0 0" material="color: #59332e;">
	<a-entity id="blade" shadow="true" geometry="primitive: box; width: 1; height: 100; depth: 20" position="8 0 0" material="color: #23190f;"></a-entity>
	<a-animation attribute="rotation"
	dur="500"
	fill="forwards"
	to="360 0 0"
	easing="linear"
	repeat="indefinite"></a-animation>
	</a-entity>
	</a-entity>
	</a-entity>

	<a-entity position="0 100 200">
	<a-entity camera="fov:60; far:10000; near:1" look-controls></a-entity>
	</a-entity>
	<a-sky color="#ECECEC"></a-sky>
	</a-scene>

	<script src="aframe-editor.js"></script>
	</body>
	</html>