⚡ Added an eyeball

app/assets/blue_eyeball/scene.gltf

@@ -0,0 +1,285 @@
+{
+  "accessors": [
+    {
+      "bufferView": 2,
+      "componentType": 5126,
+      "count": 687,
+      "max": [
+        0.9271240234375,
+        0.9271240234375,
+        1
+      ],
+      "min": [
+        -0.9271240234375,
+        -0.9271240234375,
+        -1
+      ],
+      "type": "VEC3"
+    },
+    {
+      "bufferView": 2,
+      "byteOffset": 8244,
+      "componentType": 5126,
+      "count": 687,
+      "max": [
+        1,
+        1,
+        1
+      ],
+      "min": [
+        -1,
+        -1,
+        -1
+      ],
+      "type": "VEC3"
+    },
+    {
+      "bufferView": 3,
+      "componentType": 5126,
+      "count": 687,
+      "max": [
+        0.60006600618362427,
+        0.99993300437927246,
+        0.99986398220062256,
+        1
+      ],
+      "min": [
+        -0.53386002779006958,
+        -0.9997289776802063,
+        -0.99982798099517822,
+        1
+      ],
+      "type": "VEC4"
+    },
+    {
+      "bufferView": 1,
+      "componentType": 5126,
+      "count": 687,
+      "max": [
+        0.9788060188293457,
+        1
+      ],
+      "min": [
+        0,
+        0
+      ],
+      "type": "VEC2"
+    },
+    {
+      "bufferView": 0,
+      "componentType": 5125,
+      "count": 3888,
+      "max": [
+        686
+      ],
+      "min": [
+        0
+      ],
+      "type": "SCALAR"
+    }
+  ],
+  "asset": {
+    "extras": {
+      "author": "Tom Hodes (https://sketchfab.com/tomhodes)",
+      "license": "CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)",
+      "source": "https://sketchfab.com/models/18915d2f17a2431fbefeb3eaf4411f16",
+      "title": "Blue Eyeball (Free)"
+    },
+    "generator": "Sketchfab-3.19.6",
+    "version": "2.0"
+  },
+  "bufferViews": [
+    {
+      "buffer": 0,
+      "byteLength": 15552,
+      "byteOffset": 0,
+      "name": "floatBufferViews",
+      "target": 34963
+    },
+    {
+      "buffer": 0,
+      "byteLength": 5496,
+      "byteOffset": 15552,
+      "byteStride": 8,
+      "name": "floatBufferViews",
+      "target": 34962
+    },
+    {
+      "buffer": 0,
+      "byteLength": 16488,
+      "byteOffset": 21048,
+      "byteStride": 12,
+      "name": "floatBufferViews",
+      "target": 34962
+    },
+    {
+      "buffer": 0,
+      "byteLength": 10992,
+      "byteOffset": 37536,
+      "byteStride": 16,
+      "name": "floatBufferViews",
+      "target": 34962
+    }
+  ],
+  "buffers": [
+    {
+      "byteLength": 48528,
+      "uri": "scene.bin"
+    }
+  ],
+  "images": [
+    {
+      "uri": "textures/blinn2_baseColor.png"
+    },
+    {
+      "uri": "textures/blinn2_metallicRoughness.png"
+    },
+    {
+      "uri": "textures/blinn2_normal.png"
+    }
+  ],
+  "materials": [
+    {
+      "alphaMode": "BLEND",
+      "doubleSided": true,
+      "emissiveFactor": [
+        0,
+        0,
+        0
+      ],
+      "name": "blinn2",
+      "normalTexture": {
+        "index": 2,
+        "scale": 1,
+        "texCoord": 0
+      },
+      "occlusionTexture": {
+        "index": 1,
+        "strength": 1,
+        "texCoord": 0
+      },
+      "pbrMetallicRoughness": {
+        "baseColorFactor": [
+          1,
+          1,
+          1,
+          1
+        ],
+        "baseColorTexture": {
+          "index": 0,
+          "texCoord": 0
+        },
+        "metallicFactor": 1,
+        "metallicRoughnessTexture": {
+          "index": 1,
+          "texCoord": 0
+        },
+        "roughnessFactor": 1
+      }
+    }
+  ],
+  "meshes": [
+    {
+      "name": "defaultMaterial",
+      "primitives": [
+        {
+          "attributes": {
+            "NORMAL": 1,
+            "POSITION": 0,
+            "TANGENT": 2,
+            "TEXCOORD_0": 3
+          },
+          "indices": 4,
+          "material": 0,
+          "mode": 4
+        }
+      ]
+    }
+  ],
+  "nodes": [
+    {
+      "children": [
+        1
+      ],
+      "name": "RootNode (gltf orientation matrix)",
+      "rotation": [
+        -0.70710678118654746,
+        -0,
+        -0,
+        0.70710678118654757
+      ]
+    },
+    {
+      "children": [
+        2
+      ],
+      "name": "RootNode (model correction matrix)"
+    },
+    {
+      "children": [
+        3
+      ],
+      "matrix": [
+        1,
+        0,
+        0,
+        0,
+        0,
+        -4.3711390063094768e-08,
+        0.999999999999999,
+        0,
+        0,
+        -0.999999999999999,
+        -4.3711390063094768e-08,
+        0,
+        0,
+        0,
+        0,
+        1
+      ],
+      "name": "Collada visual scene group"
+    },
+    {
+      "children": [
+        4
+      ],
+      "name": "low"
+    },
+    {
+      "mesh": 0,
+      "name": "defaultMaterial"
+    }
+  ],
+  "samplers": [
+    {
+      "magFilter": 9729,
+      "minFilter": 9987,
+      "wrapS": 10497,
+      "wrapT": 10497
+    }
+  ],
+  "scene": 0,
+  "scenes": [
+    {
+      "name": "OSG_Scene",
+      "nodes": [
+        0
+      ]
+    }
+  ],
+  "textures": [
+    {
+      "sampler": 0,
+      "source": 0
+    },
+    {
+      "sampler": 0,
+      "source": 1
+    },
+    {
+      "sampler": 0,
+      "source": 2
+    }
+  ]
+}
+

