Addhtml.prototype.initialize=function(){// initglobalPc.scene=0;// どのシーンページを開いているか保管varhtmlNameArr=[];// attributesのデータの名前を配列にしますvararrIndex=Addhtml.attributes.index;for(vari=0;i<Object.keys(arrIndex).length;i++){// attributesのデータを取得してfor文で回すif(!Object.keys(arrIndex)[i].indexOf("scene")){// 名前にhtmlが入っているデータをif文htmlNameArr.push(Object.keys(arrIndex)[i]);// htmlデータの名前だけ配列化する}}varhead=document.getElementsByTagName("head")[0];// headタグ取得varbody=document.getElementsByTagName("body")[0];// bodyタグ取得varwrapper=document.createElement("div");// DOMを囲う要素を作成wrapper.className="wrapper";// クラス名指定body.appendChild(wrapper);// bodyタグの最後に要素を追加container=document.createElement("main");// DOMを囲う要素を作成container.className="container";// クラス名指定wrapper.appendChild(container);// bodyタグの最後に要素を追加varstyle=document.createElement("style");// cssのstyleタグwrapper.insertAdjacentHTML("afterbegin",this.header.resource);// attrで追加したヘッダーを追加// ヘッダー内のgnaviを取得vargnavLists=document.querySelector(".gnav_lists");gnavLists.innerHTML="";// .gnav_lists内のhtmlを空っぽにvargnavItem=document.createElement("div");// gnavの各リンクのdivを作成gnavItem.className="gnav_item";// gnavリンク要素のclass名を指定vargnavItemCl=[];// gnav_itemを整理するstyle.append(this.css._resources[0]);head.appendChild(style);// headの最後にstyleを追加for(vari=0;i<htmlNameArr.length;i++){container.insertAdjacentHTML("beforeend",this[htmlNameArr[i]].resource);// アセットから取得したhtmlを追加// 今回はgnavのリンクの数とhtmlのアセットの数が同じなのでどう処理を行う。gnavItemCl[i]=gnavItem.cloneNode(true);// gnavItemのクローンを作成gnavItemCl[i].innerHTML='<label for="menu"><span>'+htmlNameArr[i]+'</span></label>';// innerHTMLを作成gnavItemCl[i].setAttribute("data-scene",i+1);// scene1,scene2,scene3を切り替えるため数値をdata-sceneに追加gnavLists.append(gnavItemCl[i]);// gnav_lists内に追加gnavItemCl[i].addEventListener("click",gnavClick,false);// gnav_item各々にイベントをセット}};

functiongnavClick(e){// gnav_itemをクリックしたら発火if(globalPc.scene===0){globalPc.scene=this.getAttribute("data-scene");// クリックしたgnav_itemのdata-sceneを取得}}

varHotspot=pc.createScript('hotspot');// canvasのclickやhoverなどの処理を行うHotspot.attributes.add("cameraEntity",{type:"entity",title:"Camera Entity"});// カメラのentityを取得Hotspot.attributes.add("radius",{type:"number",title:"Radius"});// entityのヒットエリアの範囲を指定Hotspot.prototype.initialize=function(){// initthis.hitArea=newpc.BoundingSphere(this.entity.getPosition(),this.radius);// ヒットエリアを作成。BoundingSphereがentityの境界エリアを作成(Photoshopでいうバウンディングボックス的な)this.ray=newpc.Ray();// cameraからentityへ直進する線のデータを作成。（Rayは光線の意でstart pointからentityまでの距離を測ったりすることが可能）this.directionToCamera=newpc.Vec3();// Vector座標の型を取得this.app.mouse.on(pc.EVENT_MOUSEMOVE,this.onMouseHover,this);// マウスカーソルがホバーした時this.app.mouse.on(pc.EVENT_MOUSEDOWN,this.onMouseDown,this);// クリックが押された時this.localScale=this.entity.getLocalScale().clone();// 初期のscaleを保持this.hoverScale=this.localScale.clone().scale(1.2);// ホバー時のentityのscaleを保持};Hotspot.prototype.update=function(dt){// updatethis.cameraPosition=this.cameraEntity.getPosition();// cameraのポジション(座標)を取得this.directionToCamera.sub2(this.cameraPosition,this.entity.getPosition());// 2つの3次元ベクトルの値を互いに減算this.directionToCamera.normalize();// 3次元ベクトルを単位ベクトルに変換if(globalPc.scene===0){// sceneが選択されていない場合for(vari=0;i<this.entity.model.meshInstances.length;i++){this.entity.model.meshInstances[i].renderStyle=pc.RENDERSTYLE_SOLID;// レンダラーのスタイルをソリッドに変更}}if(this.entity.tags._list[0].replace(/[^0-9]/g,'')===globalPc.scene){// gnav_itemから選択されたsceneを参照this.entity.model._model.generateWireframe();// モデルのワイヤーフレームを準備for(varj=0;j<this.entity.model.meshInstances.length;j++){// モデルのメッシュを取得this.entity.model.meshInstances[j].renderStyle=pc.RENDERSTYLE_WIREFRAME;// ワイヤーフレームにレンダリング}}};Hotspot.prototype.doRayCast=function(screenPosition){// レイキャスト処理（ある地点から特定方向に直線で線を引いて、その線上で物体があるか検知する処理）if(this.hitArea.intersectsRay(this.ray)){globalPc.scene=this.entity.tags._list[0].replace(/[^0-9]/g,'');// entityで設定したタグを取得し、s1、s2...の数字以外をreplaceで削除し数字のみ代入this.entity.model._model.generateWireframe();// モデルのワイヤーフレームを準備for(vari=0;i<this.entity.model.meshInstances.length;i++){// モデルのメッシュを取得this.entity.model.meshInstances[i].renderStyle=pc.RENDERSTYLE_WIREFRAME;// ワイヤーフレームにレンダリング}}};Hotspot.prototype.onMouseHover=function(screenPosition){// マウスホバー時this.cameraEntity.camera.screenToWorld(screenPosition.x,screenPosition.y,this.cameraEntity.camera.farClip,this.ray.direction);// ポジションを2Dスクリーンから3D空間へ変換this.ray.origin.copy(this.cameraEntity.getPosition());// レイのオリジナルのポジションにカメラのポジションをコピーthis.ray.direction.sub(this.ray.origin).normalize();// 3次元ベクトルを他の場所から減算し、単位ベクトルに変換if(this.hitArea.intersectsRay(this.ray)&&globalPc.scene===0){// sceneが選択されていなくて、ヒットエリアとレイが交差した場合this.entity.setLocalScale(this.hoverScale);// entityのスケールを大きく}else{this.entity.setLocalScale(this.localScale);// entityのスケールを小さく}};Hotspot.prototype.onMouseDown=function(event){// クリックが押されている時if(event.button==pc.MOUSEBUTTON_LEFT){// 左クリックが押された時this.doRayCast(event);// レイキャストを呼ぶ}};

CameraMove.prototype.onMouseDown=function(event){// クリックダウンしたらif(event.button===pc.MOUSEBUTTON_LEFT){}// 左クリックif(event.button===pc.MOUSEBUTTON_MIDDLE){}// 中クリックif(event.button===pc.MOUSEBUTTON_RIGHT){}// 右クリック};

CameraMove.prototype.onMouseDown=function(event){// クリックダウンしたらif(event.buttons[0]){}// 左クリックif(event.buttons[1]){}// 中クリックif(event.buttons[2]){}// 右クリック};