目次
AR Web
Webサイトで、AR・VRに利用可能な、メタバースサイトを構築します。
https://lifeanddigital.net/demo/asite-room/room/sample-vr.php
room_vr.php
<!-- http://localhost:8080/asite-room/room/sample-vr.php -->
<!-- https://lifeanddigital.net/demo/asite-room/room/sample-vr.php -->
<!-- 360°閲覧できるビューワーのように、WEBサイトに3Dを埋め込む例 -->
<html>
<head>
<!-- A-FrameをCDNから読み込む -->
<script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-sky image src="./assets/room_360.jpg" ></a-sky>
</a-scene>
</body>
</html>
360度 パノラマルーム
https://lifeanddigital.net/demo/asite-room/room/sample-rotation.php
room_rotation.php
<!-- http://localhost:8080/asite-room/room/sample-rotation.php -->
<!-- https://lifeanddigital.net/demo/asite-room/room/sample-rotation.php -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>A-Frame Skybox Rotation</title>
<!-- A-FrameをCDNから読み込む -->
<script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<!-- Sky entity with an image texture and animation for rotation -->
<a-sky src="./assets/room_360.jpg" rotation="0 0 0"
animation="property: rotation; to: 0 360 0; loop: true; dur: 30000; easing: linear">
</a-sky>
</a-scene>
</body>
</html>
AR/VR Web サイトの構築
あわせて読みたい
WebAR
360 panorama room
あわせて読みたい
WebAR
360 panorama room
index_vr.php
<!-- http://localhost:8080/asite-room/room/index_vr.php -->
<!-- https://lifeanddigital.net/demo/asite-room/room/index_vr.php -->
<!-- 360°閲覧できるビューワーのように、WEBサイトに3Dを埋め込む例 -->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="360 panorama room">
<meta name="author" content="Life and Digital">
<meta name="keywords" content="vr,ar,a-frame">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="default">
<title>WebAR</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<h1> AR WEB </h1>
<div class="container">
<iframe class="iframe"
width="80%" height="320px"
title="VR Mode"
src="./room_vr.php"
></iframe>
</div>
<p></p>
<div class="qrcode" >
<img src="./image/qr_vr.png" alt="QR-CODE" width="100" height="100" />
</div>
</body>
</html>
<!-- http://localhost:8080/asite-room/room/index_rotation.php -->
<!-- https://lifeanddigital.net/demo/asite-room/room/index_rotation.php -->
<!-- 360°閲覧できるビューワーのように、WEBサイトに3Dを埋め込む例 -->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="360 panorama room">
<meta name="author" content="Life and Digital">
<meta name="keywords" content="vr,ar,a-frame">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="default">
<title>WebAR</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<h1> 360 パノラマルーム </h1>
<div class="container">
<iframe class="iframe"
width="640px" height="320px"
title="rotation"
src="./room_rotation.php"
></iframe>
</div>
<p></p>
<div class="qrcode" >
<img src="./image/qr_rotation.png" alt="QR-CODE" width="100" height="100" />
</div>
</body>
</html>
手順
１）XAMPPをインストールする
２）XAMPPのホームディレクトリに作成します。
C:\xampp\htdocs\asite-room\room
３）A-Frameを利用したソースを作成
４）Webブラウザからアクセスします
http://localhost:8080/asite-room/room
ANATAMADE
あわせて読みたい
