Three.jsを使用したwebサイトの作成をし、画面スクロールができるようにしたい。

前提

アイキャッチでwebglを使用したスライドをしたうえで、
画面スクロールができるように設定したいです。

実現したいこと

作成中のwebサイトにスライドを入れることができたのですが、そのスライド実装すると、画面スクロールができません。

はじめは、スライドのサイズの問題かと思い、そのサイズの変更を試してみましたが、それではなく、そもそもそのスライドがスクロールに対応していないことが原因だと分かりました。

javascript
1class Slider {
2  constructor() {
3    this.bindAll();
4
5    this.vert = `
6    varying vec2 vUv;
7    void main() {
8      vUv = uv;
9      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
10    }
11    `;
12
13    this.frag = `
14    varying vec2 vUv;
15
16    uniform sampler2D texture1;
17    uniform sampler2D texture2;
18    uniform sampler2D disp;
19
20    uniform float dispPower;
21    uniform float intensity;
22
23    uniform vec2 size;
24    uniform vec2 res;
25
26    vec2 backgroundCoverUv( vec2 screenSize, vec2 imageSize, vec2 uv ) {
27      float screenRatio = screenSize.x / screenSize.y;
28      float imageRatio = imageSize.x / imageSize.y;
29      vec2 newSize = screenRatio < imageRatio 
30          ? vec2(imageSize.x * (screenSize.y / imageSize.y), screenSize.y)
31          : vec2(screenSize.x, imageSize.y * (screenSize.x / imageSize.x));
32      vec2 newOffset = (screenRatio < imageRatio 
33          ? vec2((newSize.x - screenSize.x) / 2.0, 0.0) 
34          : vec2(0.0, (newSize.y - screenSize.y) / 2.0)) / newSize;
35      return uv * screenSize / newSize + newOffset;
36    }
37
38    void main() {
39      vec2 uv = vUv;
40      
41      vec4 disp = texture2D(disp, uv);
42      vec2 dispVec = vec2(disp.x, disp.y);
43      
44      vec2 distPos1 = uv + (dispVec * intensity * dispPower);
45      vec2 distPos2 = uv + (dispVec * -(intensity * (1.0 - dispPower)));
46      
47      vec4 _texture1 = texture2D(texture1, distPos1);
48      vec4 _texture2 = texture2D(texture2, distPos2);
49      
50      gl_FragColor = mix(_texture1, _texture2, dispPower);
51    }
52    `;
53
54    this.el = document.querySelector('.js-slider');
55    this.inner = this.el.querySelector('.js-slider__inner');
56    this.slides = [...this.el.querySelectorAll('.js-slide')];
57    this.bullets = [...this.el.querySelectorAll('.js-slider-bullet')];
58
59    this.renderer = null;
60    this.scene = null;
61    this.clock = null;
62    this.camera = null;
63
64    this.images = [
65    'img/eyecatch.jpg',
66    'img/1.jpg',
67    'img/2.jpg'];
68
69
70    this.data = {
71      current: 0,
72      next: 1,
73      total: this.images.length - 1,
74      delta: 0 };
75
76
77    this.state = {
78      animating: false,
79      text: false,
80      initial: true };
81
82
83    this.textures = null;
84
85    this.init();
86  }
87
88  bindAll() {
89    ['render', 'nextSlide'].
90    forEach(fn => this[fn] = this[fn].bind(this));
91  }
92
93  setStyles() {
94    this.slides.forEach((slide, index) => {
95      if (index === 0) return;
96
97      TweenMax.set(slide, { autoAlpha: 0 });
98    });
99
100    this.bullets.forEach((bullet, index) => {
101      if (index === 0) return;
102
103      const txt = bullet.querySelector('.js-slider-bullet__text');
104      const line = bullet.querySelector('.js-slider-bullet__line');
105
106      TweenMax.set(txt, {
107        alpha: 0.25 });
108
109      TweenMax.set(line, {
110        scaleX: 0,
111        transformOrigin: 'left' });
112
113    });
114  }
115
116  cameraSetup() {
117    this.camera = new THREE.OrthographicCamera(
118    this.el.offsetWidth / -2,
119    this.el.offsetWidth / 2,
120    this.el.offsetHeight / 2,
121    this.el.offsetHeight / -2,
122    1,
123    1000);
124
125
126    this.camera.lookAt(this.scene.position);
127    this.camera.position.z = 1;
128  }
129
130  setup() {
131    this.scene = new THREE.Scene();
132    this.clock = new THREE.Clock(true);
133
134    this.renderer = new THREE.WebGLRenderer({ alpha: true });
135    this.renderer.setPixelRatio(window.devicePixelRatio);
136    this.renderer.setSize(this.el.offsetWidth, this.el.offsetHeight);
137
138    this.inner.appendChild(this.renderer.domElement);
139  }
140
141  loadTextures() {
142    const loader = new THREE.TextureLoader();
143    loader.crossOrigin = '';
144
145    this.textures = [];
146    this.images.forEach((image, index) => {
147      const texture = loader.load(image + '?v=' + Date.now(), this.render);
148
149      texture.minFilter = THREE.LinearFilter;
150      texture.generateMipmaps = false;
151
152      if (index === 0 && this.mat) {
153        this.mat.uniforms.size.value = [
154        texture.image.naturalWidth,
155        texture.image.naturalHeight];
156
157      }
158
159      this.textures.push(texture);
160    });
161
162    this.disp = loader.load('https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/rock-_disp.png', this.render);
163    this.disp.magFilter = this.disp.minFilter = THREE.LinearFilter;
164    this.disp.wrapS = this.disp.wrapT = THREE.RepeatWrapping;
165  }
166
167  createMesh() {
168    this.mat = new THREE.ShaderMaterial({
169      uniforms: {
170        dispPower: { type: 'f', value: 0.0 },
171        intensity: { type: 'f', value: 0.5 },
172        res: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
173        size: { value: new THREE.Vector2(1, 1) },
174        texture1: { type: 't', value: this.textures[0] },
175        texture2: { type: 't', value: this.textures[1] },
176        disp: { type: 't', value: this.disp } },
177
178      transparent: true,
179      vertexShader: this.vert,
180      fragmentShader: this.frag });
181
182
183    const geometry = new THREE.PlaneBufferGeometry(
184    this.el.offsetWidth,
185    this.el.offsetHeight,
186    1);
187
188
189    const mesh = new THREE.Mesh(geometry, this.mat);
190
191    this.scene.add(mesh);
192  }
193
194  transitionNext() {
195    TweenMax.to(this.mat.uniforms.dispPower, 2.5, {
196      value: 1,
197      ease: Expo.easeInOut,
198      onUpdate: this.render,
199      onComplete: () => {
200        this.mat.uniforms.dispPower.value = 0.0;
201        this.changeTexture();
202        this.render.bind(this);
203        this.state.animating = false;
204      } });
205
206
207    const current = this.slides[this.data.current];
208    const next = this.slides[this.data.next];
209
210    const currentImages = current.querySelectorAll('.js-slide__img');
211    const nextImages = next.querySelectorAll('.js-slide__img');
212
213    const currentText = current.querySelectorAll('.js-slider__text-line div');
214    const nextText = next.querySelectorAll('.js-slider__text-line div');
215
216    const currentBullet = this.bullets[this.data.current];
217    const nextBullet = this.bullets[this.data.next];
218
219    const currentBulletTxt = currentBullet.querySelectorAll('.js-slider-bullet__text');
220    const nextBulletTxt = nextBullet.querySelectorAll('.js-slider-bullet__text');
221
222    const currentBulletLine = currentBullet.querySelectorAll('.js-slider-bullet__line');
223    const nextBulletLine = nextBullet.querySelectorAll('.js-slider-bullet__line');
224
225    const tl = new TimelineMax({ paused: true });
226
227    if (this.state.initial) {
228      TweenMax.to('.js-scroll', 1.5, {
229        yPercent: 100,
230        alpha: 0,
231        ease: Power4.easeInOut });
232
233
234      this.state.initial = false;
235    }
236
237    tl.
238    staggerFromTo(currentImages, 1.5, {
239      yPercent: 0,
240      scale: 1 },
241    {
242      yPercent: -185,
243      scaleY: 1.5,
244      ease: Expo.easeInOut },
245    0.075).
246    to(currentBulletTxt, 1.5, {
247      alpha: 0.25,
248      ease: Linear.easeNone },
249    0).
250    set(currentBulletLine, {
251      transformOrigin: 'right' },
252    0).
253    to(currentBulletLine, 1.5, {
254      scaleX: 0,
255      ease: Expo.easeInOut },
256    0);
257
258    if (currentText) {
259      tl.
260      fromTo(currentText, 2, {
261        yPercent: 0 },
262      {
263        yPercent: -100,
264        ease: Power4.easeInOut },
265      0);
266    }
267
268    tl.
269    set(current, {
270      autoAlpha: 0 }).
271
272    set(next, {
273      autoAlpha: 1 },
274    1);
275
276    if (nextText) {
277      tl.
278      fromTo(nextText, 2, {
279        yPercent: 100 },
280      {
281        yPercent: 0,
282        ease: Power4.easeOut },
283      1.5);
284    }
285
286    tl.
287    staggerFromTo(nextImages, 1.5, {
288      yPercent: 150,
289      scaleY: 1.5 },
290    {
291      yPercent: 0,
292      scaleY: 1,
293      ease: Expo.easeInOut },
294    0.075, 1).
295    to(nextBulletTxt, 1.5, {
296      alpha: 1,
297      ease: Linear.easeNone },
298    1).
299    set(nextBulletLine, {
300      transformOrigin: 'left' },
301    1).
302    to(nextBulletLine, 1.5, {
303      scaleX: 1,
304      ease: Expo.easeInOut },
305    1);
306
307    tl.play();
308  }
309
310  prevSlide() {
311
312  }
313
314  nextSlide() {
315    if (this.state.animating) return;
316
317    this.state.animating = true;
318
319    this.transitionNext();
320
321    this.data.current = this.data.current === this.data.total ? 0 : this.data.current + 1;
322    this.data.next = this.data.current === this.data.total ? 0 : this.data.current + 1;
323  }
324
325  changeTexture() {
326    this.mat.uniforms.texture1.value = this.textures[this.data.current];
327    this.mat.uniforms.texture2.value = this.textures[this.data.next];
328  }
329
330  listeners() {
331    //window.addEventListener('wheel', this.nextSlide, { passive: true });　　//マウスホイールでスライドを消す
332	  setInterval(this.nextSlide, 1000, { passive: true }); //自動スライドに設定
333  }
334
335  render() {
336    this.renderer.render(this.scene, this.camera);
337  }
338
339  init() {
340    this.setup();
341    this.cameraSetup();
342    this.loadTextures();
343    this.createMesh();
344    this.setStyles();
345    this.render();
346    this.listeners();
347  }}
348
349
350// Toggle active link
351const links = document.querySelectorAll('.js-nav a');
352
353links.forEach(link => {
354  link.addEventListener('click', e => {
355    e.preventDefault();
356    links.forEach(other => other.classList.remove('is-active'));
357    link.classList.add('is-active');
358  });
359});
360
361// Init classes
362const slider = new Slider();