landing

Author: luruke

package-lock.json

@@ -24,7 +24,9 @@
     "glsl-fxaa": "^3.0.0",
     "glslify-bundle": "^5.1.1",
     "glslify-deps": "^1.3.1",
+    "gsap": "^2.1.3",
     "magicshader": "^0.1.2",
+    "math-toolbox": "^1.12.0",
     "orbit-controls-es6": "^2.0.0",
     "parcel-bundler": "^1.12.3",
     "resource-loader": "^2.2.4",

package.json

@@ -4,10 +4,10 @@ import deferred from './utils/deferred';
 
 const Resource = Loader.Resource;
 const RESOURCES = [
-  // {
-  //   name: 'photo',
-  //   url: require('/assets/photo.jpg')
-  // },
+  {
+    name: 'texture',
+    url: require('/assets/texture.png')
+  },
 
   // {
   //   name: 'photo',

src/assets/texture.png

@@ -2,14 +2,23 @@ import { PerspectiveCamera, Vector3 } from 'three';
 import { component } from 'bidello';
 import OrbitControls from 'orbit-controls-es6';
 import renderer from './renderer';
+import { map, lerp } from 'math-toolbox';
 
 class Camera extends component(PerspectiveCamera) {
   constructor() {
     super(35, 0, 0.1, 500);
 
     this.position.set(0, 0, -10);
     this.lookAt(new Vector3(0, 0, 0));
-    this.initOrbitControl();
+    // this.initOrbitControl();
+
+    this.x = 0;
+    this.y = 0;
+
+    document.addEventListener('mousemove', e => {
+      this.x = map(e.clientX, 0, window.innerWidth, -7, 7);
+      this.y = map(e.clientY, 0, window.innerHeight, -5, 5);
+    })
   }
 
   initOrbitControl() {
@@ -23,6 +32,20 @@ class Camera extends component(PerspectiveCamera) {
   onResize({ ratio }) {
     this.aspect = ratio;
     this.updateProjectionMatrix();
+    this.calculateUnitSize(ratio);
+  }
+
+  calculateUnitSize(ratio) {
+    const vFov = this.fov * Math.PI / 180;
+
+    this.unitHeight = 2 * Math.tan(vFov / 2) * 20; // 15 was the original pos
+    this.unitWidth = this.unitHeight * ratio;
+  }
+  
+  onRaf({ delta }) {
+    this.position.x = lerp(this.position.x, this.x, .06);
+    this.position.y = lerp(this.position.y, this.y, .06);
+    this.lookAt(new Vector3(0, 0, 0));
   }
 }
 

src/js/assets.js

@@ -1,5 +1,6 @@
 precision highp float;
 
+uniform sampler2D uTex;
 uniform vec3 color; // ms({ value: '#ff0000' })
 uniform float xAlpha; // ms({ value: 0, step: 0.01, range: [0, 1] })
 
@@ -9,13 +10,15 @@ varying float vDelay;
 void main(){
   // float alpha = step(xAlpha, vUv.x);
 
-  // if (vUv.x<=.001||vUv.x>=.998){
+  // if (vUv.x <=.001 || vUv.x>=.998){
   //   discard;
   // }
+
+  vec3 color = texture2D(uTex, vUv).rgb;
 
-  if (vUv.x<1.-xAlpha){
+  if (vUv.x > xAlpha){
     discard;
   }
 
-  gl_FragColor = vec4(vUv,1.,1.);
+  gl_FragColor = vec4(color, 1.);
 }

src/js/camera.js

@@ -4,28 +4,71 @@ import {
   BufferGeometryLoader,
   Mesh,
   DoubleSide,
+  Texture,
+  RepeatWrapping,
+  NearestFilter,
 } from 'three';
+import { TweenMax, Elastic } from 'gsap/all';
 import cubeData from './cube.json';
-import MagicShader from 'magicshader';
+import MagicShader, { gui } from 'magicshader';
+import assets from '../assets';
+import camera from '../camera';
 
 export default class extends component(Object3D) {
   init() {
     this.geometry = new BufferGeometryLoader().parse(cubeData);
+    this.geometry.rotateX(Math.PI / 2);
+    this.geometry.rotateZ(Math.PI / 2);
+    this.geometry.rotateX(-Math.PI / 2);
 
+    
     this.material = new MagicShader({
       name: 'Cube',
       vertexShader: require('./cube.vert'),
       fragmentShader: require('./cube.frag'),
+      uniforms: {
+        uTex: { value: new Texture() },
+        uTime: { value: 0 },
+      },
       side: DoubleSide,
     });
 
-    this.mesh = new Mesh(this.geometry, this.material);
+    assets.resources.texture.loading.then(() => {
+      this.material.uniforms.uTex.value = new Texture(assets.resources.texture.meta.data);
+      this.material.uniforms.uTex.value.anisotropy = 16;
+      this.material.uniforms.uTex.value.wrapS = RepeatWrapping;
+      this.material.uniforms.uTex.value.wrapT = RepeatWrapping;
+      // this.material.uniforms.uTex.value.minFilter = NearestFilter;
+      // this.material.uniforms.uTex.value.magFilter = NearestFilter;
+      this.material.uniforms.uTex.value.needsUpdate = true;
+    });
+
+    TweenMax.to(this.material.uniforms.xAlpha, 2, {
+      // delay: 2,
+      value: 1,
+      ease: 'Power4.easeInOut',
+    });
+
+    TweenMax.to(this.material.uniforms.uForce, 2, {
+      delay: 2.4,
+      value: 0.32,
+      ease: Elastic.easeOut.config(1, 0.3),
+    });
 
+    this.mesh = new Mesh(this.geometry, this.material);
     this.add(this.mesh);
+
+    gui.destroy();
+  }
+
+  onResize() {
+    // this.unitWidth
+    this.scale.setScalar(camera.unitWidth * 0.04);
   }
 
   onRaf({ delta }) {
-    this.mesh.rotation.x += 0.3 * delta;
-    this.mesh.rotation.y += 0.3 * delta;
+    this.material.uniforms.uTime.value += delta;
+    // this.mesh.rotation.x += 0.3 * delta;
+    // this.mesh.rotation.y += 0.3 * delta;
   }
 }

src/js/cube/cube.frag

@@ -7,9 +7,10 @@ attribute float delay;
 
 uniform mat4 modelViewMatrix;
 uniform mat4 projectionMatrix;
-uniform float uSpeed;// ms({ value: 0.0, step: 0.001, range: [-10, 10] })
-uniform float uForce;// ms({ value: 0.0, step: 0.001, range: [-10, 10] })
-uniform float uRotation;// ms({ value: -0.35, step: 0.001, range: [-1, 1] })
+uniform float uSpeed; // ms({ value: 0.0, step: 0.001, range: [-10, 10] })
+uniform float uForce; // ms({ value: 0.0, step: 0.001, range: [-10, 10] })
+uniform float uRotation; // ms({ value: -0.35, step: 0.001, range: [-1, 1] })
+uniform float uTime;
 
 varying vec2 vUv;
 varying float vDelay;
@@ -48,11 +49,11 @@ void main(){
   float force=pos.x*uForce;
 
   pos.xyz+=pivot;
-  pos=pos*rotateX(force+uSpeed);
+  pos=pos*rotateX(force+uTime * 3.0);
   // vNormal = vNormal * rotateX(-(force + speed));
   pos.xyz-=pivot;
 
-  pos=pos*rotateZ(uRotation);
+  // pos=pos*rotateZ(uRotation);
 
   pos+=offset;
 

src/js/cube/cube.js

@@ -1,12 +1,15 @@
 import { WebGLRenderer } from 'three';
 import { component } from 'bidello';
+import settings from './settings';
 
 class Renderer extends component(WebGLRenderer) {
   constructor() {
     super({
       powerPreference: 'high-performance',
       antialiasing: false,
     })
+
+    this.setPixelRatio(settings.dpr);
   }
 
   onResize({ width, height }) {