<!DOCTYPE html> <html lang="ja"> <head> <title>A-Frame</title> <link rel="stylesheet" type="text/css" href="./Panorama.css"> <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> </head> <body> <a-scene id="vr" embedded> <a-assets> <a-asset-item id="char" src="ましろ軽量版.gltf"></a-asset-item> </a-assets> <a-entity scale="1 1 1" position="1 0 -5" animation="property:rotation; dur:10000; from : 0 0 0; to : 0 360 0;loop : -1 ; easing:linear;" gltf-model="#char"> </a-entity> <a-assets> <img id="360" src="360picture/R0010010.JPG"> </a-assets> <a-sky src="360picture/R0010010.JPG" rotation="0 -130 0"></a-sky> <a-camera look-controls wasd-controls position="0 0 0"> <a-entity cursor="fuse: true; timeout:500;" scale="0.2 0.2 0.2" position="0 0 -3" geometry="primitive: ring" material="color: red;"> </a-entity> </a-camera> <a-sphere id="sample-obj1" position="-12 -5 -7" color="red"> </a-sphere> <!-- 看板の位置にあるオブジェクト --> <a-sphere position="5 1 15" color="skyblue" id="sample-obj2"></a-sphere> <!-- 建物の位置にあるオブジェクト --> <a-sphere position="-15 0 15" color="yellow" id="sample-obj3"></a-sphere> <!-- 向こうの道の位置にあるオブジェクト --> </a-scene> <script src="Panorama.js"></script> </body> </html>