チュートリアル - 360°回転する3D空間を使ったWebサイト 5/7 – PlayCanvas

Domを表示させる

PlayCanvasにはElementComponentsというEntityもありますが、テキスト情報はDomの方がいいなどあると思います。

PlayCanvasのコンテンツと組み合わせてDomも表示できるようにしてみます。

Assetsに新しいスクリプト、「displayDom.js」を作成します。
displayDom.jsのコードをいかに書き換えます。

var DisplayDom = pc.createScript('displayDom');

DisplayDom.attributes.add("addhtml", {type:"asset", assetType:"html", title:"表示するDomのhtml"}); // 載せるhtmlを登録
DisplayDom.attributes.add("addcss", {type:"asset", assetType:"css", title:"表示するDomのcss"}); // 載せるhtmlのstyle cssを登録

domDisplay = false; // グローバル変数でDomが表示されている状態を管理

DisplayDom.prototype.initialize = function() {
    var self = this;
    
    if(this.addcss){ // cssが登録されている場合
        var stylecss = pc.createStyle(this.addcss.resource); // attributeのcssをstyleタグで流し込み
        document.head.appendChild(stylecss); // headタグにstyleを追加
    }
    
    var pcCanvas = document.body.getElementsByTagName("canvas")[0]; // PlayCanvasのコンテンツを参照

    self.wrapper = document.createElement("div"); // wrapperというdivを作成

    self.wrapper.classList.add("wrapper"); // wrapperというclass名を付与

    // ↓ wrapperにstyleを付与
    self.wrapper.style.position = "fixed";
    self.wrapper.style.top = "50%";
    self.wrapper.style.left = "50%";
    self.wrapper.style.transform = "translate(-50%, -50%)";
    self.wrapper.style.width = "100vw";
    self.wrapper.style.height = "100vh";

    self.wrapper.insertAdjacentHTML("beforeend", self.addhtml.resource); // attributeのhtmlをwrapperに流し込み

    self.closePointer = document.createElement("div"); // closePointerというdivを作成    
    self.wrapper.appendChild(self.closePointer); // closePointerをwrapperに入れ込み
    
    // ↓ closePointerにstyleを付与
    self.closePointer.style.position = "fixed";
    self.closePointer.style.top = "5px";
    self.closePointer.style.right = "5px";
    self.closePointer.style.width = "60px";
    self.closePointer.style.height = "60px";
    
    self.closePointerChild = document.createElement("div"); // closePointerChildというdivを作成
    self.closePointer.appendChild(self.closePointerChild); // closePointerChildをclosePointerに入れ込み
    
    // ↓ closePointerChildにstyleを付与
    self.closePointerChild.style.width = "100%";
    self.closePointerChild.style.height = "100%";
    self.closePointerChild.style.borderRadius = "50%";
    self.closePointerChild.style.backgroundColor = "#ffffff";
    self.closePointerChild.style.transform = "scale(1)";
    self.closePointerChild.style.transition = "transform .2s";

    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.closePointer.addEventListener("mouseout", function(){ // closePointerのマウスアウトイベント
        self.closePointerChild.style.transform = "scale(1)"; // closePointerChildのscaleを元に戻す
    });
      
    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.on("displayDom:false", function(page){ // Domを表示しない時のイベント作成
        domDisplay = false; // Domが非表示になっているFlag
        self.wrapper.remove(); // wrapperを削除
    });
};

クリックしたらDomが表示される3Dモデルを用意します。

先ほどのprev, nextのBoxと同じ要領で作成します。

Dom表示用と区別するために、Tagsに「dom」を追加します。

ADD COMPONENTでScriptも追加して、先ほど作成した diplayDom.js を登録します。

その後、ParseしてAttributeも登録します。ここで登録するHTMLとCSSはFork時から事前に入っていたtop.htmlとstyle.cssを登録してください。

クリックしてDomを表示させるために、 raycast.js のdoRaycastをいかに書き換えます。

Raycast.prototype.doRaycast = function (screenX, screenY) { // Raycast処理を使って
    if(domDisplay) return; // Domが表示されている場合はRayCastは処理しない

    if (this.result) { // raycastの結果が出ているか
        var hitEntity = this.result.entity; // Raycastで取得したEntity
        
        if(hitEntity.tags._list.includes("dom")) { // tagsにdomがある場合
            this.app.fire("displayDom:true", "dom"); // Domを表示する
        
        }else if(hitEntity.tags._list.includes("prev")) { // tagsにprevがある場合
            this.app.fire("cameraMove:tween", -1); // カメラTweenで一つ前のSceneへ

        }else if(hitEntity.tags._list.includes("next")) { // tagsにpnextがある場合
            this.app.fire("cameraMove:tween", 1); // カメラTweenで一つ次のSceneへ
        }
    }
};

Dom表示のために追加したTagsのdomを参照して、該当する3Dモデルをクリックしたらその３DモデルのdisplayDom.jsで登録されたhtmlとcssが呼ばれるといったものになっている。

今回はhtmlとstyleを用意しているが、編集してオリジナルのstyleでデザインしてみてください。

ここまでは処理を解説し、次からはPlayCanvasのEditorの機能で見栄えを良くしてみましょう。