知乎：何枝
地址：https://zhuanlan.zhihu.com/p/9096314010

Live Demo（網(wǎng)站在進(jìn)入前可能會(huì)加載一段時(shí)間，需要等一等）

• 人物觀測(cè)：Agent Life Live?Demo[1]

• 行為統(tǒng)計(jì)：Agent Life Action Logging?Board[2]

Code：GitHub - HarderThenHarder/AgentLife: A small open source 3D agent simulator based on LLM.
Video：https://www.bilibili.com/video/BV1f

去年第一次看到?斯坦福小鎮(zhèn)[3]?時(shí)，大概是骨子里喜歡模擬類(lèi)游戲的原因，當(dāng)時(shí)激動(dòng)了好久好久，

后來(lái)?AI Town[4]出現(xiàn)，允許注冊(cè)玩家進(jìn)入到虛擬小鎮(zhèn)里和里面的 NPC 對(duì)話(huà)，又把這類(lèi)玩法拔了一個(gè)高度。

斯坦福小鎮(zhèn)（圖左）& AI Town（圖右）

但受限于當(dāng)時(shí)自己薄弱的技術(shù)功底，因?yàn)椴粫?huì)做游戲，讓我不得不放棄親手圓夢(mèng)的計(jì)劃，

直到不久前，我無(wú)意中刷到?6個(gè)AI合租[5]視頻時(shí)，內(nèi)心的燥熱再也按耐不住，

不會(huì)做，那就學(xué)！

所以在將近一個(gè)月里所有零零散散的時(shí)間拼拼湊湊后，終于堆完了第一個(gè)版本的?demo[6]（也可以看?視頻[7]）：

Agent Life Demo（因?yàn)樾枰玫?Qwen-2.5 進(jìn)行決策，所以 demo 網(wǎng)站將持續(xù)至賬戶(hù) quota 用光為止）

和原版相比，主要做了以下一些改動(dòng)：

1. 2D -> 3D：雖然 2D 像素也能做出藝術(shù)品（我很喜歡《星露谷》），但為了觀測(cè)起來(lái)更 “真” 一點(diǎn)，我們還是決定一步到位切 3D 引擎。

2. Multi -> Single：「斯坦福小鎮(zhèn)」和「AI Town」亮點(diǎn)在于 Multi-Agent，我們可以在里面看到非常有趣的 Agent 之間的對(duì)話(huà)內(nèi)容。但 —— 我總感覺(jué)有些看不太過(guò)來(lái)，一個(gè)地圖上同時(shí)存在非常多對(duì)人在對(duì)話(huà)，即便作為 “上帝” 的我也只有一雙眼睛。為此，我們想暫時(shí)砍掉 Multi，先只 Focus 到一個(gè) Agent 上。

3. 建立與 Agent 與真實(shí)世界之間的聯(lián)系：?我一直在想，如果能讓 Agent 和現(xiàn)實(shí)世界里的真實(shí)信息產(chǎn)生聯(lián)系，說(shuō)不定會(huì)有趣起來(lái)。所以我給了 Agent 一個(gè)微博，它能夠通過(guò)發(fā)布、回復(fù)微博，來(lái)和物理世界里的我交互；同時(shí)我們?cè)试S他查看當(dāng)前最新的熱點(diǎn)新聞，由他自己選擇將感興趣的內(nèi)容存放到“記憶”里。

4. 可視化 Agent 一天的日程：對(duì) Agent 每一次的行為選擇進(jìn)行可視化，通過(guò)賦予 Agent 不同的人設(shè)，統(tǒng)計(jì) Agent 在行為選擇上是否會(huì)有所不同。

5. 動(dòng)態(tài)編輯游戲世界，制造新的事件：比如移除床后無(wú)法睡覺(jué)，破壞灶臺(tái)后無(wú)法做飯，查看 AI 在突發(fā)情況下做出什么決策。（目前還不完善）

日程可視化：八卦人設(shè)（左）更喜歡看娛樂(lè)新聞 & 極客人設(shè)（右）更喜歡看稀土掘金

秉承著「一起學(xué)習(xí)，共同進(jìn)步」的基本原則，我將我實(shí)現(xiàn)這個(gè)項(xiàng)目中用到的所有技術(shù)在這里梳理出來(lái)，

