document.addEventListener("DOMContentLoaded", ()=>{ var place; // あとでcsvから読み込まれて配列になる var sky = document.getElementById("sky"); // 360画像 var kago = document.getElementById("basket"); // 球の入れ物 var cam = document.getElementById("camera"); // カメラ var dir = "image/"; // 画像格納ディレクトリ var inirot = {}; // カメラの初期の向き function addSphere(attr) { // CSVの該当行の位置に球を配置する // photo,color,radius,opacity,x,y,z,next console.log(attr); let xyz = `${attr.x} ${attr.y} ${attr.z}`; /* let text = document.createElement("a-text"); kago.appendChild(text); text.setAttribute("position", xyz); text.setAttribute("value", attr.next); text.setAttribute("value", "あいうえabcdかきく"); */ let tama = document.createElement("a-sphere"); kago.appendChild(tama); console.log(`x y z=${xyz}`) tama.setAttribute("color", attr.color) tama.setAttribute("opacity", attr.opacity); tama.setAttribute("radius", attr.radius); tama.setAttribute("position", xyz); tama.addEventListener("click", moveStage); tama.setAttribute("next", attr.next); } function setPlace(target) { for (let e of document.querySelectorAll("#basket > *")) { e.remove(); // 前の場所に設置した球をすべて消す } sky.setAttribute("src", dir+target); // 新しい場所の360度写真へ cam.setAttribute("rotation", inirot[target]); console.log(`----------${target}`); console.log(inirot[target]); for (let i in place) { if (place[i].photo == target) { // その場所の定義を addSphere(place[i]); // CSVデータから全て読んで } } } function moveStage(e) { setPlace(e.target.getAttribute("next")); } function prepareCSV() { fetch("camera.csv") .then((response) => response.text()).then((csv) => { let rot = new CSV(csv, {header: true}).parse(); for (let row of rot) { inirot[row.photo] = `${row.rotX} ${row.rotY} ${row.rotZ}`; } }); fetch("picture.csv") .then((response) => response.text()).then((csv) => { place = new CSV(csv, {header: true}).parse(); //setPlace(place[0].photo); if (document.URL.match(/\?.*\.jpg/i)) { let photo = document.URL.replace(/.*\?/, "") setPlace(photo) } else { setPlace("360hiyori1.jpg") // 最初の写真 } }); } let s = document.createElement("script"); s.setAttribute("src", "https://www.yatex.org/libcache/knrz/csv.min.js"); s.addEventListener("load", prepareCSV); document.querySelector("head").appendChild(s); });