詳細ページへの切り替えなどの処理を作る
各々の詳細が書いてあるHTMLを追加できたので、それを表示するための処理を作っていきます。
選択したEntityから詳細ページへ行くためのボタンを用意します。
また、詳細ページから前のページに戻るためのボタンも用意します。
[index.html]
<div id="app">
<header class="header">
<nav>
<ol>
<li v-for="(entity,index) in entities" @click="onEntityClick(entity,index)" ><span>{{entity.name}}</span></li>
</ol>
</nav>
</header>
<div class="detailBtn" v-show="detailBtnShow" @click="onDetailClick()"></div>
<main class="main">
<div class="closeBtn" @click="onCloseClick()"></div>
<div class="container">
<section v-for="(content,index) in contents" v-show="sectionNum == index" v-html="content"></section>
</div>
</main>
</div>
detailBtnとcloseBtnを追加すると合わせて、この後行うクリックイベントとv-showという表示非表示を処理するための記述も書いています。
これらを使うために、index.jsに処理を書いていきます。
index.jsのVueの箇所を以下に書き換えます。
[index.js]
var app = new Vue({ // Vue呼び出し
el: '#app', // id名がappの要素を参照
data: { // 使用するdataを登録
clickFlag: false, // クリックされたか
detailFlag: false, // 詳細を表示しているか
detailBtnShow: false, // 詳細ボタンを表示しているか
entities: self.target.children, // 属性で追加したEntityの子どもを参照
contents: t_htmls, // HTMLをVueに渡す
sectionNum: "", // 何個目のEntityが表示されているか
},
methods: { // イベントハンドラ作成
onCloseClick: function() { // 詳細を閉じる
document.body.classList.remove("is-open");
detailFlag = false;
},
onDetailClick: function(target) { // 詳細を表示
detailFlag = true;
document.body.classList.add("is-open");
},
onEntityClick: function(target,index) { // Entityを選択された時
var v_self = this; // thisを保管
if(v_self.clickFlag) return; // クリックされて処理中か
if(!v_self.detailBtnShow) v_self.detailBtnShow = true; // 詳細ボタンを表示(初回のみ)
v_self.clickFlag = true; // クリック処理中
this.sectionNum = index; // 何個目のEntityが表示されているか
self.target.tween(self.target.getLocalRotation()).rotate(new pc.Vec3(180, 0, 0), 0.5, pc.QuadraticIn).on('complete', function () { // tweenでrotateをアニメーション completeで完了後呼び出し
if(nowEntity){ // Entityが保管されているか
nowEntity.enabled = false;
}
target.enabled = true; // 選択したEntityを表示
nowEntity = target; // 選択したEntityを保管
self.target.tween(new pc.Vec3(180, 0, 0)).rotate(new pc.Vec3(360, 0, 0), 1, pc.BounceOut).on('complete', function(){ v_self.clickFlag = false; }).start(); // 選択したEntityのアニメーション
}).start();
}
}
});
onDetailClickとonCloseClickのイベントハンドラを作成しています。
ここで詳細の表示非表示を行いますが、その表示非表示はclass名を参照しています。
htmlのbody要素に特定のclass名を持つときにCSSを使って表示非表示するようにしました。
v-showを使うことでもできなくはないですが、アニメーションを含めるならCSSが簡単と思いましてこちらを採用しています。
これで3Dモデルビュワーは完成していますが、もう一点、スマホ対応もさせておきたいと思います。
index.htmlとindex.jsのVueの箇所を以下に書き換え
[index.html]
<div id="app">
<div class="navBtn" @click="onNavClick()"></div>
<header class="header">
<nav>
<ol>
<li v-for="(entity,index) in entities" @click="onEntityClick(entity,index)" ><span>{{entity.name}}</span></li>
</ol>
</nav>
</header>
<div class="detailBtn" v-show="detailBtnShow" @click="onDetailClick()"></div>
<main class="main">
<div class="closeBtn" @click="onCloseClick()"></div>
<div class="container">
<section v-for="(content,index) in contents" v-show="sectionNum == index" v-html="content"></section>
</div>
</main>
</div>
[index.js]
var app = new Vue({ // Vue呼び出し
el: '#app', // id名がappの要素を参照
data: { // 使用するdataを登録
clickFlag: false, // クリックされたか
navFlag: false, // スマホ時のメニュー表示しているか
detailFlag: false, // 詳細を表示しているか
detailBtnShow: false, // 詳細ボタンを表示しているか
entities: self.target.children, // 属性で追加したEntityの子どもを参照
contents: t_htmls, // HTMLをVueに渡す
sectionNum: "", // 何個目のEntityが表示されているか
},
methods: { // イベントハンドラ作成
onNavClick: function() { //メニューボタン押す
if(!this.navFlag) { // メニュー表示
this.navFlag = true;
document.body.classList.add("is-nav");
}else{ // メニュー非表示
this.navFlag = false;
document.body.classList.remove("is-nav");
}
},
onCloseClick: function() { // 詳細を閉じる
document.body.classList.remove("is-open");
detailFlag = false;
},
onDetailClick: function(target) { // 詳細を表示
detailFlag = true;
document.body.classList.add("is-open");
},
onEntityClick: function(target,index) { // Entityを選択された時
var v_self = this; // thisを保管
document.body.classList.remove("is-nav");
if(v_self.clickFlag) return; // クリックされて処理中か
if(!v_self.detailBtnShow) v_self.detailBtnShow = true; // 詳細ボタンを表示(初回のみ)
v_self.clickFlag = true; // クリック処理中
this.sectionNum = index; // 何個目のEntityが表示されているか
self.target.tween(self.target.getLocalRotation()).rotate(new pc.Vec3(180, 0, 0), 0.5, pc.QuadraticIn).on('complete', function () { // tweenでrotateをアニメーション completeで完了後呼び出し
if(nowEntity){ // Entityが保管されているか
nowEntity.enabled = false;
}
target.enabled = true; // 選択したEntityを表示
nowEntity = target; // 選択したEntityを保管
self.target.tween(new pc.Vec3(180, 0, 0)).rotate(new pc.Vec3(360, 0, 0), 1, pc.BounceOut).on('complete', function(){ v_self.clickFlag = false; }).start(); // 選択したEntityのアニメーション
}).start();
}
}
});
navBtnという要素を追加して、onNavClickのイベントハンドラを呼ぶことでスマホ時でもメニューを開いて操作することができます。
ここでもbody要素にclass名のis-navを付与することでメニューの表示非表示を制御しています。
他にも色んな方法はありますので、試してみると良いでしょう。
これで、本チュートリアルの制作は終了です。
最後に今回作ったプロジェクトをPublishして終わりにしたいと思います。
コメント
0件のコメント
サインインしてコメントを残してください。