Mengtai Zhang

簡介

這篇筆記記錄如何使用aframe自帶的inspector進行編輯以及自動更新到代碼。這個筆記是基於windows 10進行的。mac系統可能會略有不同。

該方式需在本地運行(local),並用到以下軟體:

1, npm

2, aframe-watcher

正文

Aframe有一個自帶的inspector,也就是類似unity那種圖形編輯器。這個方便與微調細節,可以有及時反饋,促進效率。

在用aframe寫好的一個場景裏按ctrl + alt + i即可打開aframe自己的inspector。在這個頁面中可以拖拽物體,改變大小,添加component等等。但做完所有事情,頁面是不會記錄的。按一下刷新就又回到最初的樣子。這是因爲沒有存儲。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/2a93fd4d-45f1-4478-9095-defe40a266d2/49696477-fa525f00-fb5e-11e8-92e9-be0c9461f4ac.png

如果沒有aframe-watcher,點擊存儲會提示"aframe-watcher not running ......"

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f2f1493a-5e3d-4a63-877a-bba6225bf0e9/Screenshot_(24).png

想要inspector同步代碼,方法如下: