Seminar 03 session

seminar-02/README.md

@@ -1,6 +1,6 @@
 # Seminar (second session)
 
-This session will enter into some details of how to use A-Frame with only HTML
+This session will enter into some details of how to use A-Frame with only HTML.
 
 ## Augmented reality
 
@@ -64,33 +64,3 @@ When in VR, the cursor can be a pointer, controlled with the controller. For tha
 * [Scene source code](https://github.com/jgbarah/aframe-playground/tree/master/seminar-02/basic_events2.html)
 * [View online](basic_events2.html)
 
-## 3D objects in GLTF format
-
-We can set 3D objects in GLTF 2.0 format (as a single file, or GLB format) using the `gltf-model` component. Since GLTF file may be large, it is convenient to use a `a-assets` element to enclose the assets (in this case, the GLB file).
-
-* [Scene source code](https://github.com/jgbarah/aframe-playground/tree/master/seminar-02/basic_gltf.html)
-* [View online](basic_gltf.html)
-
-There are many sources for GLTF objects. For example:
-
-* [Sketchfab](https://sketchfab.com/). Many objects to download. Some of them are free, and can be reused, some are not.
-* [Polycam](https://poly.cam/). Produce a GLTF from an object, using the camera of your mobile phone. Download the app, record the object with the camera from all angles, download the result as GLTF.
-
-GLTF objects may have movements. Those can be animated with the `animation-mixer` component,
-from [aframe-extras](https://github.com/c-frame/aframe-extras), which we already used to have the `movement-controls` component.
-
-Let's work with
-[Mech Drone](https://sketchfab.com/models/8d06874aac5246c59edb4adbe3606e0e),
-by [Willy Decarpentrie](https://sketchfab.com/skudgee) (license CC-by). To download it, you will need to create an account in Sketchfab for you, and login.
-
-By default, `animation-mixer` will run all the animations of the object
-(in this case only one, which shows the arms of the drone moving):
-
-```html
-      <a-entity gltf-model="#drone" position="-1 0.6 -3"
-          scale="2 2 2" animation-mixer>
-      </a-entity>
-```
-
-* [Scene source code](https://github.com/jgbarah/aframe-playground/tree/master/seminar-02/basic_gltf2.html)
-* [View online](basic_gltf2.html)

seminar-03/README.md

@@ -0,0 +1,41 @@
+# Seminar (third session)
+
+This session will enter into some more details of how to use A-Frame with only HTML, and how to write simple A-Frame components with JavaScript.
+
+## 3D objects in GLTF format
+
+We can set 3D objects in GLTF 2.0 format (as a single file, or GLB format) using the `gltf-model` component. Since GLTF file may be large, it is convenient to use a `a-assets` element to enclose the assets (in this case, the GLB file).
+
+* [Scene source code](https://github.com/jgbarah/aframe-playground/tree/master/seminar-02/basic_gltf.html)
+* [View online](basic_gltf.html)
+
+There are many sources for GLTF objects. For example:
+
+* [Sketchfab](https://sketchfab.com/). Many objects to download. Some of them are free, and can be reused, some are not.
+* [Polycam](https://poly.cam/). Produce a GLTF from an object, using the camera of your mobile phone. Download the app, record the object with the camera from all angles, download the result as GLTF.
+
+GLTF objects may have movements. Those can be animated with the `animation-mixer` component,
+from [aframe-extras](https://github.com/c-frame/aframe-extras), which we already used to have the `movement-controls` component.
+
+Let's work with
+[Mech Drone](https://sketchfab.com/models/8d06874aac5246c59edb4adbe3606e0e),
+by [Willy Decarpentrie](https://sketchfab.com/skudgee) (license CC-by). To download it, you will need to create an account in Sketchfab for you, and login.
+
+By default, `animation-mixer` will run all the animations of the object
+(in this case only one, which shows the arms of the drone moving):
+
+```html
+      <a-entity gltf-model="#drone" position="-1 0.6 -3"
+          scale="2 2 2" animation-mixer>
+      </a-entity>
+```
+
+* [Scene source code](https://github.com/jgbarah/aframe-playground/tree/master/seminar-02/basic_gltf2.html)
+* [View online](basic_gltf2.html)
+
+
+## Simple A-Frame component
+
+[Detailed documentation in the A-Frame tutorial](https://aframe.io/docs/1.5.0/introduction/writing-a-component.html)
+
+

seminar-03/component2.js

@@ -0,0 +1,5 @@
+AFRAME.registerComponent('hello', {
+    init: function () {
+        console.log('Hello!');
+    }
+  });

seminar-03/component3.js

@@ -0,0 +1,9 @@
+AFRAME.registerComponent('hello', {
+    schema: {
+        message: {type: 'string', default: 'Hello!'}
+      },
+
+    init: function () {
+        console.log(this.data.message);
+    }
+  });

seminar-03/component4.js

@@ -0,0 +1,21 @@
+AFRAME.registerComponent('hello', {
+    schema: {
+        message: {type: 'string', default: 'Hello!'},
+        event: {type: 'string', default: ''},
+      },
+
+    init: function () {
+      var data = this.data;  // Component property values.
+      var el = this.el;  // Reference to the component's entity.
+
+      if (data.event) {
+        // This will log the `message` when the entity emits the `event`.
+        el.addEventListener(data.event, function () {
+          console.log(data.message);
+        });
+      } else {
+        // `event` not specified, just log the message.
+        console.log(data.message);
+      };
+    }
+  });

seminar-03/component5.js

@@ -0,0 +1,27 @@
+AFRAME.registerComponent('hello', {
+    schema: {
+        message: {type: 'string', default: 'Hello!'},
+        event: {type: 'string', default: ''},
+      },
+
+    init: function () {
+      var data = this.data;  // Component property values.
+      var el = this.el;  // Reference to the component's entity.
+      var pos_y = 1;
+      if (data.event) {
+        // This will log the `message` when the entity emits the `event`.
+        el.addEventListener(data.event, function () {
+          console.log(data.message);
+          var box = document.createElement("a-box");
+          box.setAttribute('color', 'red');
+          box.setAttribute('position', {x: 0, y: pos_y, z: 0});
+          el.appendChild(box);
+          pos_y += 1;
+        });
+      } else {
+        // `event` not specified, just log the message.
+        console.log(data.message);
+      };
+
+    }
+  });

seminar-03/scene_component.html

@@ -0,0 +1,23 @@
+<html>
+  <head>
+    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
+  </head>
+  <body>
+    <script>
+      AFRAME.registerComponent('hello', {
+        init: function () {
+            console.log('Hello!');
+        }
+      });
+    </script>
+    <a-scene background="color: #ECECEC">
+      <a-box position="-1 0.5 -3" hello rotation="0 45 0" color="#4CC3D9"
+          animation="startEvents: click; property: position;
+              from: -1 1.5 -3; to: -1 0.5 -3; dur: 1000">
+      </a-box>
+      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
+
+      <a-entity cursor="rayOrigin:mouse"></a-entity>
+    </a-scene>
+  </body>
+</html>

seminar-03/scene_component2.html

@@ -0,0 +1,17 @@
+<html>
+  <head>
+    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
+    <script src="component2.js"></script>
+  </head>
+  <body>
+    <a-scene background="color: #ECECEC">
+      <a-box position="-1 0.5 -3" hello rotation="0 45 0" color="#4CC3D9"
+          animation="startEvents: click; property: position;
+              from: -1 1.5 -3; to: -1 0.5 -3; dur: 1000">
+      </a-box>
+      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
+
+      <a-entity cursor="rayOrigin:mouse"></a-entity>
+    </a-scene>
+  </body>
+</html>

seminar-03/scene_component3.html

@@ -0,0 +1,23 @@
+<html>
+  <head>
+    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
+    <script src="component3.js"></script>
+  </head>
+  <body>
+    <a-scene background="color: #ECECEC">
+      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"
+          animation="startEvents: click; property: position;
+              from: -1 1.5 -3; to: -1 0.5 -3; dur: 1000"
+          hello>
+      </a-box>
+      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"
+          animation="startEvents: click; property: scale;
+              from: 2 2 2; to: 1 1 1; dur: 1000"
+          hello="message: Hola">
+      </a-sphere>
+      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
+
+      <a-entity cursor="rayOrigin:mouse"></a-entity>
+    </a-scene>
+  </body>
+</html>

seminar-03/scene_component4.html

@@ -0,0 +1,24 @@
+<html>
+  <!-- Handler for an event -->
+  <head>
+    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
+    <script src="component4.js"></script>
+  </head>
+  <body>
+    <a-scene background="color: #ECECEC">
+      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"
+          animation="startEvents: click; property: position;
+              from: -1 1.5 -3; to: -1 0.5 -3; dur: 1000"
+          hello="event: click; message: Clicked!">
+      </a-box>
+      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"
+          animation="startEvents: click; property: scale;
+              from: 2 2 2; to: 1 1 1; dur: 1000"
+          hello="message: Hola">
+      </a-sphere>
+      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
+
+      <a-entity cursor="rayOrigin:mouse"></a-entity>
+    </a-scene>
+  </body>
+</html>

seminar-03/scene_component5.html

@@ -0,0 +1,24 @@
+<html>
+  <!-- Handler for an event -->
+  <head>
+    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
+    <script src="component5.js"></script>
+  </head>
+  <body>
+    <a-scene background="color: #ECECEC">
+      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"
+          animation="startEvents: click; property: position;
+              from: -1 1.5 -3; to: -1 0.5 -3; dur: 1000"
+          hello="event: click; message: Clicked!">
+      </a-box>
+      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"
+          animation="startEvents: click; property: scale;
+              from: 2 2 2; to: 1 1 1; dur: 1000"
+          hello="message: Hola">
+      </a-sphere>
+      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
+
+      <a-entity cursor="rayOrigin:mouse"></a-entity>
+    </a-scene>
+  </body>
+</html>