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);
            }
            
            console.log("sphere設置")
            
            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("360sankyo1.jpg")		// 最初の写真
        		}
        	    });
            }
            
            console.log("csvまで")
            
            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);
        });
     
    console.log("last")
