前提
Three.jsでWebGLを操作して、下記URLのようなスライドを
アイキャッチとして配置をしたいです。
https://codepen.io/ReGGae/pen/bmyYEj
実現したいこと
自作ホームページへ実装することができましたが、スライド部分のサイズが合いません。
画面いっぱいに表示されるように指定したいです。
発生している問題・エラーメッセージ
今回、canvasを使用しているのですが、htmlには記述せず、Three.jsでcanvasが追加されるようになっていると解釈しています。
実装したのち、開発ツールで確認すると下記のようになっていました。
<div class="slider__inner js-slider__inner"> <canvas width="1903" height="26" style="width: 1903px; height: 26px;"></canvas> </div>
これでは、画面時の上部に26px分しか表示されません。
そこで下記のように、cssで指定をしました。
高さに関しては、仮の高さを記述しています。
該当のソースコード
css
.slider canvas { width: 100%; height: 1000px; position: absolute; left: 0; top: 0; right: 0; bottom: 0;}
ですが、これでもcanvasのサイズが変更してくれず最初と同じままでした。
Three.jsのソースを確認してみましたがどの部分が関係しているのかが全く分からない状態です。
canvansのサイズ変更の経験がある方、これに関して分かる方いらっしゃいましたら教えていただきたいです。
よろしくお願いいたします。
0 コメント