マウスカーソルのデザインを変えてみる
最近のWebサイトをみるとよくマウスストーカーというマウスについてくる要素がありますよね。
これをPlayCanvasでも使用してみようと思います。
早速スクリプトを作成します。「mouseStalker.js」を作成して以下のコードに書き換えます。
var MouseStalker = pc.createScript('mouseStalker');
MouseStalker.prototype.initialize = function() {
var self = this;
if(!self.app.touch) { // タッチ操作以外
document.body.style.cursor = "none"; // デフォルトのカーソルを非表示
self.domStalker = document.createElement("div"); // domStalkerのdiv作成
document.body.appendChild(self.domStalker); // bodyタグにdomStalkerを追加
self.domStalker.classList.add("mouseStalker"); // class名を追加
// ↓ styleを追加
self.domStalker.style.position = "fixed";
self.domStalker.style.top = 0;
self.domStalker.style.left = 0;
self.domStalker.style.zIndex = 999;
self.domStalker.style.border = "3px solid #ffffff";
self.domStalker.style.borderRadius = "50%";
self.domStalker.style.transform = "translate3d(0, 0, 0)";
self.domStalker.style.pointerEvents = "none";
self.domStalker.style.mixBlendMode = "difference";
self.domFollower = document.createElement("div"); // domFollowerのdiv作成
self.domStalker.appendChild(self.domFollower); // domStalkerにdomFollowerを追加
// ↓ styleを作成
self.domFollower.style.position = "absolute";
self.domFollower.style.top = 0;
self.domFollower.style.left = 0;
self.domFollower.style.width = "60px";
self.domFollower.style.height = "60px";
self.domFollower.style.border = "1px solid #ffffff";
self.domFollower.style.borderRadius = "50%";
self.domFollower.style.transform = "translate3d(-50%, -50%, 0)";
self.domFollower.style.transitionTimingFunction = "ease-out";
self.domFollower.style.transition = "all .2s";
self.domFollower.style.pointerEvents = "none";
self.app.mouse.on(pc.EVENT_MOUSEMOVE, self.onMouseMove, self); // マウスムーブのイベント
self.app.on("mouseStalker:over", function(){ // マウスが何かにoverした時の処理イベント
self.domFollower.style.borderRadius = "0%";
self.domFollower.style.transform = "translate3d(-50%, -50%, 0) scale(1.2) rotate(180deg)";
});
self.app.on("mouseStalker:out", function(){ // マウスが何かっからoutした時の処理イベント
self.domFollower.style.borderRadius = "50%";
self.domFollower.style.transform = "translate3d(-50%, -50%, 0) scale(1) rotate(0deg)";
});
}
};
MouseStalker.prototype.onMouseMove = function(ev) {
// マウスが移動している座標を基にpositionのtop, leftに値を与える
this.domStalker.style.top = ev.y + "px";
this.domStalker.style.left = ev.x + "px";
};
Launchで確認してみます。丸いのがマウスカーソルになっているのが確認できます。
PlayCanvasの3Dモデルのクリックできるオブジェクトにマウスオーバーのイベント処理を行うようにします。
まずは raycast.js の onMouseMove を以下に書き換える
Raycast.prototype.onMouseMove = function(ev) {
var farClip = this.entity.camera.farClip; // カメラのfarClipの設定(Editorから設定可能)
var nearClip = this.entity.camera.nearClip; // カメラのnearClipの設定(Editorから設定可能)
this.entity.camera.screenToWorld(ev.x, ev.y, nearClip, this.rayStart); // 平面座標から3D空間へ座標を変換しRaycastの始まりの座標を作成
this.entity.camera.screenToWorld(ev.x, ev.y, farClip, this.rayEnd); // 平面座標から3D空間へ座標を変換しRaycastの終わりの座標を作成
this.result = this.app.systems.rigidbody.raycastFirst(this.rayStart, this.rayEnd); // 作成した座標を元に当たり判定を持つEntityとぶつかったか結果を出す
if(domDisplay) return; // Domが表示されている場合はRayCastは処理しない
if (this.result) { // raycastの結果が出ているか
this.app.fire("mouseStalker:over"); // Raycastでマウスオーバーしたらイベント発火
}else{
this.app.fire("mouseStalker:out"); // Raycastからマウスアウトしたらイベント発火
}
};
今はクリックできるものはCollisionを当ててRaycastで判定取ることができます。
それを使ってmouseStalkerのイベントを追加しています。
続いて、 displayDom.js の53行目からのコードを以下に書き換えます
self.closePointer.addEventListener("click", function(){ // closePointerのクリックイベント
self.app.fire("displayDom:false"); // イベント発火
});
self.closePointer.addEventListener("mouseover", function(){ // closePointerのマウスオーバーイベント
self.closePointerChild.style.transform = "scale(.5)"; // closePointerChildのscaleを小さく
self.app.fire("mouseStalker:over"); // マウスオーバーイベント発火
});
self.closePointer.addEventListener("mouseout", function(){ // closePointerのマウスアウトイベント
self.closePointerChild.style.transform = "scale(1)"; // closePointerChildのscaleを元に戻す
self.app.fire("mouseStalker:out"); // マウスアウトイベント発火
});
self.app.on("displayDom:true", function(page){ // Domを表示する時のイベント作成
domDisplay = true; // Domが表示されているFlag
document.body.appendChild(self.wrapper); // wrapperをbodyタグに追加
self.closePointerChild.style.transform = "scale(1)"; // closePointerChildのscaleを付与
self.app.fire("mouseStalker:out"); // マウスアウトイベント発火
});
self.app.on("displayDom:false", function(page){ // Domを表示しない時のイベント作成
domDisplay = false; // Domが非表示になっているFlag
self.wrapper.remove(); // wrapperを削除
self.app.fire("mouseStalker:out"); // マウスアウトイベント発火
});
DOMにもクローズボタンなどクリックするものがあるので、そちらにもマウスオーバーの処理を追加しました。
これでマウスストーカーができました。
ほとんどがcssのstyleによるものですが、簡単に実装することができます
PlayCanvasでいろんなコンテンツを作ってみてください！
コメント
0件のコメント
サインインしてコメントを残してください。