文章的最后會(huì)給出源碼，希望能對(duì)那些想 try 一把虛擬世界的朋友們有一點(diǎn)幫助。

PS：相信我，其實(shí)沒(méi)有那么難。

1. 項(xiàng)目框架

整個(gè)項(xiàng)目分為兩部分：客戶(hù)端（渲染引擎）+?服務(wù)端（行為決策）：

Agent Life 系統(tǒng)框架圖

1.1 客戶(hù)端（Client）

因?yàn)槭且粋€(gè) 3D 的渲染引擎，所以首先從?three.js[8]?開(kāi)始學(xué)習(xí)，

Three.js Journey[9]?是我看過(guò)最好的教程，它會(huì)從很多基礎(chǔ)的概念開(kāi)始講解和剖析。

不過(guò)想要扎實(shí)基本功，時(shí)間短了是肯定搞不定的，所以整套教程很長(zhǎng)（一共 67 個(gè)視頻，每個(gè) 0.5~2 小時(shí)）。

Three.js Journey 教程視頻

three.js 算是稍微底層的代碼，最后在實(shí)現(xiàn)項(xiàng)目時(shí)用開(kāi)源框架，之前幾十行的代碼其實(shí)一行就搞定了。

就好比：一大段 Transformer Model 用一句 from transformers import xxx 就能解決一樣。

所以，如果不想從頭看起也可以直接跳轉(zhuǎn)學(xué)習(xí)?React Three Fiber（R3F）[10]。

React & React Three Fiber

React[11]?是 Javascript 的一個(gè)三方庫(kù)（類(lèi)似于 Python 里 pip install 的那些三方庫(kù)一樣），

從寫(xiě)法上來(lái)講，最大的特點(diǎn)事允許我們同時(shí)在一個(gè)文件里面同時(shí)寫(xiě) html tag 和 js 的代碼。

PS：「狀態(tài)管理」是 React 更核心的特點(diǎn)，但是這不是一篇科普 React 的文章（我自己也只是個(gè)小白），所以主要講一講寫(xiě)法上的特點(diǎn)，便于之后閱讀源碼。

如果 js 比較陌生，我們可以想象成 python，如果我們要用 python 來(lái)構(gòu)建一個(gè)能進(jìn)行邏輯計(jì)算的前端頁(yè)面，

因?yàn)?html 本身不支持計(jì)算邏輯，所以我們需要 2 個(gè)文件：

• 1 個(gè) index.html 來(lái)負(fù)責(zé)定義網(wǎng)頁(yè)長(zhǎng)什么樣（幾個(gè)按鈕，幾個(gè)輸入框）。

• 1 個(gè) calculate.py 來(lái)負(fù)責(zé)邏輯計(jì)算，然后再傳遞給 index.html。

PS：所以現(xiàn)在比較受歡迎的 python 做 web 的框架：streamlit[12]?&?gradio[13]都變成純 python 寫(xiě)網(wǎng)頁(yè)，不用我們親自寫(xiě) html & css，但帶來(lái)的問(wèn)題就是局限性比較大，無(wú)法實(shí)現(xiàn)一些自己想實(shí)現(xiàn)的樣式。

但這樣很麻煩，我們能不能直接把「計(jì)算邏輯」和「頁(yè)面布局」同時(shí)寫(xiě)在一個(gè)文件里呢？

當(dāng)然可以，使用 React 這種實(shí)現(xiàn)就方便了很多，以下是一個(gè)例子：

React 示例（將計(jì)算邏輯 & html 邏輯寫(xiě)在同一個(gè)文件下）

上面的例子是 React（.jsx） 中常用的寫(xiě)法，所有計(jì)算邏輯都在前面寫(xiě)好（a = 3 + 2），

然后在 return 里寫(xiě)上需要的 html 組件（<button>），結(jié)束！

React Three Fiber[14]?是在將 Three.js 融合在 React 框架里面的一個(gè)三方庫(kù)，

它能夠極大的簡(jiǎn)化 three.js 代碼，并轉(zhuǎn)換成 <tag> 的形式，在 React 的 return 部分導(dǎo)入 3D 模型。

舉一個(gè)創(chuàng)建立方體的例子：

