tag three.js

標籤
貢獻21
81
05:52 PM · Oct 25 ,2025
rexindezicai_ema39t 頭像 yourena_c 頭像 zengshenaiguodeyangcong 頭像 vivo_tech 頭像 daqidehaigui 頭像 infinilabs 頭像 u_15964288 頭像 dragonir 頭像 kestrel_task 頭像 xxx_691eb5aa879e2 頭像 pingxingyun 頭像 u_17585481 頭像

@three.js / 博客 RSS 訂閱

xishui_5ac9a340a5484 頭像

夕水 - 手寫一個動態海洋和天空效果的vue hooks

背景 常規的後台管理系統登陸頁面可能就只是一個簡單的背景頁面，這不太好看，接下來讓我們來使用three.js來實現一個動態的海洋和天空效果當作背景，這樣的效果總會讓人眼前一亮，如下圖所示。 代碼實現 接下來，讓我們用trae來編寫實現這個功能吧。 1. 組合式 API 初始化 import { onMounted, onBeforeUnmount } from "vue"; import * a

vue.js , three.js , 前端 , Javascript

收藏 評論

vivo_tech 頭像

vivo互聯網技術 - 基於 Three.js 的 3D 模型加載優化

作者：來自 vivo 互聯網前端團隊- Su Ning 作為一個3D的項目，從用户打開頁面到最終模型的渲染需要經過多個流程，加載的時間也會比普通的H5項目要更長一些，從而造成大量的用户流失。為了提升首屏加載的轉化率，需要儘可能的降低loading的時間。這裏就分享一些我們在模型加載優化方面的心得。 一、前言 近段時間，我們使用three.js完成了vivo擬我形象的開發工作，大家可以在vivo賬號

rust , three.js , webassembly , 3d

收藏 評論

zihuai1949 頭像

紫槐 - 基於vue3+threejs實現太陽系與奧爾特雲層（結尾附源碼）

基於vue3+threejs實現太陽系與奧爾特雲層（結尾附源碼） 先看效果，附源碼地址，看完覺得還不錯的還望不吝一個小小的star 在線預覽：預覽 1 快速上手 1.1 在項目中使用 npm 包引入 Step 1: 使用命令行在項目目錄下執行以下命令 npm install three@0.148.0 --save Step 2: 在需要用到 three 的 JS 文件中導入

three.js , vue3

收藏 評論

infinilabs 頭像

極限實驗室 - 如何實現一個充滿科技感的官網（一）

背景 前段時間完成一個公司官網項目，個人第一感覺是整體風格簡潔但充滿科技感。所以想着抽時間寫篇文章出來分享一下（其實想着拿出來炫一下，得瑟一下，滿足一下自身虛榮心，請大家包容一下我的虛榮心，莫噴。） 抽空寫下這篇文章，既是分享，也希望能夠聽到更多反饋。 官網地址是：https://infinilabs.com/， 大家可以先去看看。對了，也歡迎直接在評論區告訴我：“這樣的官網設計，你覺得怎麼樣？”

react , three.js , next.js , Web

收藏 評論

infinilabs 頭像

極限實驗室 - 如何實現一個充滿科技感的官網（二）

背景 在上一篇文章 《如何實現一個充滿科技感的官網（一）》 中，我們初步瞭解了該官網的整體設計，並與大家探討了它的視覺呈現和用户體驗。 我們前期的內部設計偏向簡潔，所以開始思考如何提升網站的整體設計感。這些嘗試便由此展開。 網站地址：https://infinilabs.com/ 如果你對動態背景的實現感興趣，這篇文章將帶你深入探索，揭秘如何從零打造一個兼具美感與功能性的企業官網！ 技術選型

react , three.js , next.js

收藏 評論

hui_61e3b3803b922 頭像

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

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

three.js , 3d , 前端

收藏 評論

wupeng_5a4de5c290b9d 頭像

PatWu16 - DragControls拖拽插件優化：從指定平面到任意平面

現狀：Threejs官方demo提供了DragControls.js平面拖拽控件，但只能拖拽Object在垂直於相機法線的平面上移動 目標場景：在六面體空間盒子中沿着六面體平面拖拽物體，並且需要限制在盒子內部 已知：空間盒子大小，對象所在的平面 方案設計： 將Object拖拽依賴的信息放在userData中，示例如下 基於拖拽控件，改造部分關鍵代碼，實現目標 // 模型對

three.js , 前端 , Javascript

收藏 評論

vivo_tech 頭像

vivo互聯網技術 - 基於three.js的虛擬人陰影渲染優化方案

作者：來自 vivo 互聯網大前端團隊- Su Ning 本文將探討 three.js 中的陰影渲染機制，並分享一些針對性能和效果優化的實用技巧，幫助開發者在不同場景下做出最佳的權衡選擇。 一、前言 在3D網頁應用中，高質量的陰影渲染對於營造場景的真實感至關重要。作為廣泛採用的 WebGL 框架之一，three.js 為開發者提供了多種陰影渲染選項，使得創建生動逼真的光影效果成為可能。然而，實現這

three.js , web3 , 前端

收藏 評論

