diff --git a/app/assets/blue_eyeball/scene.bin b/app/assets/blue_eyeball/scene.bin new file mode 100644 index 0000000..d72ed17 Binary files /dev/null and b/app/assets/blue_eyeball/scene.bin differ diff --git a/app/assets/blue_eyeball/scene.gltf b/app/assets/blue_eyeball/scene.gltf new file mode 100644 index 0000000..d3d6f76 --- /dev/null +++ b/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 + } + ] +} + diff --git a/app/assets/blue_eyeball/textures/blinn2_baseColor.png b/app/assets/blue_eyeball/textures/blinn2_baseColor.png new file mode 100644 index 0000000..27674ec Binary files /dev/null and b/app/assets/blue_eyeball/textures/blinn2_baseColor.png differ diff --git a/app/assets/blue_eyeball/textures/blinn2_metallicRoughness.png b/app/assets/blue_eyeball/textures/blinn2_metallicRoughness.png new file mode 100644 index 0000000..9eeee7c Binary files /dev/null and b/app/assets/blue_eyeball/textures/blinn2_metallicRoughness.png differ diff --git a/app/assets/blue_eyeball/textures/blinn2_normal.png b/app/assets/blue_eyeball/textures/blinn2_normal.png new file mode 100644 index 0000000..8ed74b5 Binary files /dev/null and b/app/assets/blue_eyeball/textures/blinn2_normal.png differ diff --git a/app/js/components/Eyeball.js b/app/js/components/Eyeball.js new file mode 100644 index 0000000..581eb0f --- /dev/null +++ b/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 + // gltf.scene; // THREE.Scene + // gltf.scenes; // Array + // gltf.cameras; // Array + // 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; diff --git a/app/js/components/Ground.js b/app/js/components/Ground.js new file mode 100644 index 0000000..e69de29 diff --git a/app/js/components/Light.js b/app/js/components/Light.js new file mode 100644 index 0000000..d5b6458 --- /dev/null +++ b/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); +} diff --git a/app/js/core/Webgl.js b/app/js/core/Webgl.js index 6103585..dee5798 100644 --- a/app/js/core/Webgl.js +++ b/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; diff --git a/app/js/core/props.js b/app/js/core/props.js index affa16e..d750f2b 100644 --- a/app/js/core/props.js +++ b/app/js/core/props.js @@ -1,5 +1,5 @@ const props = { - rotation: 0.05, + rotation: 0.01, }; module.exports = props; diff --git a/app/main.js b/app/main.js index 6cf756c..d1c8d71 100644 --- a/app/main.js +++ b/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 diff --git a/app/style.css b/app/style.css index e4e622f..552ea0f 100644 --- a/app/style.css +++ b/app/style.css @@ -5,6 +5,7 @@ html, body { width: 100%; height : 100%; color: #f3f3f4; + overflow: hidden; } canvas { diff --git a/brunch-config.coffee b/brunch-config.coffee index 0247863..e59f32f 100644 --- a/brunch-config.coffee +++ b/brunch-config.coffee @@ -9,5 +9,5 @@ exports.config = joinTo: 'app.js' npm: globals: - THREE: 'three' + THREE: 'three-full' dat: 'dat-gui' diff --git a/package-lock.json b/package-lock.json index f7b6e7a..10025bd 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index d729c04..2f60339 100644 --- a/package.json +++ b/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",