app/js/components/Eyeball.js

@@ -0,0 +1,48 @@
+import props from 'js/core/props';
+
+class Eyeball extends THREE.Object3D {
+  constructor() {
+    super();
+
+    var loader = new THREE.GLTFLoader();
+
+    // Load a glTF resource
+    loader.load(
+      // resource URL
+      'blue_eyeball/scene.gltf',
+      // called when the resource is loaded
+      ( gltf ) => {
+
+        this.add( gltf.scene );
+
+        // gltf.animations; // Array<THREE.AnimationClip>
+        // gltf.scene; // THREE.Scene
+        // gltf.scenes; // Array<THREE.Scene>
+        // gltf.cameras; // Array<THREE.Camera>
+        // gltf.asset; // Object
+
+      },
+      // called while loading is progressing
+      ( xhr ) => {
+
+        console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
+
+      },
+      // called when loading has errors
+      ( error ) => {
+
+        console.log( { error } );
+
+      }
+    );
+
+    this.onUpdate = this.onUpdate.bind(this);
+  }
+
+  onUpdate() {
+    this.rotation.x += props.rotation;
+    this.rotation.y += props.rotation;
+  }
+}
+
+module.exports = Eyeball;

app/js/components/Light.js

@@ -0,0 +1,26 @@
+export function createLight() {
+
+  var lightGeometry = new THREE.SphereGeometry(0.1);
+
+  var lightMaterial = new THREE.MeshStandardMaterial({
+      emissive: 0xffffee,
+      emissiveIntensity: 1,
+      color: 0x000000
+  });
+
+  var light = new THREE.PointLight(0xffffff, 1, 20, 2);
+  light.power = 50;
+  light.castShadow = true;
+  light.shadow.mapSize.width = 512;
+  light.shadow.mapSize.heigth = 512;
+  light.shadow.radius = 1.5;
+
+  light.add(new THREE.Mesh(lightGeometry, lightMaterial));
+  light.position.set(0, 5, 3);
+
+  return light;
+}
+
+export function createHemisphereLight() {
+  return new THREE.HemisphereLight(0x303F9F, 0x111111, 3);
+}

