質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

WebGL

WebGL(ウェブジーエル)は、ウェブブラウザで 3次元コンピュータグラフィックスを表示させるための標準仕様です。

Q&A

解決済

1回答

1047閲覧

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

m_y_kameta

総合スコア14

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

WebGL

WebGL(ウェブジーエル)は、ウェブブラウザで 3次元コンピュータグラフィックスを表示させるための標準仕様です。

0グッド

0クリップ

投稿2022/08/31 05:59

前提

アイキャッチで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();

Three.jsを使用してウェブサイトを作詞絵したことがある方、スクロールの設定方法が分かる方いらっしゃいましたら
ご教唆お願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

css上で、overflow:hiden;がかかっていた為、それを解除したら
スクロールが可能になりました。

投稿2022/08/31 07:50

m_y_kameta

総合スコア14

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問