博客 / 列表

xachary - 使用Three.js如何通過代碼動態改變模型的視角

場景 作為剛剛接觸 Three.js 的小白,在工作中遇到下面的需求: 加載一個 3D 模型 通過代碼切換預設的任意模型的視角 最終效果(在線示例): 👆基於官方示例增加的控制代碼 我們通過官方示例可以知道,只要使用 OrbitControls 就可以通過鼠標調整模型的視角。可是,能不能通過代碼,切換特定的視角呢?有沒有官方的 API 可以實現這個交互呢?小白暫時未能找到拿來即用的示例

three.js , 3d , 前端

xachary - 手把手使用 SVG + CSS 實現漸變進度環效果

效果 在線Demo 軌道 使用 svg 畫個軌道 svg viewBox="0 0 100 100" circle cx="50" cy="50" r="40" fill="none" stroke-width="10" stroke="#333"/circle /svg 簡單的説,就是使用 circle 畫個圓。需要注意的是,軌道實際是 circle 的 stroke,所以目

css3 , Javascript , svg

xachary - 基於 CSS Grid 的簡易拖拉拽 Vue3 組件,從代碼到NPM發佈(3)- 小結

基本完成了拖動、調整大小、拖入、拖出、嵌套、刪除等特性,可以基於組件嵌套,也可以基於數據結構嵌套。算是告一段落了,後面在使用過程發現問題解決問題好了。 請大家動動小手,給我一個免費的 Star 吧~ 大家如果發現了 Bug,歡迎來提 Issue 喲~ github源碼 NPM 示例地址 文檔 交互細節 拖動 基本拖動 拖動區域擴展 拖動目標判斷 調整大小 基本調整大小 調整

組件庫 , vue3 , 拖拽 , typescript , 前端

xachary - 基於 CSS Grid 的簡易拖拉拽 Vue3 組件,從代碼到NPM發佈(2)- NPM發佈、在線示例

這裏分享一下本開源項目是如何構建組件庫及其如何發佈到NPM上的,還有組件庫與在線示例的構建有什麼差異。 請大家動動小手,給我一個免費的 Star 吧~ 大家如果發現了 Bug,歡迎來提 Issue 喲~ github源碼 NPM 示例地址 文檔 版本更新信息 拖動 調整大小 拖入 嵌套 有限的嵌套 關於構建 與構建有關的文件,主要有: └─ dist - 構建的組件

組件庫 , vue3 , 拖拽 , typescript , 前端

xachary - 基於 CSS Grid 的簡易拖拉拽 Vue3 組件,從代碼到NPM發佈(1)- 拖拉拽交互

基於特定的應用場景,需要在頁面中以網格的方式,實現目標組件在網格中可以進行拖拉拽、修改大小等交互。本章開始分享如何一步步從代碼設計,最後到如何在 NPM 上發佈。 請大家動動小手,給我一個免費的 Star 吧~ 大家如果發現了 Bug,歡迎來提 Issue 喲~ github源碼 示例地址 文檔 特別説明一下,此組件是基於 CSS 的 display: grid 的,並非全能型拖拉拽

組件庫 , vue3 , 拖拽 , typescript , 前端

xachary - 手把手實現一個圖片可縮放可拖拽的 Vue3 組件

在工作中經常遇到需要預覽一張尺寸可能非常大的圖片,初始化顯示的時候,希望它自適應顯示區域後,還可以縮放並可以在顯示區域中拖拽。 在這裏,手把手展示一下如何實現一個簡單的組件,以實現上述的需求。 效果展示 先看看效果 可以直達👇 示例倉庫 | 示例文檔 | 在線示例 別忘了,可以帶話,給我一個 Star 喲! 實現 Hook 在實現組件之前,可以先實現一個 hook,以包含核心邏輯,後面實現 組

css3 , 組件庫 , vue3