前提・実現したいこと
現状
WebARを利用したサイトをVisual Studio CodeとCyberduckを利用し制作しています。
現状、下記のソースコードを書き。test.phpではファイルのサイズ指定などはできていませんが、アップロードする機能自体を作成し、固有の名前+Datetimeのファイルネームがアップロードできます。index.phpではアップロードされた際の処理と、WebARのシステムがお粗末ではありますができていると思っています。WebARはマーカーであるpattファイル+モデルのglbファイルを指定してあげるとARとしての機能ができることは確認済み。
理想
完成形として、初めにアップロードが出る→次にアップロード完了とWebARが利用できるURLの表示→WebARサイトへの遷移→最後にWebARの利用が可能を理想としています。
問題点・解決したい点
・WebARのプログラム以前の問題な気がするので、他の部分を知りたい。
・どのように考えればいいかわからない
URLのあたりがこんがらがっており、移したいサイトはWebAR。だが、アップロードしたファイルをどのようにし何をするべきかわからない。アイディアが思いつかない。
・DateTime
現在複数のユーザーが短時間にアップロードした際の対策として、ファイルネームを固定の名前+DateTimeを利用して被らないようにしています。ですが、WebARのhtml側でアップロードしたファイルを利用したいと考えています。その際DateTimeの値を使いa-assetsのsrcとa-markerのurlとしてつかえるようにするためにはどうしたらいいのでしょうか。
最後に
現状アイディア的な部分が全然思い浮かびません。完成形に向けてどうゆう風に進めていくべきなのかをどうゆう風にできるのか、頭が固く八方ふさがりです。完成形のプログラムからアイディアまで些細ことでも教えていただければ幸いです。よろしくお願いします。
test.php(html)
php
1<?php 2 3?> 4 <!DOCTYPE html> 5 <html lang="ja"> 6 <head> 7 8 </head> 9 <body> 10 11 <form action="index.php" method="post" enctype="multipart/form-data"> 12 13 <div> 14 <h4>マーカーアップロード</h4> 15 <input id="marker" type="file" name="marker"> 16 </div> 17 18 <div> 19 <h4>モデルアップロード</h4> 20 <input id="model" type="file" name="model"> 21 </div> 22 23 <br> 24 <button type="submit" id="btn" name="btn">送信する</button> 25 26 </form> 27 28 </body> 29 </html>
index.php(php+html)
php
1<?php 2 $date = new DateTime('now'); 3 $id = $date->format('U'); 4 5 $markerfile = $_FILES["marker"]["tmp_name"]; 6 $markername = './' ."MARKER"; 7 8 $modelfile = $_FILES["model"]["tmp_name"]; 9 $modelname = './' ."MODEL"; 10 11 if(is_uploaded_file($markerfile)) 12 { 13 if(move_uploaded_file($markerfile,"Marker/" .$markername .$id)) 14 { 15 echo $markerfile."をアップロードしました。"; 16 } 17 else 18 { 19 echo"ファイルをアップロードできません。"; 20 } 21 22 if(move_uploaded_file($modelfile,"Model/" .$modelname .$id)) 23 { 24 echo $modelfile."をアップロードしました。"; 25 } 26 else 27 { 28 echo"ファイルをアップロードできません。"; 29 } 30 } 31 isset($id) 32 { 33 echo"https://webar.tn-lab.com/training/5/test.php" 34 } 35?> 36<html> 37 38 <input type="hidden" name="number" value="$id"> 39 40 <head> 41 42 <!-- A-Frame --> 43 <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> 44 <!-- AR.js --> 45 <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.2/aframe/build/aframe-ar.js"></script> 46 <!-- gltfのアニメーション用 --> 47 <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script> 48 49 </head> 50 51 <a-scene embedded arjs="debugUIEnabled: false" vr-mode-ui="enabled: false"> 52 53 <a-assets> 54 55 <!-- 3Dモデル --> 56 <a-asset-item id="model" src=""></a-asset-item> 57 58 </a-assets> 59 60 <!-- マーカーの指定 --> 61 <a-marker type="pattern" url=""> 62 63 <!-- 3Dモデルを表示 --> 64 <a-entity gltf-model="#model" scale="0.1 0.1 0.1" animation-mixer></a-entity> 65 66 </a-marker> 67 68 <a-entity camera></a-entity> 69 70 </a-scene> 71 </html>
補足情報(FW/ツールのバージョンなど)
・VisualStudioCode
・Cyberduck
・Windows
あなたの回答
tips
プレビュー