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して終わりにしたいと思います。