front_yue 頭像

Front_Yue - 使用Three.js渲染器創建炫酷3D場景

引言 在當今數字化的時代，3D圖形技術正以其獨特的魅力在各個領域掀起波瀾。從影視製作到遊戲開發，從虛擬現實到網頁交互，3D場景以其強烈的視覺衝擊力和沉浸式的體驗，成為了吸引用户、傳達信息的重要手段。而Three.js，作為一款功能強大且廣受歡迎的JavaScript 3D庫，為我們提供了便捷、高效的途徑來創建令人炫目的3D場景。本文將深入探討使用Three.js渲染器創建炫酷3D場景的方方面面，帶

three.js , 3d , Javascript

收藏 評論

webyue 頭像

前端不太難 - 利用 WebGL 和 Three.js 實現多樓層商場地圖

引言 隨着時代的發展和科技的進步，人們的生活水平和消費需求不斷提高。商場作為購物、休閒、娛樂的綜合性場所，受到了越來越多消費者的青睞。然而，隨着商場規模的不斷擴大和樓層的增多，很多人在商場內總是感到迷茫，很難快速找到目標店家。為了解決這一問題，利用 WebGL 和 Three.js 技術實現多樓層商場地圖成為了一種新的解決方案。 WebGL 和 Three.js 簡介 WebGL 是一種用於在網頁

three.js , webgl

收藏 評論

yourena_c 頭像

友人A - threejs接入gis地圖

把 TIF 解析成可用紋理（如 PNG/JPEG 或直接用 TIF）。 把它當作材質貼到一個 PlaneGeometry 上。 按照它對應的座標範圍換算成 Three.js 世界座標。 把 Plane 放置在對應位置。 !DOCTYPE html html head meta charset="UTF-8" titleThree.js Scene/title style

three.js

收藏 評論

yourena_c 頭像

友人A - 低代碼數字孿生三維開發框架

🚀 【重磅發佈】Meteor3DEditor —— 你的數字孿生世界，從此觸手可及！ 還在為複雜的3D開發頭疼？Meteor3DEditor 來了！基於 Three.js + Vue3 打造的全新低代碼數字孿生平台，讓你像玩積木一樣輕鬆搭建3D場景！🎮 ✨ 為什麼選擇 Meteor3DEditor？ ✔ 零門檻可視化編輯 —— 拖拽組件，自由佈局，無需深厚編程基礎 ✔ 超強二次開發

three.js , 低代碼開發平台 , 三維模型 , gis

收藏 評論

yourena_c 頭像

友人A - threejs-夜景

記錄threejs實現夜景光照、投影、陰影、反射、材質顏色編碼的效果 主要是光源設置了shadow、encoding !DOCTYPE html html head meta charset="UTF-8" titleThree.js Scene/title style body { margin: 0; }

three.js , 三維模型 , gis , 前端

收藏 評論

yourena_c 頭像

友人A - threejs的transformControls拖拽結束的異常

transformControls拖拽結束以後會以結束點的射線拾取重新選中新的模型，這裏發現是監聽事件的問題 // 創建 TransformControls const transformControls = new TransformControls(camera, renderer.domElement); const transformControlsHelp

three.js , 前端 , Javascript

收藏 評論

huyouxueboshi 頭像

水木清華 - Three.js實現3D地圖可視化-省份

實現效果 數據來源 地圖的是通過這個 shape 描繪成形狀展示的，數據可以通過 datav.aliyun 地圖json小工具 獲取到 數據拿到之後，就是展示的問題，直接展示是不行的，需要通過 d3 對數據處理，才能按照正確的地圖樣子展示 import * as d3 from "d3"; //莫開託座標 矯正地圖座標 //center 的位置可以自己定 const ha

vue.js , three.js , Javascript

收藏 評論

vivo_tech 頭像

vivo互聯網技術 - 擁抱新一代 Web 3D 引擎，Three.js 項目快速升級 Galacean 指南

作者： vivo 互聯網前端團隊- Su Ning 本文從多個維度對比 Galacean 和 Three.js 兩款Web3D 引擎的差異，並介紹擬我形象項目從Three.js 切換到 Galacean 以後帶來的提升以及項目遷移的心得，為其他 Three.js 項目升級到 Galacean 提供參考。 1分鐘看圖掌握核心觀點👇 一、背景 Web 3D 技術的發展日新月異，為我們帶來了

three.js , 前端

收藏 評論

dragonir 頭像

dragonir - React+Three.js 實現 Apple 2025 熱成像 logo

Apple 2025 年度發佈會 LOGO 以標誌性的蘋果圖形被注入熾熱的火焰質感，色彩從暖調橙黃向冷調湛藍自然過渡，似高温灼燒下的金屬表面，迸發出熔融的光澤；又若無形的能量在流動，勾勒出科技的脈搏與律動，將 “科技” 與 “力量” 的碰撞感具象化，光影的明暗交錯削弱了平面的單薄感，賦予其近乎觸手可及的質感，同時營造出濃郁的未來感與未知感。 摘要 如上述引用內容，本文將基於 React +

react , three.js , 知識 , 前端 , Javascript

收藏 評論

rexindezicai_ema39t 頭像

Addison - 實戰分享：如何打造高承載、低延遲的 Web 端“3D 數字孿生”可視化大屏（附在線演示）

🚀 前言：從二維圖表到三維空間 在工業 4.0 和智慧城市的浪潮下，傳統的二維數據大屏（餅圖、柱狀圖）已經難以滿足複雜的管理需求。管理者不僅需要看到“數據”，更需要看到數據在物理空間中的位置和狀態。 作為一名專注於 3D 呈現與數字孿生定製 的開發者，今天結合我們最新的落地案例，分享一套基於 WebGL 技術的高性能可視化解決方案。 🎨 效果演示 首先直觀地看下最終交付的效果。這是一個純 We

three.js , 數據可視化 , 3d , 數字孿生 , 前端

收藏 評論

xingxingshangdesigua 頭像

星星上的絲瓜 - JSAPIThree 加載單體三維模型學習筆記：SimpleModel 簡易加載方式

在三維場景中加載模型是最常見的需求之一。雖然可以直接使用 Three.js 的 GLTFLoader，但在不同投影方式下需要手動處理座標轉換，比較麻煩。今天就來學習 mapvthree 提供的 SimpleModel 類，看看它是如何簡化這個過程的。 瞭解 SimpleModel SimpleModel 是 mapvthree 對 Three.js 模型加載的封裝，主要解決了以下問題： 原生 Th

three.js , 學習筆記 , 三維模型

收藏 評論

daqidehaigui 頭像

大氣的海龜 - 百度地圖JSAPI THREE 熱力圖開發教程

百度地圖JSAPI THREE 熱力圖開發教程：從 2D 到 3D 的完整實踐 熱力圖是一種常見的數據可視化方式，通過顏色深淺來展示數據的密度分佈。在 MapVThree 中，提供了兩種熱力圖組件：Heatmap（2D 熱力圖）和 Heatmap3D（3D 熱力圖）。 一、環境準備 在使用熱力圖之前，需要先創建一個 MapVThree 引擎實例。這是所有地圖可視化功能的基礎容器。 import

熱力圖 , three.js , 數據可視化

收藏 評論

daqidehaigui 頭像

大氣的海龜 - 百度地圖JSAPI THREE實現平滑的地圖視角切換

百度地圖JSAPI THREE實現平滑的地圖視角切換 在地圖可視化應用中，平滑的視角切換能夠顯著提升用户體驗。百度地圖JSAPI THREE(又稱MapvTHREE) 提供了 flyTo 方法，可以實現從當前視角到目標位置的平滑過渡動畫。本文將詳細介紹 flyTo 方法的使用方法，幫助你掌握地圖相機動畫的控制技巧。 一、flyTo 方法概述 flyTo 是 MapVThree 引擎中用於實現平滑相

three.js , 可視化 , 前端

收藏 評論

u_17585481 頭像

mb691d8fa7dc4b1 - mapvthree Engine 設計分析——二三維一體化的架構設計

mapvthree Engine 作為二三維一體化渲染引擎的核心，其設計理念既不同於傳統地圖引擎，也不同於純粹的 3D 渲染引擎。本文將從架構設計的角度，深入分析 Engine 如何巧妙地融合兩種設計範式，創造出獨特的二三維一體化架構。 注： mapvthree 是 JSAPI Three（百度地圖 JavaScript API Three）在代碼中的命名空間。

yyds乾貨盤點 , mapvthree , 架構設計 , three.js , Engine , 二三維一體化 , 前端開發 , Javascript

收藏 評論

zengshenaiguodeyangcong 頭像

曾深愛過的洋葱 - mapvthree Engine 設計分析——二三維一體化的架構設計

mapvthree Engine 作為二三維一體化渲染引擎的核心，其設計理念既不同於傳統地圖引擎，也不同於純粹的 3D 渲染引擎。本文將從架構設計的角度，深入分析 Engine 如何巧妙地融合兩種設計範式，創造出獨特的二三維一體化架構。 注： mapvthree 是 JSAPI Three（百度地圖 JavaScript API Three）在代碼中的命名空間。 一、設計理念概述 1.1

地圖開發 , 架構設計 , three.js , 3d , Engine

收藏 評論

pingxingyun 頭像

實時雲渲染平行雲 - 實時雲渲染與雲桌面解析（二）：從雲桌面到實時雲渲染：圖形計算雲化的下一站

雲桌面雖在教育辦公領域廣泛應用，但在高性能圖形處理場景存在侷限。實時雲渲染技術通過雲端渲染、終端顯示的模式，解決了延遲和性能問題，支持多端接入和快速部署。相比雲桌面，實時雲渲染更適用於3D設計、VR等圖形密集型場景，具有低延遲、彈性擴展等優勢。隨着5G和邊緣計算髮展，實時雲渲染正推動圖形計算向"雲-邊-端"協同演進，成為數字化轉型的重要技術支撐。 根據中國信通院《2023年雲計算髮展白皮書》數據顯

three.js , unreal , 雲原生 , webgl , html5

收藏 評論