マウス情報をメッシュで受け取る方法
negl では data-interactive 属性を HTML タグに付与することで、マウスの情報をメッシュで受け取れるようになります。実際に以下の手順で確認してみましょう。
エフェクトのダウンロード
まずはmouse-splitエフェクトをダウンロード＆解凍して、src/scripts/parts フォルダに配置してください。
HTML に属性を追加する
では HTML から mouse-split エフェクトを読み込んでみましょう。以下のように HTML タグのdata-webgl属性に、mouse-split を設定してください。
index.html
<div class="page-container">
<!-- data-webgl属性の値としてmouse-splitを設定 -->
<div
data-webgl="mouse-split"
class="test-effect"
data-tex-1="/img/dog.jpg"
data-tex-2="/img/cat.jpg"
></div>
<style>
.test-effect {
width: 500px;
height: 500px;
}
</style>
</div>これで画面を更新すると mouse-split のエフェクトが画面に表示されます。しかし、マウスの位置よるアニメーションはまだ動いていない状態です。
では、次にdata-interactive属性を追加しましょう。（属性値の設定は必要ありません。）
index.html
<div class="page-container">
<!-- data-interactive属性を追加 -->
<div
data-interactive
data-webgl="mouse-split"
class="test-effect"
data-tex-1="/img/dog.jpg"
data-tex-2="/img/cat.jpg"
></div>
<style>
.test-effect {
width: 500px;
height: 500px;
}
</style>
</div>これでマウスカーソルに合わせてアニメーションが実行されます。実際に画面で確認してみてください。
マウス情報の受け取りの詳細は応用編 (opens in a new tab)をご覧ください。
ちなみに、index.js には特別な記述は必要ありません。
- 💡index.jsの状態を確認したい方はこちら！
- 💡data-interactive の裏側で行われること！
- 💡data-interactiveの効果をJSで実現する方法