2022年2月1日 星期二

MindAR: 用WebAR技術把樹藝生命之美年暦與智創虎年賀歲圖片結合在一起，虎哩幸福一整年



在這2022年的大年初一，敏哥想用WebAR技術把國立臺灣工藝研究發展中心2020年推出的樹藝生命之美年暦與智創虎年賀歲圖片結合在一起，虎哩幸福一整年，歡迎大家留意智創生活科技與樹藝工坊，將在3月份推出科技藝術種子教師培訓課程，完全是免費的喔! 

1.準備作品與

準備樹藝生命之美年暦的電子檔，可以利用手機拍照。


2.準備智創虎年賀歲圖片檔(smartcreating.jpg)。


3.利用Image Targets Compiler編譯生命之美年暦的圖片檔，轉換成影像物件檔。


把生命之美年暦的圖片檔放到上圖Drop files to upload區。


按下上圖的Start鍵


按下上圖的Download compiled鍵，下載targets.mind，並自行建立一個資料夾，例如：TreeArt。

4.從https://hiukim.github.io/mind-ar-js-doc/quick-start/webpage，取得程式碼，並儲存AR html檔案。


5.開啟Web Server for Chrome，按下"啟用應用程式"。


6.按下上圖中"CHOOSE FOLDER"，選擇儲存AR.html程式的資料夾TreeArt。

7.打開Chrome瀏覽器進行測試，http://127.0.0.1:8887/AR.html。


8.修改程式，儲存成AR2.html檔案。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.0.0/dist/mindar-image.prod.js"></script>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.0.0/dist/mindar-image-aframe.prod.js"></script>
  </head>

  <body>
    <a-scene mindar-image="imageTargetSrc: ./targets.mind;" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
	  <a-assets>
        <img id="smartcreating" crossorigin="anonymous" src="smartcreating.jpg">
      </a-assets>
      <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
      <a-entity mindar-image-target="targetIndex: 0">
		<a-image src="#smartcreating"></a-image>
      </a-entity>
    </a-scene>
  </body>
</html>

9.把smartcreatimg.jpg檔案放到和AR.html同一個目錄下。

10.打開Chrome瀏覽器，並輸入http://127.0.0.1:8887/AR2.html，進行測試，就可以看到文章最上面圖片的景像。
張貼者： 於
標籤： , , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)