質問編集履歴
1
ソースコードの修正
test
CHANGED
File without changes
|
test
CHANGED
@@ -22,24 +22,386 @@
|
|
22
22
|
```
|
23
23
|
これでは、画面時の上部に26px分しか表示されません。
|
24
24
|
|
25
|
-
そこで
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
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
|
よろしくお願いいたします。
|