three.js

Mintopia2 天前
前端·javascript·three.js
深入理解 Three.js 中的 WebGLRenderer在 Three.js 的众多 API 中,WebGLRenderer是一个至关重要的存在,它负责将我们构建的 3D 场景渲染到浏览器中,为用户呈现出精美的视觉效果。本文将深入探讨WebGLRenderer的使用方法及相关示例。
Mintopia3 天前
前端·javascript·three.js
Three.js 进阶:复杂模型与动画处理技巧在掌握了 Three.js 的基础知识后,开发者往往希望进一步探索如何处理复杂模型和实现生动的动画效果。本文将深入探讨 Three.js 在这些进阶领域的应用技巧,助力你提升项目的质量与复杂度。
rhz3 天前
three.js
ThreeJS之旅 02现在让我们编码创造我们第一个Three.js场景。如果你熟悉现在前端工具,像Node.js和Vite,那么你可以跳过本节的大部分内容。
糖墨夕3 天前
前端·three.js
【1】Three.js入门心得记-开发环境及准备工作学习Three.js,这事儿咱们得聊聊,就像你突然想在家自己做顿大餐,而不是天天吃外卖一样。Three.js,这家伙就像是你的3D烹饪秘籍,让你在数字世界里也能大展厨艺,做出让人眼前一亮的美味佳肴——哦不,是炫酷3D场景!
伶俜monster4 天前
前端·webgl·three.js
破解旋转死锁:Threejs 四元数魔法对抗欧拉角困局欧拉角是一种表示三维空间中旋转的方法,它由三个角度组成,通过设定物体绕 指定顺序 的轴进行旋转,可以直接对物体的 .rotation 属性进行操作。
阿白的白日梦4 天前
javascript·three.js
TSL文档译本留存学习文档翻译来源 https://github.com/puxiao/threejs-shading-language-tutorial/blob/main/01%20Three.js%E7%9D%80%E8%89%B2%E8%AF%AD%E8%A8%80(TSL)%E8%A7%84%E8%8C%83.md?plain=1 感谢作者。
Mintopia5 天前
前端·javascript·three.js
深入理解 Three.js 中的 Mesh 对象在 Three.js 这个强大的 JavaScript 3D 库中,Mesh对象扮演着至关重要的角色。它是构成 3D 场景中可见物体的基础元素,通过组合几何形状(Geometry)和材质(Material),让我们能够在网页上创建出各种绚丽多彩、栩栩如生的 3D 模型。
不浪brown5 天前
three.js·trae
炸裂的开源!基于Three+Vue3的三维低代码编辑器,还支持BIM+CAD,绝了!大家好,我是日拱一卒的攻城师不浪,致力于前沿科技探索,摸索小而美工作室,这是2025年输出的第22/100篇文章。
谢小飞5 天前
前端·three.js
Threejs全球坐标分布效果在浏览网页时,笔者发现华为云一个有趣的效果,就是将地球上布局的城市标注出来,当城市出现在地球正面视线范围内时,就显示出来,而在靠近边缘时,就慢慢的隐藏直至消失不见;那么这种效果是如何实现的呢?里面又包含了哪些的逻辑呢?本文我们就来看下这个效果的实现过程。
Mintopia6 天前
前端·javascript·three.js
Three.js 相机(Camera)的使用详解在 Three.js 中,相机(Camera)扮演着至关重要的角色,它决定了我们从哪个角度观察三维场景。合理地设置和运用相机,能够为用户呈现出丰富多样且引人入胜的视觉效果。接下来,我们将深入探讨 Three.js 中相机的相关知识。
爱看书的小沐7 天前
前端·javascript·vue·webgl·three.js·angular.js·opengl
【小沐学Web3D】three.js 加载三维模型(Angular)Three.js 是一款 webGL(3D绘图标准)引擎,可以运行于所有支持 webGL 的浏览器。Three.js 封装了 webGL 底层的 API ,为我们提供了高级的开发接口,可以使用简单的代码去实现 3D 渲染。
伶俜monster7 天前
webgl·three.js
向量密码本:Threejs 用加减乘除驯服 3D 空间向量是具有方向和大小的量,在数学中,向量通常表示为有向线段,由起点和终点确定,起点到终点的距离就是向量的大小,向量之间的夹角就是向量的方向。
qirong7 天前
前端·javascript·three.js
夜色渐浓,众星拱月 - Threejs复刻原神绝美空月之歌场景(二)之前完成了 Three.js 复刻的一版空月之歌:juejin.cn/post/748185…。最近空月之歌的活动页面又更新了,新增了一些特效和交互。正好最近在学习 Three.js,便想着通过复刻新活动场景来练练手。于是,开启了这场 Three.js 的奇妙之旅。
Mintopia7 天前
前端·javascript·three.js
Three.js 中 DirectionalLight API 深度解析与实践在 Three.js 构建的三维世界里,光照效果对场景的真实感起着至关重要的作用。其中,DirectionalLight作为一种常用的光源类型,能模拟出类似太阳光的平行光照效果,均匀地照亮场景中的物体。接下来,让我们深入探究DirectionalLight API 的使用方法。
爱看书的小沐8 天前
javascript·react.js·webgl·three.js·opengl·web3d·reactthreefiber
【小沐学Web3D】three.js 加载三维模型(React Three Fiber)Three.js 是一个功能强大的 3D 图形库,用于在网页上创建和显示交互式 3D 图形。它基于 WebGL,提供了简单易用的 API,帮助开发者快速构建复杂的 3D 场景。
爱看书的小沐9 天前
javascript·vue.js·webgl·three.js·地球·太阳系·三维地球
【小沐杂货铺】基于Three.JS绘制太阳系Solar System(GIS 、WebGL、vue、react)https://threejs.org/Three.js是一个基于JavaScript编写的开源3D图形库,利用WebGL技术在网页上渲染3D图形。它提供了许多高级功能,如几何体、纹理、光照、阴影等,以便开发者能够快速地创建复杂且逼真的3D场景。同时,Three.js还具有很好的跨平台和跨浏览器兼容性,让用户无需安装任何插件就可以在现代浏览器上观看3D内容。
Mintopia9 天前
前端·javascript·three.js
深入理解 Three.js 中的 Mesh:构建 3D 世界的基石在 Three.js 这个强大的 JavaScript 3D 库中,Mesh是构建 3D 场景的核心元素之一。它将几何形状(Geometry)和材质(Material)相结合,使我们能够在虚拟的 3D 空间中创建出各种可视化的物体。本文将深入探讨Mesh的使用方法,并通过实际代码示例来帮助大家更好地理解。
Mintopia10 天前
前端·javascript·three.js
深入理解 Three.js 中的 PerspectiveCamera在 Three.js 这个强大的 JavaScript 3D 库中,相机(Camera)是决定我们如何观察 3D 场景的关键要素。其中,PerspectiveCamera(透视相机)模拟了人眼观察世界的方式,为我们创建逼真的 3D 场景效果提供了重要支持。
飞哥数智坊10 天前
人工智能·three.js
AI编程实战:30分钟实现Web 3D船舶航行效果随着客户对展示效果的要求日益增高,如今不仅需要网页设计美观大方,还需要具有强烈的视觉冲击力以吸引访者的注意。
Mintopia11 天前
前端·javascript·three.js
Three.js深度解析:InstancedBufferGeometry实现动态星空特效 ——高效渲染十万粒子的底层奥秘当需要渲染大量同类型物体(如星空、雨滴、粒子特效)时,传统逐个创建网格的方式会导致性能急剧下降。Three.js的InstancedBufferGeometry通过实例化渲染技术,可将成千上万的物体合并为单个绘制调用,实现以下核心优势: