Contributes369
Followers0
現狀：Threejs官方demo提供了DragControls.js平面拖拽控件，但只能拖拽Object在垂直於相機法線的平面上移動 目標場景：在六面體空間盒子中沿着六面體平面拖拽物體，並且需要限制在盒子內部 已知：空間盒子大小，對象所在的平面 方案設計： 將Object拖拽依賴的信息放在userData中，示例如下 基於拖拽控件，改造部分關鍵代碼，實現目標 // 模型對
Nickname PatWu16
引言 在當今數字化的時代，3D圖形技術正以其獨特的魅力在各個領域掀起波瀾。從影視製作到遊戲開發，從虛擬現實到網頁交互，3D場景以其強烈的視覺衝擊力和沉浸式的體驗，成為了吸引用户、傳達信息的重要手段。而Three.js，作為一款功能強大且廣受歡迎的JavaScript 3D庫，為我們提供了便捷、高效的途徑來創建令人炫目的3D場景。本文將深入探討使用Three.js渲染器創建炫酷3D場景的方方面面，帶
Nickname Front_Yue
背景 常規的後台管理系統登陸頁面可能就只是一個簡單的背景頁面，這不太好看，接下來讓我們來使用three.js來實現一個動態的海洋和天空效果當作背景，這樣的效果總會讓人眼前一亮，如下圖所示。 代碼實現 接下來，讓我們用trae來編寫實現這個功能吧。 1. 組合式 API 初始化 import { onMounted, onBeforeUnmount } from "vue"; import * a
Nickname 夕水
transformControls拖拽結束以後會以結束點的射線拾取重新選中新的模型，這裏發現是監聽事件的問題 // 創建 TransformControls const transformControls = new TransformControls(camera, renderer.domElement); const transformControlsHelp
Nickname 友人A
實現效果 數據來源 地圖的是通過這個 shape 描繪成形狀展示的，數據可以通過 datav.aliyun 地圖json小工具 獲取到 數據拿到之後，就是展示的問題，直接展示是不行的，需要通過 d3 對數據處理，才能按照正確的地圖樣子展示 import * as d3 from "d3"; //莫開託座標 矯正地圖座標 //center 的位置可以自己定 const ha
Nickname 水木清華
手動擋經常會改不齊全，發現能寫正則還是很方便的。 find replace調出替換面板 也可以快捷鍵 command+alt+F 這個引用到複雜點的數據裏面 真的省事不要太多 方便不要太多 我知道得太遲了。。。。。。 mark一下 僅供參考 歡迎更正補充 end
Nickname Jerry
hello 大家好，我是 superZidan，這篇文章想跟大家聊聊Next.js 進階技巧，如果大家遇到任何問題，歡迎 聯繫我或者直接微信添加superZidan41 🔥🔥🔥前方高能，乾貨滿滿，建議點贊➕關注➕收藏；後續還會 持續更新更多技巧和案例 温馨提示：如果你還是個 Next.js 新手，建議先閲讀這篇 Next.js 最佳實踐，照着這篇文章先把代碼敲一遍 Next.js 是一個強
Nickname superZidan
hello 大家好，我是 superZidan，這篇文章想跟大家聊聊 Next.js 中的流式渲染和分塊傳輸機制 ，如果大家遇到任何問題，歡迎 聯繫我或者直接微信添加superZidan41 🔥🔥🔥前方高能，乾貨滿滿，建議點贊➕關注➕收藏； 温馨提示：如果你還是個 Next.js 新手，建議先閲讀這篇 Next.js 最佳實踐，照着這篇文章先把代碼敲一遍 簡述 在本篇文章中，我們將深入探索組
Nickname superZidan
Million.js 是一個非常快速和輕量級的 ( 4kb) 虛擬 DOM。框架可以通過包裝 React 組件來提升性能（該框架目前版本只兼容 React 18 及以上版本）。 先説結論：Million.js 適應的場景極其有限，但在特定場景下也大放異彩。 如何使用 Million.js 集成 React 中使用非常簡單。先進行安裝和編譯器配置。 安裝與配置 npm install million
Nickname jump__jump
1 前言 關注用户體驗，提高頁面性能，是每位前端研發同學的日常工作之一。提高頁面性能對業務的幫助，雖不易衡量，但肯定是利遠大於弊。如何衡量頁面性能優劣？如何幫助研發同學快速定位到頁面性能瓶頸點？一直是前端的重點工作之一。本文分享汽車之家在頁面性能監控建設方面的部分工作，主要包含三方面： 技術選型 該選擇哪些頁面性能監控技術方案？ 在儘可能不影響頁面性能的前提下，既能客觀、全面衡量頁面性能，又
Nickname 之家技術
Vue.js 是一個流行且強大的 JavaScript 框架，它允許我們構建動態和交互式 Web 應用程序。 然而，與任何軟件一樣，Vue.js 應用程序有時會遇到內存泄漏，從而導致性能下降和意外行為。 今天，我們將深入探討 Vue.js 應用程序中內存泄漏的原因，並探索如何定位和修復這些問題的有效策略。 什麼是內存泄漏 ? 當程序執行過程中保留不再需要的內存時（主要是一些 變量、 方法等），會阻
Nickname Sean
Web 頁面性能衡量指標-以用户為中心的性能指標 以用户為中心的性能指標是理解和改進站點體驗的關鍵點 一、以用户為中心的性能指標 1. 指標是用來幹啥的？ 指標是用來衡量性能和用户體驗的 2. 指標類型 感知加載速度：網頁可以多快地加載網頁中的所有視覺元素並將其渲染到屏幕上 加載響應速度：頁面加載和執行組件快速響應用户互動所需的 JavaScript 代碼的速度 運行時響應速度：網頁在加載
Nickname 月恆
Web 網頁性能及性能優化 一、Web 性能 Web 性能是 Web 開發的一個重要方面，側重於網頁加載速度以及對用户輸入的響應速度 通過優化網站來改善性能，可以在為用户提供更好的體驗 網頁性能既廣泛又非常深入 1. 為什麼性能這麼重要？ 1. 性能關乎留住用户 性能對於任何在線業務都至關重要 與加載速度緩慢、讓人感覺運行緩慢的網站相比，加載速度快並能及時響應用户輸入的網站能更好地吸引並留住用户
Nickname 月恆
之前，何同學的視頻在網上活了一陣子。引發了我們思考：5G將會給我們帶來什麼。同時也回顧了4G乃至3G時代已經給我們帶來了哪些新的變革。最近，一個問題總是時不時的冒出我的腦海：前端性能優化時候還有必要？ 回顧前端性能優化 然後我找到了 雅虎軍規 的 35 條 儘量減少 HTTP 請求個數——須權衡 使用 CDN（內容分發網絡） 為文件頭指定 Expires 或 Cache-Con
Nickname 源泉
所謂web,即使你我素未謀面，便知志趣相投；足不出户，亦知世界之大。 最近收到一個用户提的需求場景，當JavaScript發生異常錯誤時，如果我們能記錄出錯前鼠標點擊、頁面跳轉、網絡請求，控制枱打印等信息，這樣我們便能更快速的帶您重返"失事"現場。我覺得這個想法挺好的，那就加入我們的前端監控試試呢？我實現了一套目前的解決方案：一鍵還原出錯代碼和出錯場景還原。如果你們有更好的解決方案，一定要聯繫我
Nickname 前端開源監控作者
所謂web,即使你我素未謀面，便知志趣相投；足不出户，亦知世界之大。 01 - 什麼是閾值報警功能 在我們前端監控系統中，雖然我們收集了用户實時訪問應用數據信息，並提供可視化界面方便用户查詢，但是作為一款監控系統，卻少了靈魂的東西，那就是自動報警功能，因為我們並不喜歡，也沒人願意時時刻刻查看監控系統。因此，我們需要自動報警。 那自動報警怎麼做呢？自動報警意味着我們事先定義好一系列規
Nickname 前端開源監控作者
本文首發於知乎《10分鐘徹底搞懂前端頁面性能監控》，搬運轉載請註明出處，否則追究版權責任。 前言 前端頁面性能是一個非常核心的用户體驗指標。本文介紹阿里UC 嶽鷹全景監控平台 如何設計一個通用、低侵入性、自動上報的頁面性能監控方案。主要採用的是Navigation Timing API以及sendBeacon等方法。 為什麼要監控頁面性能？ 一個頁面性能差的話會大大影響用户體驗。用户打開頁面等待的
Nickname Marks
完整高頻題庫倉庫地址：https://github.com/hzfe/awesome-interview 完整高頻題庫閲讀地址：https://febook.hzfe.org/ 相關問題 什麼是瀏覽器事件循環 瀏覽器為什麼需要事件循環 Node.js 中的事件循環 回答關鍵點 任務隊列 異步 非阻塞 瀏覽器需要事件循環來協調事件、用户操作、腳本執行、渲染、網絡請求等。通過事件循環，瀏覽器
Nickname HZFEStudio
作者：京東科技 周明亮 AST 基礎與功能 在前端裏面有一個很重要的概念，也是最原子化的內容，就是 AST ，幾乎所有的框架，都是基於 AST 進行改造運行，比如：React / Vue /Taro 等等。 多端的運行使用，都離不開 AST 這個概念。 在大家理解相關原理和背景後，我們可以通過手寫簡單的編譯器，簡單實現一個 Javascript 的代碼編譯器，編譯後在瀏覽器端正常運行。 創建數字小
Nickname 京東雲開發者
説起數據加載的機制，有一個繞不開的話題就是前端性能，很多電商門户的首頁其實都會做一些垂直的定製優化，比如讓請求在頁面最早加載，或者在前一個頁面就進行預加載等等。隨着react18的發佈，請求機制這一塊也是被不斷談起，並且在後續其實也給出了明確的方向。 假如我們頁面中有三個組件C1、C2、C3依次嵌套，每個組件中有對應的請求F1、F2、F3，通常大多數人會使用useeffect和state變量來實現
Nickname 京東雲開發者
flex 佈局原理 全稱 flexible box，彈性佈局。 如何開啓：為元素添加 display: flex。 開啓 flex 佈局的元素，稱為 flex 容器（flex container），其子元素成為容器成員，稱為 flex 項目。 flex 佈局原理：通過給父盒子添加 display: flex，來控制盒子的位置和排列方式。 flex 佈局父盒子常見屬性 flex-direction
Nickname 麒寧
flex無法創建滾動條 flex的孫元素使用overflow: auto無法出現滾動條 原因： 子元素沒有設置寬度，這會導致子元素的寬度由孫元素決定，從而子元素被撐大，孫元素無法達到出現滾動條的條件。 解決方案： 給子元素設置寬度，比如width:100%; flex佈局和文字溢出省略遭遇的問題 https://segmentfault.com/a/1190000045
Nickname 熱飯班長
系列文章導讀： 在AI巨浪滔天的2024年，當所有開發者都在討論Copilot和Sora時，一個團隊卻“逆流而行”，基於古老的Vim Language打造了一門新語言，並提出了一個驚人的目標：“讓AI無法取代程序員”。這究竟是異想天開，還是抓住了問題的本質？本系列文章將分三部分，客觀解讀這份技術文檔背後的“狂想”與“底氣”。 （上篇）一個“復古”的破局者 （中篇）“三位一體”的Supe
Nickname codigger
最近一段時間留意到一個叫Svelte的前端框架，它與Vue 等前端框架的最大不同是採用了編譯的方案進行的實現，這是官網的介紹 Svelte 是一種全新的構建用户界面的方法。傳統框架如 React 和 Vue 在瀏覽器中需要做大量的工作，而 Svelte 將這些工作放到構建應用程序的編譯階段來處理。 與使用虛擬（virtual）DOM 差異對比不同。Svelte 編寫的代碼在應用程序的狀態更改時就
Nickname yangrd
