質問編集履歴

1

ソースコードの修正

2022/08/31 02:03

投稿

m_y_kame
m_y_kame

スコア14

test CHANGED
File without changes
test CHANGED
@@ -22,24 +22,386 @@
22
22
  ```
23
23
  これでは、画面時の上部に26px分しか表示されません。
24
24
 
25
- そこで下記のように、cssで指定をました。
26
- 高さに関しては仮の高さを記述ています
27
- ### 該当のソースコード
28
-
29
- ```css
30
- .slider canvas {
31
- width: 100%;
32
- height: 1000px;
33
-   position: absolute;
34
-    left: 0;
35
-   top: 0;
36
-   right: 0;
37
-   bottom: 0;
38
- }
25
+ そこでcssで高さや横幅の指定を行いました。
26
+ ですがそれでも修正ができませんで
27
+
28
+ また、下記js上での、setSize()を触ってみたりもしましたが変更しませんでした。
29
+ 指定するとしたら下記コードをどのように記述するのが良いでしょうか?
30
+
31
+ ```javascript
32
+ class Slider {
33
+ constructor() {
34
+ this.bindAll();
35
+
36
+ this.vert = `
37
+ varying vec2 vUv;
38
+ void main() {
39
+ vUv = uv;
40
+ gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
41
+ }
42
+ `;
43
+
44
+ this.frag = `
45
+ varying vec2 vUv;
46
+
47
+ uniform sampler2D texture1;
48
+ uniform sampler2D texture2;
49
+ uniform sampler2D disp;
50
+
51
+ uniform float dispPower;
52
+ uniform float intensity;
53
+
54
+ uniform vec2 size;
55
+ uniform vec2 res;
56
+
57
+ vec2 backgroundCoverUv( vec2 screenSize, vec2 imageSize, vec2 uv ) {
58
+ float screenRatio = screenSize.x / screenSize.y;
59
+ float imageRatio = imageSize.x / imageSize.y;
60
+ vec2 newSize = screenRatio < imageRatio
61
+ ? vec2(imageSize.x * (screenSize.y / imageSize.y), screenSize.y)
62
+ : vec2(screenSize.x, imageSize.y * (screenSize.x / imageSize.x));
63
+ vec2 newOffset = (screenRatio < imageRatio
64
+ ? vec2((newSize.x - screenSize.x) / 2.0, 0.0)
65
+ : vec2(0.0, (newSize.y - screenSize.y) / 2.0)) / newSize;
66
+ return uv * screenSize / newSize + newOffset;
67
+ }
68
+
69
+ void main() {
70
+ vec2 uv = vUv;
71
+
72
+ vec4 disp = texture2D(disp, uv);
73
+ vec2 dispVec = vec2(disp.x, disp.y);
74
+
75
+ vec2 distPos1 = uv + (dispVec * intensity * dispPower);
76
+ vec2 distPos2 = uv + (dispVec * -(intensity * (1.0 - dispPower)));
77
+
78
+ vec4 _texture1 = texture2D(texture1, distPos1);
79
+ vec4 _texture2 = texture2D(texture2, distPos2);
80
+
81
+ gl_FragColor = mix(_texture1, _texture2, dispPower);
82
+ }
83
+ `;
84
+
85
+ this.el = document.querySelector('.js-slider');
86
+ this.inner = this.el.querySelector('.js-slider__inner'); //()内クラスを呼び出し
87
+ this.slides = [...this.el.querySelectorAll('.js-slide')];
88
+ this.bullets = [...this.el.querySelectorAll('.js-slider-bullet')];
89
+
90
+ this.renderer = null; //初期値を空白の状態にする
91
+ this.scene = null;
92
+ this.clock = null;
93
+ this.camera = null;
94
+
95
+
96
+
97
+ //ここに希望画像を挿入する
98
+ this.images = [
99
+ 'img/eyecatch.jpg',
100
+ 'img/1.jpg',
101
+ 'img/2.jpg'];
102
+
103
+
104
+ this.data = {
105
+ current: 0,
106
+ next: 1,
107
+ total: this.images.length - 1,
108
+ delta: 0 };
109
+
110
+
111
+ this.state = {
112
+ animating: false,
113
+ text: false,
114
+ initial: true };
115
+
116
+
117
+ this.textures = null;
118
+
119
+ this.init();
120
+ }
121
+
122
+ bindAll() {
123
+ ['render', 'nextSlide'].
124
+ forEach(fn => this[fn] = this[fn].bind(this));
125
+ }
126
+
127
+ setStyles() {
128
+ this.slides.forEach((slide, index) => { //繰り返し作業をする forEach
129
+ if (index === 0) return;
130
+
131
+ TweenMax.set(slide, { autoAlpha: 0 }); //初期状態としてopacity: 0;とvisibility: hidden;が指定される
132
+ });
133
+
134
+ this.bullets.forEach((bullet, index) => {
135
+ if (index === 0) return;
136
+
137
+ const txt = bullet.querySelector('.js-slider-bullet__text');
138
+ const line = bullet.querySelector('.js-slider-bullet__line');
139
+
140
+ TweenMax.set(txt, {
141
+ alpha: 0.25 });
142
+
143
+ TweenMax.set(line, {
144
+ scaleX: 0,
145
+ transformOrigin: 'left' });
146
+
147
+ });
148
+ }
149
+
150
+ cameraSetup() {
151
+ this.camera = new THREE.OrthographicCamera( //平行投影を表現するカメラ設定
152
+ this.el.offsetWidth / -2, // new THREE.OrthographicCamera(left, right, top, bottom, near, far)
153
+ this.el.offsetWidth / 2,
154
+ this.el.offsetHeight / 2,
155
+ this.el.offsetHeight / -2,
156
+ 1,
157
+ 1000);
158
+
159
+
160
+ this.camera.lookAt(this.scene.position); //どの位置からでも指定した座標に強制的に向かせることができる 
161
+ this.camera.position.z = 1;
162
+ }
163
+
164
+ setup() {
165
+ this.scene = new THREE.Scene();
166
+ this.clock = new THREE.Clock(true);
167
+
168
+ this.renderer = new THREE.WebGLRenderer({ alpha: true });
169
+ this.renderer.setPixelRatio(window.devicePixelRatio);
170
+ this.renderer.setSize(this.el.offsetWidth, this.el.offsetHeight); //サイズ設定
171
+
172
+ this.inner.appendChild(this.renderer.domElement); //子要素を追加
173
+ }
174
+
175
+ loadTextures() {
176
+ const loader = new THREE.TextureLoader();
177
+ loader.crossOrigin = '';
178
+
179
+ this.textures = [];
180
+ this.images.forEach((image, index) => {
181
+ const texture = loader.load(image + '?v=' + Date.now(), this.render);
182
+
183
+ texture.minFilter = THREE.LinearFilter;
184
+ texture.generateMipmaps = false;
185
+
186
+ if (index === 0 && this.mat) {
187
+ this.mat.uniforms.size.value = [
188
+ texture.image.naturalWidth,
189
+ texture.image.naturalHeight];
190
+
191
+ }
192
+
193
+ this.textures.push(texture);
194
+ });
195
+
196
+
197
+
198
+ //ここにスライド時の模様を指定する
199
+ this.disp = loader.load('img/rock-_disp.png', this.render);
200
+ this.disp.magFilter = this.disp.minFilter = THREE.LinearFilter;
201
+ this.disp.wrapS = this.disp.wrapT = THREE.RepeatWrapping;
202
+ }
203
+
204
+ createMesh() {
205
+ this.mat = new THREE.ShaderMaterial({
206
+ uniforms: {
207
+ dispPower: { type: 'f', value: 0.0 },
208
+ intensity: { type: 'f', value: 0.5 },
209
+ res: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
210
+ size: { value: new THREE.Vector2(1, 1) },
211
+ texture1: { type: 't', value: this.textures[0] },
212
+ texture2: { type: 't', value: this.textures[1] },
213
+ disp: { type: 't', value: this.disp } },
214
+
215
+ transparent: true,
216
+ vertexShader: this.vert,
217
+ fragmentShader: this.frag });
218
+
219
+
220
+ const geometry = new THREE.PlaneBufferGeometry(
221
+ this.el.offsetWidth,
222
+ this.el.offsetHeight,
223
+ 1);
224
+
225
+
226
+ const mesh = new THREE.Mesh(geometry, this.mat);
227
+
228
+ this.scene.add(mesh);
229
+ }
230
+
231
+ transitionNext() {
232
+ TweenMax.to(this.mat.uniforms.dispPower, 2.5, {
233
+ value: 1,
234
+ ease: Expo.easeInOut,
235
+ onUpdate: this.render,
236
+ onComplete: () => {
237
+ this.mat.uniforms.dispPower.value = 0.0;
238
+ this.changeTexture();
239
+ this.render.bind(this);
240
+ this.state.animating = false;
241
+ } });
242
+
243
+
244
+ const current = this.slides[this.data.current];
245
+ const next = this.slides[this.data.next];
246
+
247
+ const currentImages = current.querySelectorAll('.js-slide__img');
248
+ const nextImages = next.querySelectorAll('.js-slide__img');
249
+
250
+ const currentText = current.querySelectorAll('.js-slider__text-line div');
251
+ const nextText = next.querySelectorAll('.js-slider__text-line div');
252
+
253
+ const currentBullet = this.bullets[this.data.current];
254
+ const nextBullet = this.bullets[this.data.next];
255
+
256
+ const currentBulletTxt = currentBullet.querySelectorAll('.js-slider-bullet__text');
257
+ const nextBulletTxt = nextBullet.querySelectorAll('.js-slider-bullet__text');
258
+
259
+ const currentBulletLine = currentBullet.querySelectorAll('.js-slider-bullet__line');
260
+ const nextBulletLine = nextBullet.querySelectorAll('.js-slider-bullet__line');
261
+
262
+ const tl = new TimelineMax({ paused: true });
263
+
264
+ if (this.state.initial) {
265
+ TweenMax.to('.js-scroll', 1.5, {
266
+ yPercent: 100,
267
+ alpha: 0,
268
+ ease: Power4.easeInOut });
269
+
270
+
271
+ this.state.initial = false;
272
+ }
273
+
274
+ tl.
275
+ staggerFromTo(currentImages, 1.5, {
276
+ yPercent: 0,
277
+ scale: 1 },
278
+ {
279
+ yPercent: -185,
280
+ scaleY: 1.5,
281
+ ease: Expo.easeInOut },
282
+ 0.075).
283
+ to(currentBulletTxt, 1.5, {
284
+ alpha: 0.25,
285
+ ease: Linear.easeNone },
286
+ 0).
287
+ set(currentBulletLine, {
288
+ transformOrigin: 'right' },
289
+ 0).
290
+ to(currentBulletLine, 1.5, {
291
+ scaleX: 0,
292
+ ease: Expo.easeInOut },
293
+ 0);
294
+
295
+ if (currentText) {
296
+ tl.
297
+ fromTo(currentText, 2, {
298
+ yPercent: 0 },
299
+ {
300
+ yPercent: -100,
301
+ ease: Power4.easeInOut },
302
+ 0);
303
+ }
304
+
305
+ tl.
306
+ set(current, {
307
+ autoAlpha: 0 }).
308
+
309
+ set(next, {
310
+ autoAlpha: 1 },
311
+ 1);
312
+
313
+ if (nextText) {
314
+ tl.
315
+ fromTo(nextText, 2, {
316
+ yPercent: 100 },
317
+ {
318
+ yPercent: 0,
319
+ ease: Power4.easeOut },
320
+ 1.5);
321
+ }
322
+
323
+ tl.
324
+ staggerFromTo(nextImages, 1.5, {
325
+ yPercent: 150,
326
+ scaleY: 1.5 },
327
+ {
328
+ yPercent: 0,
329
+ scaleY: 1,
330
+ ease: Expo.easeInOut },
331
+ 0.075, 1).
332
+ to(nextBulletTxt, 1.5, {
333
+ alpha: 1,
334
+ ease: Linear.easeNone },
335
+ 1).
336
+ set(nextBulletLine, {
337
+ transformOrigin: 'left' },
338
+ 1).
339
+ to(nextBulletLine, 1.5, {
340
+ scaleX: 1,
341
+ ease: Expo.easeInOut },
342
+ 1);
343
+
344
+ tl.play();
345
+ }
346
+
347
+ prevSlide() {
348
+
349
+ }
350
+
351
+ nextSlide() {
352
+ if (this.state.animating) return;
353
+
354
+ this.state.animating = true;
355
+
356
+ this.transitionNext();
357
+
358
+ this.data.current = this.data.current === this.data.total ? 0 : this.data.current + 1;
359
+ this.data.next = this.data.current === this.data.total ? 0 : this.data.current + 1;
360
+ }
361
+
362
+ changeTexture() {
363
+ this.mat.uniforms.texture1.value = this.textures[this.data.current];
364
+ this.mat.uniforms.texture2.value = this.textures[this.data.next];
365
+ }
366
+
367
+ listeners() {
368
+ //window.addEventListener('wheel', this.nextSlide, { passive: true });  //マウスホイールでスライドを消す
369
+ setInterval(this.nextSlide, 1000, { passive: true }); //自動スライドに設定 1000=1秒ごとにスライド
370
+ }
371
+
372
+ render() {
373
+ this.renderer.render(this.scene, this.camera);
374
+ }
375
+
376
+ init() {
377
+ this.setup();
378
+ this.cameraSetup();
379
+ this.loadTextures();
380
+ this.createMesh();
381
+ this.setStyles();
382
+ this.render();
383
+ this.listeners();
384
+ }}
385
+
386
+
387
+ // Toggle active link
388
+ const links = document.querySelectorAll('.js-nav a');
389
+
390
+ links.forEach(link => {
391
+ link.addEventListener('click', e => {
392
+ e.preventDefault();
393
+ links.forEach(other => other.classList.remove('is-active'));
394
+ link.classList.add('is-active');
395
+ });
396
+ });
397
+
398
+ // Init classes
399
+ const slider = new Slider();
400
+
401
+
402
+
403
+
39
404
  ```
40
-
41
- ですが、これでもcanvasのサイズが変更してくれず最初と同じままでした。
42
- Three.jsのソースを確認してみましたがどの部分が関係しているのかが全く分からない状態です。
43
405
 
44
406
  canvansのサイズ変更の経験がある方、これに関して分かる方いらっしゃいましたら教えていただきたいです。
45
407
  よろしくお願いいたします。