@three.js / 博客 RSS 訂閱

Dec 11 2025

Addison - 深度覆盤： WebGL 數字孿生前端架構：如何打造高顏值、高性能的 Web 3D 可視化系統

🚀 前言 在企業級數字孿生（Digital Twin）項目中，“前端可視化表現”往往決定了項目的成敗。 很多項目後台數據很穩，但前端渲染卡頓、模型醜陋、交互生硬，最終導致無法交付。作為一名專注於 Web 3D 呈現與前端可視化 的開發者，我認為：讓數據“好看”且“好用”，是前端的核心價值。 本文將基於我們團隊最近交付的智慧園區可視化前端項目，覆盤一套高內聚、低耦合的 Three.js 前端架構設

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

收藏 評論

Nov 19 2025

曾深愛過的洋葱 - JSAPI Three 是什麼？—— 百度地圖二三維一體化渲染引擎入門指南

如果你正在尋找一個既能實現傳統地圖的二維功能，又能無縫融合三維渲染能力的解決方案，或者對"JSAPI Three"、"mapvthree"這些名詞感到困惑，那麼這篇文章就是為你準備的。我們將用最通俗易懂的方式，幫你理解這個突破傳統地圖引擎侷限的二三維一體化渲染引擎。 一、JSAPI Three 是什麼？ 1.1 簡單理解 JSAPI Three 是百度地圖推出的二三維一體化地圖渲染引擎，它的全稱是

three.js , 百度地圖 , 前端

收藏 評論

Nov 20 2025

xxx - PathTracker與ObjectTracker完整使用指南

PathTracker與ObjectTracker完整使用指南 在3D地圖可視化場景中，相機控制和對象追蹤是核心功能。mapv-three提供了兩個強大的追蹤器：PathTracker（路徑追蹤器）和ObjectTracker（對象追蹤器）。本文將深入解析這兩個組件的使用方法，幫助開發者快速掌握相機追蹤和對象追蹤技術。 一、PathTracker：路徑追蹤器 PathTracker用於沿指定路徑進

three.js , 3d , Javascript

收藏 評論

Dec 13 2025

Addison - 深度覆盤 III： 核心邏輯篇：構建 WebGL 數字孿生的“業務中樞”與“安全防線”

🚀 前言 在 Z-TWIN 污水處理廠項目的前兩篇覆盤中，我們解決了 渲染管線（Rendering Pipeline） 的性能瓶頸與 HMI 工程化 的多端適配問題。這兩步走完，我們構建了一個“好看”且“能跑”的系統骨架。 然而，從 POC（概念驗證） 走向 Production（生產環境） 的過程中，真正的挑戰在於如何讓這套 3D 系統承載複雜的工業業務。在實際工程交付中，我們深知：視覺只是表

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

收藏 評論

Dec 18 2025

微芒不朽 - 基於 Three.js 的 3D 地圖可視化：核心原理與實現步驟

項目概述 這是一個基於Three.js的3D交互式地圖可視化系統，以廣東省地圖為展示對象，實現了豐富的3D視覺效果和交互功能。本文將對項目中的核心函數進行逐步驟、逐函數的詳細分析，幫助讀者深入理解系統的實現原理。 技術棧 前端框架：Vue 3 3D渲染引擎：Three.js 構建工具：Vite 動畫庫：Tween.js 輔助庫：Delaunator、geo-point-in-poly

three.js , 3d , 前端 , Javascript

收藏 評論

Dec 12 2025

Addison - 深度覆盤 II： WebGL 工業級落地：混合渲染架構與 HMI 工程化實踐

🚀 前言 在上一篇《渲染架構篇》中，我們探討了基於 Three.js 的場景管理與 DrawCall 優化。然而，在實際交付的 工業數字孿生（Digital Twin） 項目中，決定系統能否長期穩定運行的，往往不僅僅是 3D 渲染效率，更是 2D UI 與 3D 場景的混合架構質量。 很多項目在 Demo 階段表現尚可，一上生產環境就暴露問題：DOM 更新導致 WebGL 掉幀、交互事件衝突、現

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

收藏 評論

Jan 09 2023

Warn - web開發如何入門元宇宙？Blender探索筆記 | 大帥老猿threejs特訓

前言 精彩的世界盃決賽期間，參與了胖達老師基於Three.jsBlender的元宇宙搭建入門實訓，趁着年前還有點記憶，來做個筆記。本來想在這篇筆記裏面完整記下整個流程，但是篇幅實在太長了，本文暫時以Blender探索為主。 基礎環境搭建 Three.js提供的API是可以讓我們基於原生JavaScript隨便玩的，但是為了讓我們能在VSCode環境下有更好的代碼提示和熱更新，我們可以把Vite和T

元宇宙 , web開發 , three.js , blender , 前端

收藏 評論

Dec 03 2025

JediHongbin - Three.js 法線 shader

import * as THREE from "three"; interface IParams { color?: THREE.ColorRepresentation, side?: THREE.Side } export class MeshMaterial extends THREE.ShaderMaterial {

three.js , glsl , 後端開發 , harmonyos , ifdef , ide , Javascript

收藏 評論

Nov 21 2025

曾深愛過的洋葱 - JSAPI Three（mapvthree）與百度其他地圖引擎的區別

隨着數字孿生、智慧城市等應用場景的興起，對三維地圖渲染能力的需求日益增長。百度地圖推出了基於 Three.js 的 JSAPI Three（mapvthree）引擎，為開發者提供了全新的二三維一體化地圖解決方案。本文將從多個維度深入分析 JSAPI Three 與 JSAPI GL、JSAPI 2D（3.0和2.0版）等引擎的核心區別。 一、技術架構差異 1.1 JSAPI Three（mapvt

three.js , webgl , 百度地圖 , 前端 , Javascript

收藏 評論