//?three.js?寫(xiě)法（js?形式）
const?geometry?=?new?THREE.BoxGeometry(1,?1,?1);???????????????????//?創(chuàng)建立方體幾何體
const?material?=?new?THREE.MeshBasicMaterial({?color:?0x00ff00?});?//?創(chuàng)建綠色材質(zhì)
const?mesh?=?new?THREE.Mesh(geometry,?material);???????????????????//?使用幾何體和材質(zhì)創(chuàng)建網(wǎng)格????//?R3F?寫(xiě)法（tag?形式）
<mesh><boxGeometry?args={[1,?1,?1]}?/><meshBasicMaterial?color='green'?/>
</mesh>

完整的示例代碼如下：

R3F 示例，將 Three.js 融入到 React 中使用

可以在?R3F官網(wǎng)[15]?里查看詳細(xì)的說(shuō)明，也可以在?sandbox[16]?里面在線(xiàn)嘗試運(yùn)行/調(diào)試代碼。

Tailwind CSS

tailwind css[17]?是一個(gè)非常非常非常方便快速美化 web 頁(yè)面的庫(kù)，

可以簡(jiǎn)單理解為：這個(gè)庫(kù)已經(jīng)提前實(shí)現(xiàn)了很多常用的 css 效果，我們只需要填對(duì)應(yīng)的 className 就能快速應(yīng)用：

tailwind css 使用示例

更直觀的來(lái)看，我們的項(xiàng)目中底層使用 R3F 進(jìn)行 3D 世界的渲染，而所有上層的信息框都是通過(guò) tailwind css 來(lái)實(shí)現(xiàn)（比如人物的狀態(tài)信息欄、內(nèi)心想法、搜索網(wǎng)頁(yè)效果等）：

tailwind css 的實(shí)現(xiàn)效果

例如，右上角的狀態(tài)欄對(duì)應(yīng)實(shí)現(xiàn)代碼如下：

const?InfoBox?=?({characters,selectedAvatar
})?=>?{return?(//?通過(guò)設(shè)置 className 來(lái)使用 tailwind css 的樣式（注：在 React 中使用 className 而不是 class）<div?className="fixed?right-5?top-5?w-80?h-2/5?flex?flex-col?items-start?space-y-2?p-0?bg-opacity-30?shadow-lg?rounded-lg?text-xs?overflow-y-auto?backdrop-blur-sm?duration-500"...>{characters?.find(character?=>?character.id?===?selectedAvatar)???(<table?className="table-auto"><tbody>{Object.entries(characters.find(character?=>?character.id?===?selectedAvatar)).map(([key,?value],?index)?=>?(<tr?key={key}?className={index?%?2?===?0???'bg-gray-600?bg-opacity-30'?:?'bg-gray-0?bg-opacity-50'}><td?className="px-4?py-2?text-sky-100">{key}</td><td?className="px-4?py-2?text-sky-100">{JSON.stringify(value)}</td></tr>))}</tbody></table>)?:?(<div?className="p-2?text-red-400">角色信息不可用</div>)}</div>)
}

人物模型 & 動(dòng)畫(huà)資源

項(xiàng)目中用到的人物模型是在?Ready Player Me[18]?上捏的，這是一個(gè)免費(fèi)的捏人網(wǎng)站，

你可以在上面選擇膚色、發(fā)型、衣服等，然后把捏好的人物下載到本地使用（可能是因?yàn)閲?guó)外網(wǎng)站的原因，用起來(lái)很卡）：

Ready Player Me，捏完之后點(diǎn)擊「Next」再保存到本地

動(dòng)畫(huà)則是在?mixamo[19]?上找到的，這個(gè)網(wǎng)站可以支持上傳自己的人物模型，

然后挑選對(duì)應(yīng)的動(dòng)畫(huà)（animations），在線(xiàn)預(yù)覽后下載到本地即可：

點(diǎn)擊左側(cè)預(yù)設(shè)動(dòng)畫(huà)，調(diào)節(jié)好參數(shù)后 download 到本地

參考原型

這個(gè)客戶(hù)端的原型是 Youtube 博主?Wawa sensei[20]?的?SIMS ONLINE[21]，

我們是基于這個(gè)非常棒的開(kāi)源項(xiàng)目進(jìn)行的修改，配套的視頻教程中有博主親自一步一步敲代碼教學(xué)（很推薦）：

• 視頻教程：https://www.youtube.com/watch?v=uLv1Zu8GyUw&t=14s

