three.js

谢小飞21 小时前
前端·three.js
一款解压的3D方块加载动画效果这不最近我司设计师又给我整了点活,实现一个加载进度的动画,刚开始我还以为放两个圆圈转一下就可以了;但是设计说我们是一个3D项目,得搞点高端大气的,于是就有了这篇文章。
小桥风满袖6 天前
前端·css·three.js
Three.js-硬要自学系列40之专项学习缓冲几何体法线属性想象一下, 我们有一个 3D 模型,比如一个光滑的球体或者一个立方体。这个模型是由很多很多小三角形(面)拼成的。
Mintopia9 天前
前端·javascript·three.js
🧠 从像素到现实:用 Three.js + Cesium 构建数字孪生系统“当现实世界有了数字镜像, 工厂、城市、星球……都不再沉默, 它们通过 WebSocket 对你耳语。” ——一位调试 MQTT 到半夜的开发者
Mintopia9 天前
前端·javascript·three.js
🧱 用三维点亮前端宇宙:构建你自己的 Three.js 组件库“当你盯着一个立方体太久,立方体也会开始盯着你。” ——某位迷失在 scene.graph 中的开发者
curdcv_po11 天前
前端·react.js·three.js
🔥🔥🔥结合 vue 或 react,去写three.js政府的新基建项目(如数字孪生、智慧城市、室内设计)广泛应用3D可视化。对于开发者,可以Three.js库入手,它简化了WebGL的底层开发,适合快速入门。
VincentFHR12 天前
前端·three.js·canvas
Three.js 利用 shader 实现 3D 热力图当上图缩放变小的时候,相邻的热力点会进行颜色混合,效果如下可能会有这样的需求, 希望在原来 three.js 3D 地图的基础上,加上热力图。
星_离12 天前
前端·three.js
初识Threejs建议将所需要的版本号加上,否则就会安装最新的 threejs注意:想要使用 ES6 方式引入必须设置 type 类型为 module,然后才能使用 ES6 方式引入
火车叼位12 天前
前端·api·three.js
threejs api速查表, 你的下一个鼠标垫图案素材继 GSAP 的 cheatsheet 之后,借助perplexity, 我又整理了 Three.js 的 cheatsheet
EndingCoder12 天前
开发语言·前端·javascript·人工智能·stable diffusion·ecmascript·three.js
Three.js + AI:结合 Stable Diffusion 生成纹理贴图随着 AI 技术的发展,Stable Diffusion 等生成模型为 3D 开发提供了全新的可能性,可以快速生成高质量纹理贴图,提升 Three.js 场景的视觉效果。本文将介绍如何结合 Stable Diffusion 生成纹理贴图,并将其应用于 Three.js 场景,构建一个交互式产品展示空间。项目基于 Vite、TypeScript 和 Tailwind CSS,支持 ES Modules,确保响应式布局,遵循 WCAG 2.1 可访问性标准。本文适合希望探索 AI 与 Three.js 结合的
Mintopia12 天前
前端·javascript·three.js
用 Three.js 构建组件库:一场 3D 世界的 "乐高" 之旅想象一下,你是一位现代派建筑师,但你的建筑材料不是钢筋水泥,而是代码;你的设计图纸不是二维蓝图,而是三维空间;你的施工场地不是尘土飞扬的工地,而是安静的电脑前。这就是使用 Three.js 进行 3D 开发的日常。而今天,我们要探讨的是如何将这些 3D 开发中的常用元素封装成组件库,就像为这个 3D 世界打造一套精美的 "乐高" 积木,让后续的开发变得更加简单有趣。
Mintopia13 天前
前端·javascript·three.js
Three.js 三维数据交互与高并发优化:从点云到地图的底层修炼当你在浏览器里操控着十万级点云模型自由旋转,或是流畅缩放覆盖整座城市的三维地图时,可曾想过背后那些 0 和 1 正在进行怎样的 "马拉松赛跑"?Three.js 作为 WebGL 的 "翻译官",将复杂的图形学原理包装成亲民的 API,但当数据量突破临界点,再华丽的封装也会露出破绽。本文将带着你扒开 API 的外衣,从二进制数据流到 GPU 显存管理,揭秘三维交互系统在高并发场景下的生存法则。
魂断蓝桥66615 天前
webgl·数字孪生·three.js·3d建筑·物联网3d·3d定位、三维室内定位、3d建筑·3d消防·消防演习模拟·消防给水系统
使用three.js实现3D消防,消防管线,消防教育(课一:消防给水系统01)前言:写这篇之前,先写一下作为程序员的感想吧,也是昨晚看了《逆行人生》才感触良多,大部分程序员的未来出路真的是送外卖,跑滴滴,送快递吗?
Mintopia16 天前
前端·javascript·three.js
🌌 渲染的秘密花园:Three.js 中 WebGLRenderer 的魔法之旅与自定义 RenderPass 技巧“当你在浏览器里旋转一个 3D 模型时,千军万马正在 GPU 中悄然排兵布阵。” —— 一位匿名的像素精灵
Mintopia17 天前
前端·javascript·three.js
🎨当艺术遇上算法:Three.js 里的 SVG 与文字魔法“文字,不再是平面的叹息,而是立体宇宙的低语。” ——某位三维诗人在这篇教学旅程中,我们将用 Three.js 打造一场“图形与文字”的冒险:让 SVG 图像与字体摆脱二维的宿命,在三维空间中复活。
Mintopia18 天前
前端·javascript·three.js
🧠 Three.js + Web Workers:让你的帧率飞起来!“主线程太忙,画面卡成 PPT,工人(Worker)快上!”在现代 Web 开发中,尤其是 WebGL 场景中,性能就是一切。Three.js 让我们轻松打造炫酷 3D 世界,但一旦你加入大量逻辑计算,比如粒子模拟、路径规划、物理引擎,主线程立刻哀嚎:“我已经尽力了,别再来了!”
Mintopia18 天前
前端·javascript·three.js
🌍 Three.js × 地理坐标:在地球上画一条银河“一切3D图形的壮美,如果不落于地理坐标系上,终究只是漂浮在虚空之中。”在这片数字宇宙中,Three.js 是一个画家,擅长在三维空间里舞动顶点与光影。 而 Mapbox,是一位地图编舞师,它把地球切割成瓦片,铺展开数据与现实的边界。
orangleLi19 天前
前端·three.js
Three.js海量渲染模型使用BatchedMesh渲染海量树模型,帧率接近60,页面流畅此处为官方文档的解释Mesh 的特殊版本,支持多绘制批量渲染。如果您必须渲染大量具有相同材质但具有不同世界变换和几何形状的对象,请使用 BatchedMesh。使用 BatchedMesh 将帮助您减少绘制调用的数量,从而提高应用程序的整体渲染性能。
火柴就是我19 天前
three.js
每日见闻之Three.js 给球体贴个纹理图
火柴就是我19 天前
three.js
每日见闻之Three.js 绘制 球体 两个球体
Mintopia19 天前
前端·javascript·three.js
Three.js 性能优化三部曲:从懒加载到实例化的底层奥秘想象一下,你精心打造的 Three.js 场景在自己的高配电脑上流畅得像丝绸,可一旦放到用户的设备上,就卡得像幻灯片 —— 这种落差足以让任何开发者心碎。别担心,今天我们就来揭开 Three.js 渲染性能优化的三重面纱:延迟加载、合批处理和实例化技术。作为一名沉迷底层原理的计算机科学家,我会用既专业又不失风趣的方式,带你从 GPU 与 CPU 的 "对话" 开始,理解这些优化手段的本质。