Contributes11
Followers0
作者：來自 vivo 互聯網前端團隊- Su Ning 作為一個3D的項目，從用户打開頁面到最終模型的渲染需要經過多個流程，加載的時間也會比普通的H5項目要更長一些，從而造成大量的用户流失。為了提升首屏加載的轉化率，需要儘可能的降低loading的時間。這裏就分享一些我們在模型加載優化方面的心得。 一、前言 近段時間，我們使用three.js完成了vivo擬我形象的開發工作，大家可以在vivo賬號
Nickname vivo互聯網技術
基於vue3+threejs實現太陽系與奧爾特雲層（結尾附源碼） 先看效果，附源碼地址，看完覺得還不錯的還望不吝一個小小的star 在線預覽：預覽 1 快速上手 1.1 在項目中使用 npm 包引入 Step 1: 使用命令行在項目目錄下執行以下命令 npm install three@0.148.0 --save Step 2: 在需要用到 three 的 JS 文件中導入
Nickname 紫槐
背景 在上一篇文章 《如何實現一個充滿科技感的官網（一）》 中，我們初步瞭解了該官網的整體設計，並與大家探討了它的視覺呈現和用户體驗。 我們前期的內部設計偏向簡潔，所以開始思考如何提升網站的整體設計感。這些嘗試便由此展開。 網站地址：https://infinilabs.com/ 如果你對動態背景的實現感興趣，這篇文章將帶你深入探索，揭秘如何從零打造一個兼具美感與功能性的企業官網！ 技術選型
Nickname 極限實驗室
場景 作為剛剛接觸 Three.js 的小白，在工作中遇到下面的需求： 加載一個 3D 模型 通過代碼切換預設的任意模型的視角 最終效果（在線示例）： 👆基於官方示例增加的控制代碼 我們通過官方示例可以知道，只要使用 OrbitControls 就可以通過鼠標調整模型的視角。可是，能不能通過代碼，切換特定的視角呢？有沒有官方的 API 可以實現這個交互呢？小白暫時未能找到拿來即用的示例
Nickname xachary
現狀：Threejs官方demo提供了DragControls.js平面拖拽控件，但只能拖拽Object在垂直於相機法線的平面上移動 目標場景：在六面體空間盒子中沿着六面體平面拖拽物體，並且需要限制在盒子內部 已知：空間盒子大小，對象所在的平面 方案設計： 將Object拖拽依賴的信息放在userData中，示例如下 基於拖拽控件，改造部分關鍵代碼，實現目標 // 模型對
Nickname PatWu16
作者：來自 vivo 互聯網大前端團隊- Su Ning 本文將探討 three.js 中的陰影渲染機制，並分享一些針對性能和效果優化的實用技巧，幫助開發者在不同場景下做出最佳的權衡選擇。 一、前言 在3D網頁應用中，高質量的陰影渲染對於營造場景的真實感至關重要。作為廣泛採用的 WebGL 框架之一，three.js 為開發者提供了多種陰影渲染選項，使得創建生動逼真的光影效果成為可能。然而，實現這
Nickname vivo互聯網技術
引言 在當今數字化的時代，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 夕水
把 TIF 解析成可用紋理（如 PNG/JPEG 或直接用 TIF）。 把它當作材質貼到一個 PlaneGeometry 上。 按照它對應的座標範圍換算成 Three.js 世界座標。 把 Plane 放置在對應位置。 !DOCTYPE html html head meta charset="UTF-8" titleThree.js Scene/title style
Nickname 友人A
🚀 【重磅發佈】Meteor3DEditor —— 你的數字孿生世界，從此觸手可及！ 還在為複雜的3D開發頭疼？Meteor3DEditor 來了！基於 Three.js + Vue3 打造的全新低代碼數字孿生平台，讓你像玩積木一樣輕鬆搭建3D場景！🎮 ✨ 為什麼選擇 Meteor3DEditor？ ✔ 零門檻可視化編輯 —— 拖拽組件，自由佈局，無需深厚編程基礎 ✔ 超強二次開發
Nickname 友人A
記錄threejs實現夜景光照、投影、陰影、反射、材質顏色編碼的效果 主要是光源設置了shadow、encoding !DOCTYPE html html head meta charset="UTF-8" titleThree.js Scene/title style body { margin: 0; }
Nickname 友人A
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 水木清華
作者： vivo 互聯網前端團隊- Su Ning 本文從多個維度對比 Galacean 和 Three.js 兩款Web3D 引擎的差異，並介紹擬我形象項目從Three.js 切換到 Galacean 以後帶來的提升以及項目遷移的心得，為其他 Three.js 項目升級到 Galacean 提供參考。 1分鐘看圖掌握核心觀點👇 一、背景 Web 3D 技術的發展日新月異，為我們帶來了
Nickname vivo互聯網技術
引言 隨着時代的發展和科技的進步，人們的生活水平和消費需求不斷提高。商場作為購物、休閒、娛樂的綜合性場所，受到了越來越多消費者的青睞。然而，隨着商場規模的不斷擴大和樓層的增多，很多人在商場內總是感到迷茫，很難快速找到目標店家。為了解決這一問題，利用 WebGL 和 Three.js 技術實現多樓層商場地圖成為了一種新的解決方案。 WebGL 和 Three.js 簡介 WebGL 是一種用於在網頁
Nickname 前端不太難
背景 前段時間完成一個公司官網項目，個人第一感覺是整體風格簡潔但充滿科技感。所以想着抽時間寫篇文章出來分享一下（其實想着拿出來炫一下，得瑟一下，滿足一下自身虛榮心，請大家包容一下我的虛榮心，莫噴。） 抽空寫下這篇文章，既是分享，也希望能夠聽到更多反饋。 官網地址是：https://infinilabs.com/， 大家可以先去看看。對了，也歡迎直接在評論區告訴我：“這樣的官網設計，你覺得怎麼樣？”
Nickname 極限實驗室
Apple 2025 年度發佈會 LOGO 以標誌性的蘋果圖形被注入熾熱的火焰質感，色彩從暖調橙黃向冷調湛藍自然過渡，似高温灼燒下的金屬表面，迸發出熔融的光澤；又若無形的能量在流動，勾勒出科技的脈搏與律動，將 “科技” 與 “力量” 的碰撞感具象化，光影的明暗交錯削弱了平面的單薄感，賦予其近乎觸手可及的質感，同時營造出濃郁的未來感與未知感。 摘要 如上述引用內容，本文將基於 React +
Nickname dragonir