• 代碼鏈接：GitHub - wass08/r3f-sims-online

講的很好，強(qiáng)推一鍵三連

1.2 服務(wù)端（Server）

服務(wù)端用 python 實(shí)現(xiàn)，看起來(lái)應(yīng)該就比較輕松啦，這里主要挑幾個(gè)我認(rèn)為比較核心功能的部分講一講。

Function Calls

為了定義 agent?可以執(zhí)行哪些 action，以及在什么時(shí)間、什么場(chǎng)合，哪些行為是合法的，

我們將這些定義都實(shí)現(xiàn)在了一個(gè)叫 function_calls.py 的文件中。

我們期望有一種方便的實(shí)現(xiàn)方式，它能夠同時(shí)具備：

1. 能夠「根據(jù)工具的實(shí)現(xiàn)函數(shù)」自動(dòng)轉(zhuǎn)換成「自然語(yǔ)言」，并自動(dòng)添加到 prompt 中。

2. 只有「當(dāng)前滿(mǎn)足被使用條件的工具」才能加入到 agent 的待選列表中。

關(guān)于第 1 點(diǎn)，我們通過(guò)實(shí)現(xiàn)一個(gè)裝飾器@register_function_call_class來(lái)完成自動(dòng)生成 prompt 的功能，

python function 的函數(shù)名、函數(shù)注釋（doc string）、輸入變量來(lái)自動(dòng)生成對(duì)應(yīng)的 prompt。

舉例來(lái)講，我們實(shí)現(xiàn)一個(gè)AddMemory的工具，并帶上該裝飾器：

@register_function_call_class
class?AddMemory(BaseFunctionCall):def?call(agent_object:?object,?memory_content:?str):"""添加一條記憶信息，通常發(fā)生在獲取了新的信息之后。Args:agent_object (object): agent 對(duì)象，通常傳入 self 即可。memory_content (str):?需要添加的記憶內(nèi)容，一條概括性的關(guān)鍵信息。"""agent_object.character['memories'].append(memory_content)...

之后只需要調(diào)用 generate_all_function_calls_prompts() 方法，就會(huì)生成對(duì)應(yīng)的 prompt：

當(dāng)前所有可使用的函數(shù)以及對(duì)應(yīng)的解釋如下：* AddMemory.call(agent_object, memory_content):?添加一條記憶信息，通常發(fā)生在獲取了新的信息之后。Args:agent_object (object): agent 對(duì)象，通常傳入 self 即可。memory_content (str):?需要添加的記憶內(nèi)容，一條概括性的關(guān)鍵信息。*?(其他所有帶了裝飾器的函數(shù))...

在函數(shù)注釋中需要寫(xiě)清楚函數(shù)作用、輸入?yún)?shù)的明確含義，這樣能幫助 Agent 更容易做出正確的選擇。

關(guān)于第 2 點(diǎn)，由于我們并不希望所有的 function 在所有時(shí)刻都輸入給 Agent 做選擇，

因此每一個(gè) function_call 類(lèi)中會(huì)定義 validate_func() 方法（默認(rèn)返回 True），在每一步生成 function_call prompt 之前，env 會(huì)將當(dāng)前的狀態(tài)傳入 validate_func() 方法中，并將返回值為 True 的 function 加入到當(dāng)前的 prompt 中。

比如：只有當(dāng) Agent 在床的附近才允許選擇「睡覺(jué)」這個(gè)行為。

@register_function_call_class
class?Sleep(BaseFunctionCall):...@staticmethoddef?validate_func(agent_object,room):"""用于根據(jù)當(dāng)前狀態(tài)判斷，是否需要被加入?agent?當(dāng)前的行為空間中，若返回 False，則不會(huì)被加入，默認(rèn)返回 True。"""return?distance(agent_object.character['position'],room['bed'])?<?0.1

Extensions（獲取新聞、發(fā)布微博等）

項(xiàng)目里使用到的「微博發(fā)布」、「新聞熱點(diǎn)」這些獲取真實(shí)世界信息的函數(shù)，都被放在了 extensions 目錄下，

一共有 2 種進(jìn)行信息獲取：cookie 抓取、html tag 解析。

• cookie：發(fā)布/回復(fù)微博、稀土掘金新聞、leetcode。

• html tag 解析：搜索結(jié)果。