app/js/core/Webgl.js

@@ -2,14 +2,20 @@ export default class Webgl {
   constructor(w, h) {
     this.scene = new THREE.Scene();
 
-    this.camera = new THREE.PerspectiveCamera(50, w / h, 1, 1000);
+    this.camera = new THREE.PerspectiveCamera(50, w / h, 0.1, 1000);
     this.camera.position.z = 10;
 
     this._renderer = new THREE.WebGLRenderer({
       antialias: true,
+      alpha: false,
     });
     this._renderer.setPixelRatio(window.devicePixelRatio);
     this._renderer.setClearColor(0x0c171a);
+    this._renderer.gammaInput = true;
+    this._renderer.gammaOutput = true;
+    this._renderer.shadowMap.enabled = true;
+    this._renderer.shadowMap.bias = 0.0001;
+    this._renderer.shadowMap.type = THREE.PCFSoftShadowMap;
     this.dom = this._renderer.domElement;
 
     this.usePostprocessing = false;

app/js/core/props.js

@@ -1,5 +1,5 @@
 const props = {
-  rotation: 0.05,
+  rotation: 0.01,
 };
 
 module.exports = props;

app/main.js

@@ -1,8 +1,8 @@
 import Webgl from 'js/core/Webgl';
 import loop from 'js/core/Loop';
 import props from 'js/core/props';
-import Example from 'js/components/Example';
-
+import Eyeball from 'js/components/Eyeball';
+import { createLight, createHemisphereLight } from 'js/components/Light';
 
 // ##
 // INIT
@@ -19,15 +19,14 @@ gui.close();
 
 // ##
 // EXAMPLE LIGHT
-const light = new THREE.DirectionalLight(0xffffff, 0.5);
-light.position.set(1, 1, 1);
-webgl.add(light);
+webgl.add(createLight());
+webgl.add(createHemisphereLight());
 
 // ##
 // EXAMPLE BOX
-const example = new Example();
-webgl.add(example);
-loop.add(example.onUpdate);
+const eyeball = new Eyeball();
+webgl.add(eyeball);
+loop.add(eyeball.onUpdate);
 
 // ##
 // RENDERER

app/style.css

@@ -5,6 +5,7 @@ html, body {
   width: 100%;
   height : 100%;
   color: #f3f3f4;
+  overflow: hidden;
 }
 
 canvas {

brunch-config.coffee

@@ -9,5 +9,5 @@ exports.config =
       joinTo: 'app.js'
   npm:
     globals:
-      THREE: 'three'
+      THREE: 'three-full'
       dat: 'dat-gui'

package-lock.json

@@ -7578,10 +7578,10 @@
       "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
       "dev": true
     },
-    "three": {
-      "version": "0.81.2",
-      "resolved": "http://registry.npmjs.org/three/-/three-0.81.2.tgz",
-      "integrity": "sha1-EAwHjc+7CiNePUMwZrGyaxRcacM="
+    "three-full": {
+      "version": "11.3.2",
+      "resolved": "https://registry.npmjs.org/three-full/-/three-full-11.3.2.tgz",
+      "integrity": "sha512-0qv9kLe2bp1ksV3mgjyzWtIBO//U19+RzoyAuSGkSKKYF0M3zxAwWU5L6rRhVj6L/GGlbUb4EHMa8QhcW8/Rtw=="
     },
     "through": {
       "version": "2.3.8",

package.json

@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "dat-gui": "^0.5.0",
-    "three": "^0.81.0"
+    "three-full": "^11.3.2"
   },
   "devDependencies": {
     "auto-reload-brunch": "^2.7.1",