回答編集履歴

文章構成の修正

2020/03/13 00:11

投稿

s0320318

スコア4

test CHANGED Viewed

@@ -1,429 +1 @@
 自己解決できました！
-```JavaScript
-export default class Slider {
-  constructor() {
-    this.scene = new THREE.Scene();
-    this.uniforms = {
-      intensity: { value: 1, type: 'f', min: 0., max: 3 }
-    };
-    this.renderer = new THREE.WebGLRenderer();
-    this.width = window.innerWidth;
-    this.height = window.innerHeight;
-    this.renderer.setPixelRatio(window.devicePixelRatio);
-    this.renderer.setSize(this.width, this.height);
-    this.renderer.setClearColor(0xeeeeee, 1);
-    this.easing = 'easeInOut'
-    this.container = document.getElementById('slider');
-    this.images = JSON.parse(this.container.getAttribute('data-images'));
-    this.width = this.container.offsetWidth;
-    this.height = this.container.offsetHeight;
-    this.container.appendChild(this.renderer.domElement);
-    this.camera = new THREE.PerspectiveCamera(
-      70,
-      window.innerWidth / window.innerHeight,
-      0.001,
-      1000
-    );
-    this.camera.position.set(0, 0, 2);
-    this.time = 0;
-    this.current = 0;
-    this.textures = [];
-  }
-  init(complete) {
-    this.initiate(() => {
-      window.addEventListener('resize', this.resize.bind(this));
-      this.settings = { progress: 0.5 };
-      Object.keys(this.uniforms).forEach((item) => {
-        this.settings[item] = this.uniforms[item].value;
-      });
-      this.material = new THREE.ShaderMaterial({
-        extensions: {
-          derivatives: '#extension GL_OES_standard_derivatives : enable'
-        },
-        side: THREE.DoubleSide,
-        uniforms: {
-          time: { type: 'f', value: 0 },
-          progress: { type: 'f', value: 0 },
-          border: { type: 'f', value: 0 },
-          intensity: { type: 'f', value: 0 },
-          scaleX: { type: 'f', value: 40 },
-          scaleY: { type: 'f', value: 40 },
-          transition: { type: 'f', value: 40 },
-          swipe: { type: 'f', value: 0 },
-          width: { type: 'f', value: 0 },
-          radius: { type: 'f', value: 0 },
-          texture1: { type: 'f', value: this.textures[0] },
-          texture2: { type: 'f', value: this.textures[1] },
-          displacement: { type: 'f', value: new THREE.TextureLoader().load('disp1.jpg') },
-          resolution: { type: 'v4', value: new THREE.Vector4() },
-          direction: { type: 'f', value: 1 },
-        },
-        vertexShader: `varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`,
-        fragmentShader: `
-          uniform float time;
-          uniform float progress;
-          uniform float intensity;
-          uniform float width;
-          uniform float scaleX;
-          uniform float scaleY;
-          uniform float transition;
-          uniform float radius;
-          uniform float swipe;
-          uniform float direction;
-          uniform sampler2D texture1;
-          uniform sampler2D texture2;
-          uniform sampler2D displacement;
-          uniform vec4 resolution;
-          varying vec2 vUv;
-          mat2 getRotM(float angle) {
-              float s = sin(angle);
-              float c = cos(angle);
-              return mat2(c, -s, s, c);
-          }
-          const float PI = 3.1415;
-          const float angle1 = PI *0.25;
-          const float angle2 = -PI *0.75;
-          void main()  {
-            vec2 newUV = (vUv - vec2(0.5))*resolution.zw + vec2(0.5);
-            vec4 disp = texture2D(displacement, newUV);
-            vec2 dispVec = vec2(disp.r, disp.g);
-            vec2 distortedPosition1 = newUV + getRotM(angle1) * direction * dispVec * intensity * progress;
-            vec4 t1 = texture2D(texture1, distortedPosition1);
-            vec2 distortedPosition2 = newUV + getRotM(angle2) * direction * dispVec * intensity * (1.0 - progress);
-            vec4 t2 = texture2D(texture2, distortedPosition2);
-            gl_FragColor = mix(t1, t2, progress);
-          }
-        `
-      });
-      this.geometry = new THREE.PlaneGeometry(1, 1, 2, 2);
-      this.plane = new THREE.Mesh(this.geometry, this.material);
-      this.scene.add(this.plane);
-      this.resize();
-      this.render();
-      if (typeof complete === 'function') {
-        complete();
-      }
-    });
-  }
-  initiate(cb) {
-    let that = this;
-    let count = 0;
-    const resolve = (complete) => {
-      that.textures[count] = new THREE.TextureLoader().load(this.images[count], () => {
-        count++;
-        if (count < this.images.length) {
-          resolve(complete);
-        } else {
-          complete();
-        }
-      });
-    };
-    resolve(() => {
-      cb();
-    });
-  }
-  resize() {
-    this.width = this.container.offsetWidth;
-    this.height = this.container.offsetHeight;
-    this.renderer.setSize(this.width, this.height);
-    this.camera.aspect = this.width / this.height;
-    this.imageAspect = this.textures[0].image.height/this.textures[0].image.width;
-    let a1; let a2;
-    if(this.height/this.width>this.imageAspect) {
-      a1 = (this.width/this.height) * this.imageAspect ;
-      a2 = 1;
-    } else{
-      a1 = 1;
-      a2 = (this.height/this.width) / this.imageAspect;
-    }
-    this.material.uniforms.resolution.value.x = this.width;
-    this.material.uniforms.resolution.value.y = this.height;
-    this.material.uniforms.resolution.value.z = a1;
-    this.material.uniforms.resolution.value.w = a2;
-    const dist  = this.camera.position.z;
-    const height = 1;
-    this.camera.fov = 2*(180/Math.PI)*Math.atan(height/(2*dist));
-    this.plane.scale.x = this.camera.aspect;
-    this.plane.scale.y = 1;
-    this.camera.updateProjectionMatrix();
-  }
-  itemSwitch(dir, next, duration, complete) {
-    this.material.uniforms.direction.value = dir;
-    this.material.uniforms.texture2.value = this.textures[next];
-    let tl = new TimelineMax();
-    tl.to(this.material.uniforms.progress, duration, {
-      value: 1,
-      ease: Power2[this.easing],
-      onComplete: () => {
-        this.current = next;
-        this.material.uniforms.texture1.value = this.textures[next];
-        this.material.uniforms.progress.value = 0;
-        if (typeof complete === 'function') {
-          complete();
-        }
-    }})
-  }
-  render() {
-    this.time += 0.05;
-    this.material.uniforms.time.value = this.time;
-    Object.keys(this.uniforms).forEach((item)=> {
-      this.material.uniforms[item].value = this.settings[item];
-    });
-    requestAnimationFrame(this.render.bind(this));
-    this.renderer.render(this.scene, this.camera);
-  }
-}
-```