對(duì)于一些比較好解析的頁(yè)面，比如搜索頁(yè)面（項(xiàng)目中使用 搜狗搜索），直接抓取 html 后使用 bs4 進(jìn)行解析：

找到每個(gè) item 對(duì)應(yīng)的 div 進(jìn)行內(nèi)容解析即可

from?bs4?import?BeautifulSoupresponse?=?requests.get(url,?headers=headers,?verify=False)
response.encoding?=?'utf-8'
soup?=?BeautifulSoup(response.text,?'html.parser'
)all_search_results?=?[]
div_contents?=?soup.find_all(class_='vrwrap')?????????#?找到內(nèi)容所在的對(duì)應(yīng)?divfor?div_content?in?div_contents:cur_result?=?{}a_tag?=?div_content.find('a')if?a_tag:cur_result['title']?=?a_tag.get_text().strip()span_tag?=?div_content.find('p',?class_='star-wiki')if?span_tag:cur_result['body']?=?span_tag.get_text().strip().replace('最佳答案',?'').strip()if?'title'?in?cur_result?and?'body'?in?cur_result:all_search_results.append(cur_result)

而對(duì)于另一部分內(nèi)容「需要多次數(shù)據(jù)交互」才能獲得結(jié)果的頁(yè)面就稍微麻煩一些，

我們需要使用 cookie 的方式來(lái)模擬 post/get 請(qǐng)求，來(lái)獲得服務(wù)器的響應(yīng)結(jié)果。

以 leetcode 為例，我們需要經(jīng)過(guò)：獲取題目、輸入代碼、驗(yàn)證代碼結(jié)果這幾個(gè)步驟，

為此，我們需要明確找到每一步對(duì)應(yīng)的請(qǐng)求接口，這里以「驗(yàn)證代碼結(jié)果」為例：

通過(guò)抓取網(wǎng)絡(luò)請(qǐng)求，找到正確調(diào)用的實(shí)際接口，并按照需要的格式請(qǐng)求獲得結(jié)果

當(dāng)填寫(xiě)完 ./extensions 目錄下的所有的 COOKIE 后，可以通過(guò)一鍵腳本測(cè)試：

(base)>>>?python?-m?extensions.test_all_cookies[??Unpassed]?GeekNewsFetcher.test_fetch_geek_news
[??Passed]?GeekNewsFetcher.test_fetch_hot_list
[??Passed]?NewsFetcher.test_fetch_dongfang_news
[??Passed]?NewsFetcher.test_fetch_toutiao_news
[??Passed]?SearchFetcher.test_fetch_sougou_zhihu_results
[??Unpassed]?LeetCodeFetcher.test_get_leetcode_hot_list
[??Passed]?LeetCodeFetcher.test_get_question_details
[??Passed]?LeetCodeFetcher.test_run_code_and_get_result
[??Passed]?WeiBoTools.test_get_all_my_post_weibo
Testing?cookies...:?100%|██████████████████████████████████████████████████████████|?5/5?[00:09<00:00,??1.87s/it]
Pass?Rate:?80.00%(8/10).

通過(guò) pass 結(jié)果來(lái)判斷當(dāng)前哪些 cookie 已過(guò)期失效，需要重新獲取。

自定義世界

通過(guò)修改 default_rooms.json 文件，我們可以自定義家具的位置，以及 agent 的愛(ài)好、性格、記憶等：

