前提
WebGLを使用して画像のスライドを実装したい。
実現したいこと
下記参考サイトを使用して、画像のスライドを作成しました。
https://kohimoto.com/labo/study/%e7%94%bb%e5%83%8f%e3%81%8c%e3%81%90%e3%81%ab%e3%82%83%e3%81%a3%e3%81%a8%e5%88%87%e3%82%8a%e6%9b%bf%e3%82%8f%e3%82%8b%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%89%e3%81%ae%e4%bd%9c%e3%82%8a%e6%96%b9-webgl/
実際に自分で作成したのがこちらです↓
https://www.telln.com/kunren0117/mm/slide/
これの画像を変更して、オリジナルのスライドスライドを作成したいです。
jsは、TweenMax.min.jsとthree.min.jsを使用しています。
発生している問題・エラーメッセージ
現在は、参考サイトの通りのそのままの画像を入れています。
参考サイト下部では、jsの画像設定の部分のみ画像の変更をすればスライドができると書いてあるので、
this.images = [ //画像変更 "https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/bg1.jpg", "https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/bg2.jpg", "https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/bg3.jpg"];
webgl_slider.js内の64段目の部分↑を下記のように変更しました。
this.images = [ //画像変更 "img/eyecatch.jpg", "img/1.jpg", "img/2.jpg"];
そうすると画像が表示されなくなってしまいます。
また、スライドの間に挟まれる画像がこのスライドでは、設定されています。
その設定で使用されている画像をローカルに落とし使用したのですが、それをに書き換えると、
スライドの際の効果が無くなってしまいました。
this.disp = loader.load("https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/rock-_disp.png", this.render); //←ここです。 this.disp.magFilter = this.disp.minFilter = THREE.LinearFilter; this.disp.wrapS = this.disp.wrapT = THREE.RepeatWrapping;
this.disp = loader.load("img/rock-_disp.png", this.render); //←ここです。 this.disp.magFilter = this.disp.minFilter = THREE.LinearFilter; this.disp.wrapS = this.disp.wrapT = THREE.RepeatWrapping;
画像の階層の変更をしたり、ソースの変更をしてみたりしましたが、
上手く実装することができませんでした。
長くなってしまいましたが、この2点について何かアドバイスいただけますとありがたいです。
よろしくお願いいたします。
あなたの回答
tips
プレビュー