[{"id":?1,"name":?"MAIN?ROOM","password":?"","items":?[{"name":?"廚房_燃?xì)庠?#34;,"size":?[2,?2],"gridPosition":?[2,?12],????????????????????????//?擺放位置"rotation":?2???????????????????????????????????//?旋轉(zhuǎn)角度（x90）},...],"characters":?[?????????????????????????????????????//?agent?屬性設(shè)置{"id":?1,"session":?1,"name":?"徐磊","gender":?"male",...,"job":?"程序員",?????????????????????????????????//?職業(yè)"hobby":?["刷新聞",?"研究技術(shù)",?"吃瓜"],???????????//?愛(ài)好"personality":?"坦誠(chéng)，喜歡分享，實(shí)事求是。",????????//?人物性格"state":?"","memories":?[]}]}
]
]

2. 一些有趣的觀測(cè)現(xiàn)象

2.1 不同職業(yè)對(duì)行為選擇的影響

我們嘗試賦予 agent 2 種不同的職業(yè)：程序員?&?自媒體工作者。

如下圖所示，職業(yè)的設(shè)定的確會(huì)對(duì) agent 的行為分布產(chǎn)生較大影響：

• 程序員：主要聚焦在「刷新聞（八卦）」、「搜索」、「leetcode」、「稀土掘金（一個(gè)技術(shù)論壇）」。

• 自媒體工作者：「刷新聞（八卦）」、「搜索」、「查看自己的微博評(píng)論」。

不同人設(shè)下的行為選擇統(tǒng)計(jì)

進(jìn)一步的，我們對(duì) 2 個(gè)職業(yè)選擇查看的「所有新聞內(nèi)容」進(jìn)行詞頻統(tǒng)計(jì)：

哪邊是「程序員」應(yīng)該不用備注了:)

此外，由于我們?cè)试S agent 對(duì)自己好奇的內(nèi)容進(jìn)行搜索，所以我們也對(duì)兩個(gè) agent 的「搜索詞」進(jìn)行統(tǒng)計(jì)：

自媒體工作者（左），不知道為什么這么癡迷做飯 & 程序員（右），什么都喜歡搜

2.2 不同人設(shè)對(duì)行為選擇的影響

在同為「程序員」的職業(yè)下，我們賦予不同的細(xì)節(jié)人設(shè)：

1. 佛系的吃貨 1 號(hào)（對(duì)應(yīng)人設(shè)統(tǒng)計(jì)圖的第一行）。

2. 熱愛(ài)編程的極客 2 號(hào)（對(duì)應(yīng)人設(shè)統(tǒng)計(jì)圖的第二行）。

我們發(fā)現(xiàn)，相比之下極客 2 號(hào)搜索 query 會(huì)雜一些，而吃貨 1 號(hào)就一直在搜附近的吃的（=-=）

吃貨程序員（左）和極客程序員（右）的搜索詞

除了搜索詞，我們還發(fā)現(xiàn)這兩個(gè)程序員在選擇 leetcode 時(shí)偏好的難度也不一樣：

佛系 1 號(hào)（左）和極客 2 號(hào)（右）

吃貨程序員會(huì)更傾向選擇簡(jiǎn)單（Easy）難度的題來(lái)做：選擇最多的是 兩數(shù)之和。

極客程序員會(huì)更傾向選擇中等（Mdeium）難度的題來(lái)做：選擇最多的是 兩數(shù)相加，偶爾也會(huì)挑戰(zhàn)一把 正數(shù)數(shù)組中位數(shù)（Hard 難度）。

好啦，以上就是全部?jī)?nèi)容啦，感謝觀看~

參考資料

[1]

Agent Life Live Demo:?http://192.144.228.48

[2]

Agent Life Action Logging Board:?http://192.144.228.48:8901/

[3]

斯坦福小鎮(zhèn):?https://arxiv.org/pdf/2304.03442v1

[4]

AI Town:?https://www.convex.dev/ai-town

[5]

6個(gè)AI合租:?https://www.bilibili.com/video/BV1MkxeeYEEb

[6]

第一個(gè)版本的 demo:?http://192.144.228.48/

[7]

視頻:?https://www.bilibili.com/video/BV1fbz4YLEcA/

[8]

three.js:?https://threejs.org/docs/#manual/zh/introduction/Installation

[9]

Three.js Journey:?https://www.bilibili.com/video/BV1Ki4y1a72S

[10]

React Three Fiber（R3F）:?https://r3f.docs.pmnd.rs/getting-started/introduction

[11]

React:?https://react.dev/learn

[12]

streamlit:?https://streamlit.io/

[13]

gradio:?https://www.gradio.app/

[14]

React Three Fiber:?https://r3f.docs.pmnd.rs/getting-started/introduction

[15]

R3F官網(wǎng):?https://r3f.docs.pmnd.rs/getting-started/introduction

[16]

sandbox:?https://codesandbox.io/p/sandbox/5g22g7

[17]

tailwind css:?https://tailwindcss.com/

[18]

Ready Player Me:?https://readyplayer.me/avatar

[19]

mixamo:?https://www.mixamo.com/#/

[20]

Wawa sensei:?https://www.youtube.com/@WawaSensei

[21]

SIMS ONLINE:?https://github.com/wass08/r3f-sims-online