- 博客(69)
- 收藏
- 关注
RSS订阅原创 Vue3+Cesium+vite 入门- 项目搭建
通过上述代码，我们成功将 CesiumJS 与 Vue 3 结合，创建了一个简单的 3D 地图应用。Vue 3 的组件化开发模式和响应式原理为 CesiumJS 的集成提供了便利，使得开发过程更加高效。
2025-04-02 15:59:35
610
原创 Cesium系列：从入门到实践，打造属于你的3D地球应用
CesiumJS 是一个开源的 JavaScript 库，它能够帮助开发者创建出具有卓越性能、高精度、出色视觉质量和易用性的世界级 3D 地球仪和地图。无论是在航空航天领域，用于模拟飞行路径和展示卫星数据；还是在智能城市中，用于可视化城市规划和交通流量；亦或是无人机行业，用于展示飞行轨迹和地形数据，CesiumJS 都能大显身手。它在 Apache 2.0 许可下发布，这意味着无论是商业用途还是非商业用途，都可以免费使用。获取最新版本代码：访问 CesiumJS – Cesium，找到最新的 release
2025-04-02 15:25:03
1121
原创 Three.js 实现 3D 数学欧拉角
X轴（俯仰角 Pitch）- Y轴（偏航角 Yaw）- Z轴（滚转角 Roll）在 Three.js 中，欧拉角通过对象来实现。通过设置欧拉角的三个值，你可以控制物体在三维空间中的旋转。
2025-04-01 13:48:27
293
原创 （三十八）THREE.TorusGeometry 知识详解
是 Three.js 中用于创建环面（即甜甜圈形状）几何体的一个类。环面是一个封闭的曲面，由一个圆沿垂直于其平面的轴旋转一周而成。
2025-03-31 10:47:40
357
原创 (三十七) THREE.TetrahedronGeometry 知识详解
是 Three.js 中用于创建四面体几何体的一个类。四面体是最简单的多面体，由四个三角形面组成，共有四个顶点、六条边。在 Three.js 中，可以用于创建一个标准的正四面体，用户可以通过调整参数来定义其大小和细分程度。构造函数接受两个参数来定义四面体的大小和细分程度。
2025-02-18 10:31:48
412
原创 （三十六）THREE.SphereGeometry 知识详解
是 Three.js 中用于创建球体几何体的一个类。球体是一个三维几何体，所有点到中心的距离都相等。允许用户通过调整参数来定义球体的大小和细分程度。构造函数接受七个参数来定义球体的尺寸和细分程度。
2025-01-22 09:31:35
395
原创 （三十五）THREE.ShapeGeometry 知识详解
是 Three.js 中用于从一个或多个对象创建几何体的一个类。是一种描述二维路径的方法，可以用来定义各种形状的轮廓。通过，可以将这些二维路径转换成三维几何体，适用于创建各种基于轮廓的三维模型，例如字母、图标、徽标等。构造函数接受两个参数来定义几何体的形状和选项。
2025-01-21 09:34:00
716
原创 threejs 第一人称控制器FirstPersonControls的使用
为0.1 为旋转角度，movementSpeed为20 为移动速度，控制的是鼠标上下左右移动时的速度与角度，角度大速度小时会有移动延时，在测试API时发现鼠标移动到场景时使用 键盘 上下左右才会生效并且很灵敏。是 Three.js 中的一种控制器，允许用户以第一人称视角进行三维场景的浏览。使用这个控制器时，用户可以通过鼠标或键盘来控制视角，类似于第一人称射击游戏中的操作方式。：在使用 FirstPersonControls 时当。
2025-01-16 10:47:50
435
原创 （三十四）THREE.RingGeometry 知识详解
是 Three.js 中用于创建环形几何体的一个类。环形几何体是一个具有内径和外径的圆环面，可以用于创建戒指、轮子或其他圆形结构。通过调整参数，可以创建出不同大小和细节的环形构造函数接受六个参数来定义环形的尺寸和细分程度。
2025-01-16 10:22:34
420
原创 threejs 包围盒（Box3）
就是一个长方体空间，将模型 所有顶点包围起来的最小长方体空间。描述一个长方体包围盒需要通过xyz坐标来表示，X范围[Xmin,Xmax],Y范围[Ymin,Ymax],Z范围[Zmin,Zmax],.min属性值是.max属性值是。
2025-01-15 09:35:36
230
原创 (三十三) THREE.PolyhedronGeometry知识详解
是 Three.js 中用于创建多面体几何体的一个类。多面体是由多个多边形面组成的三维几何体。允许用户定义一个多面体的顶点坐标以及每个面的顶点索引，从而创建出复杂的几何形状构造函数接受四个参数来定义多面体的顶点、面索引、半径和细分程度。
2025-01-14 10:58:31
260
原创 Three.js 顶点颜色数据 深入理解
在计算机图形学中，顶点颜色是一种在 3D 模型的每个顶点上存储颜色信息的方法。这些颜色信息可以在渲染时被用来为模型的表面着色，通常与材质和光照相结合，提供更细腻的视觉效果。顶点颜色的优势在于它使得开发者能够控制模型的每个顶点的颜色，而不是统一的面片颜色。通过这种方式，顶点之间的颜色过渡可以更加平滑，尤其适用于渐变效果、颜色动画以及需要细节控制的场景。
2025-01-06 09:54:04
576
原创 （三十一）THREE.PlaneGeometry 知识详解
是 Three.js 中用于创建平面几何体的一个类。平面几何体是一个四边形，通常被用作地面、墙壁或其他平面物体的基础。通过调整参数，可以创建出不同大小和平滑度的平面。构造函数接受四个参数来定义平面的大小和细分程度。
2025-01-06 09:27:52
413
原创 （三十）THREE.OctahedronGeometry 知识详解
是 Three.js 中用于创建八面体几何体的一个类。八面体是由八个等边三角形组成的多面体，它是五个柏拉图立体之一。在 Three.js 中，允许用户通过参数来调整八面体的大小和细分程度。构造函数接受两个参数来定义八面体的大小和细分程度。
2024-12-24 16:01:17
412
原创 (二十九) THREE.LatheGeometry 知识详解
是 Three.js 中用于创建回转几何体的一个类。回转几何体是指通过对一个二维轮廓沿某一轴（通常是 Y 轴）进行旋转而形成的三维几何体。这种方法非常适合创建各种对称的三维模型，如瓶子、杯子、碗等。构造函数接受四个参数来定义回转几何体的形状和旋转参数。
2024-12-11 10:11:11
256
原创 （二十八）THREE.IcosahedronGeometry 知识详解
是 Three.js 中用于创建二十面体几何体的一个类。二十面体是一个由二十个等边三角形面组成的多面体，是五个柏拉图立体之一。在 Three.js 中，THREE.IcosahedronGeometry 允许用户通过参数来调整二十面体的大小和细分程度。构造函数接受两个参数来定义二十面体的大小和细分程度。
2024-12-10 09:58:06
447
原创 (二十七) THREE.ExtrudeGeometry 知识详解
是 Three.js 中用于创建挤出几何体的一个类。挤出几何体是从一个二维路径（轮廓）通过沿着某个方向（通常是 Z 轴）“挤出”一定的距离来生成三维几何体。这种方法非常适合创建各种三维模型，如字母、符号、标志等。构造函数接受两个参数来定义挤出几何体的形状和挤出设置。
2024-12-05 13:26:04
410
原创 (二十六) THREE.mesh 知识详解
THREE.Mesh是 Three.js 中的一个核心类，用于创建三维网格对象。它结合了一个几何体（或）和一个或多个材质（），并可以被添加到场景 () 中进行渲染。THREE.Mesh是 Three.js 中最常用的基础对象之一，几乎所有的三维模型都可以通过它来表示。
2024-12-04 09:27:45
559
原创 Three.js 加载模型自动居中
好多小伙伴，在加载完模型后，在场景中很难找到模型具体加载到了哪个位置，我们在打印出模型后可以看到模型得定位是(0,0,0)，但加载的模型并不是在(0, 0, 0)位置，这是由于处理模型的时候就不是在(0, 0, 0)处进行建模的。可看到在没有调用setModelPosition()函数时模型时不在原点的，调用之后自动计算定位到原点。
2024-12-03 10:06:01
450
原创 （二十五）THREE.EdgesGeometry 知识详解
是 Three.js 中的一个类，用于从现有的几何体（如或）中提取边缘信息，以便能够渲染几何体的边缘线条。这对于创建带有轮廓线的效果特别有用，例如在卡通渲染、技术图纸或增强现实应用中。构造函数构造函数接受两个参数来定义边缘提取的行为。
2024-12-03 09:16:33
190
原创 Three.js后处理EffectComposer
后处理是指在渲染场景后对图像进行额外处理，以实现各种视觉效果，如模糊、景深、颜色校正等。Three.js的EffectComposer是一个用于处理后期效果的工具，它可以通过一系列的Pass（处理单元）来实现复杂的后处理效果。是一个附加组件，必须显式导入构造函数renderer: 用于渲染场景的渲染器。: （可选）EffectComposer内部使用的预配置渲染目标。创建一个EffectComposer实例。添加渲染目标和一系列的Pass。在渲染循环中调用composer的render方法。
2024-12-02 09:50:10
1155
原创 （二十四） THREE.DodecahedronGeometry 知识详解
是 Three.js 中用于创建十二面体几何体的一个类。十二面体是一个由十二个正五边形面组成的多面体，是一种规则的多面体（正多面体），在几何学中具有重要的地位。在 Three.js 中，THREE.DodecahedronGeometry 可以用于创建这种几何体，并允许用户通过参数来调整其大小和细节。构造函数接受两个参数来定义十二面体的大小和细分程度。
2024-12-02 09:17:44
377
原创 Three.js 相机视角的平滑过渡与点击模型切换视角
/ 保存当前相机的位置和朝向// 创建 tween 动画.to(targetPosition, 2000) // 动画持续时间为2000毫秒.easing(TWEEN.Easing.Quadratic.InOut) // 使用缓动函数}).start();
2024-11-29 09:36:37
1215
1
原创 (二十三) THREE.CylinderGeometry 知识详解
是 Three.js 中用于创建圆柱几何体的一个类。这个几何体可以用于创建各种圆柱形状的对象，如饮料罐、管子、圆柱形灯罩等。提供了灵活的参数设置，可以方便地调整圆柱的尺寸和细分程度。构造函数构造函数接受多个参数来定义圆柱几何体的形状和细分程度。
2024-11-29 09:24:43
433
原创 (二十二) THREE.ConeGeometry 知识详解
是 Three.js 中用于创建圆锥几何体的一个类。这个几何体可以用于创建各种圆锥形状的对象，如冰淇淋甜筒、交通锥等。提供了灵活的参数设置，可以方便地调整圆锥的尺寸和细分程度构造函数接受多个参数来定义圆锥几何体的形状和细分程度。
2024-11-28 09:42:25
366
原创 Three.js 和其他 WebGL 库 对比
Three.js：以其易用性和丰富的生态系统成为了许多开发者的首选，适合快速构建和原型设计。适合需要广泛功能和快速开发的项目。Babylon.js：强调性能和全面的功能，适合需要高性能和复杂功能的应用，特别是游戏开发和AR/VR应用。PlayCanvas：提供了强大的在线编辑器和协作功能，非常适合团队开发大型项目，尤其是需要实时预览和调试的情况。PIXI.js：是2D开发的优秀选择，适合开发高性能的2D游戏和应用，并且可以与其他3D库结合使用。Cesium。
2024-11-27 10:25:46
1722
原创 (二十一) THREE.CircleGeometry 知识详解
是 Three.js 中用于创建圆形几何体的一个类。这个几何体可以用于创建圆形平面，如圆形的标志、按钮或者其他平面圆形物体。提供了灵活的参数设置，可以方便地调整圆形的大小和细分程度。
2024-11-27 09:35:24
513
原创 （二十）THREE.ShaderMaterial 知识详解
是 Three.js 中的一种高级材质类型，它允许开发者直接编写顶点着色器和片段着色器来定制渲染效果。这种材质类型非常适合于那些需要高度自定义渲染效果的应用场景，例如实现特殊的视觉效果、模拟物理现象或创建独特的艺术风格。构造函数接受一个对象参数parameters，该对象包含着色器材质的各种属性。
2024-11-26 09:14:09
408
原创 Three.js CSS2D/CSS3D渲染器
CSS2DRenderer 渲染器用于在 3D 场景中渲染纯 2D 的 HTML 元素。这些元素不会具有 3D 透视效果，但可以与 3D 对象一起移动和旋转，非常适合用于标签、注释等需要固定显示的内容。CSS3DRenderer 渲染器用于在 3D 场景中渲染具有 3D 透视效果的 HTML 元素。相比 CSS2DRenderer，它可以让 HTML 元素更好地融入 3D 场景，具有真实的空间感。
2024-11-25 09:47:27
832
原创 (十九) THREE.Material 知识详解
是 Three.js 中的一个基类，用于定义三维物体的外观属性，如颜色、纹理、透明度等。Three.js 提供了多种不同的材质类型，每种材质都有其独特的特性和用途，以满足不同的渲染需求。THREE.Material 本身是一个抽象基类，实际使用的材质都是其子类。
2024-11-25 09:29:27
813
原创 Three.js 图形界面工具（GUI）
dat.GUI 是一个轻量级的JavaScript库，专为调试和参数调整设计。它提供了一个简洁的界面，可以快速集成到Three.js项目中。
2024-11-22 09:58:52
1780
原创 (十八) THREE.AmbientLightProbe 知识详解
是 Three.js 中的一个用于模拟环境光照的工具，它通过预先计算环境光照信息并将其应用于场景中的物体，从而增强场景的真实感。与不同的是，更专注于捕获和模拟环境的间接光照效果。这种工具对于模拟复杂的光照情况，特别是那些涉及多次反射的光照情况，非常有用。
2024-11-22 09:25:45
295
原创 （十七） THREE.LightProbe 知识详解
是 Three.js 中的一种环境光照工具，用于捕捉和模拟环境光的影响。它通过对场景进行采样来获取周围环境的光照信息，并将这些信息应用于物体，从而模拟出更真实的光照效果。特别适用于需要反映环境光照变化的场景，比如室内环境、室外环境或动态光照条件下的场景。
2024-11-21 09:21:12
398
原创 Three.js 相机控制器Controls
在 3D 场景中，摄像机的控制尤为重要，因为它决定了用户如何观察和与场景互动。Three.js 提供了多种相机控制器，最常用的有和。适合用于查看和检查 3D 模型，提供了更自由的旋转方式，适合于飞行模拟和第一人称视角的应用，则提供了沉浸式的第一人称视角。在实际项目中，可以根据具体需求选择合适的控制器，并调整相关参数以达到最佳效果。本文将介绍这些相机控制器的基本用法及其特点。
2024-11-20 10:15:14
2072
原创 (十六) THREE.RectAreaLight 知识详解
是 Three.js 中的一种光源类型，它模拟了一个矩形区域光源，可以用来创建柔和的阴影效果。这种光源非常适合用于模拟灯箱、LED 屏幕、霓虹灯管等具有较大面积的光源。与点光源相比，矩形区域光源能够产生更加自然的阴影过渡，从而增强场景的真实感。
2024-11-20 09:33:14
339
原创 Three.js LOD（Level of Detail）通过根据视距调整渲染细节的技术
LOD（Level of Detail）是指在三维图形处理中，根据物体距离观察者的远近，使用不同细节层次的模型来进行渲染。通过这种方式，可以在保证视觉效果的前提下，减少不必要的计算，提升渲染性能。
2024-11-19 09:32:09
1053
原创 (十五) THREE.PointLight 知识详解
是 Three.js 中的一种光源类型，它模拟从一个点向各个方向均匀发射光线的光源，类似于一个普通的灯泡。这种光源非常适合用于模拟室内照明、灯笼、星星等效果。与平行光（）不同，点光源的光线强度会随着距离的增加而衰减。
2024-11-19 09:17:53
371
原创 Three.js 射线拾取（Raycaster）与轮廓高亮（OutlinePass）
射线拾取和轮廓高亮是Three.js中两项非常有用的技术，分别用于检测用户与3D对象的交互以及对选中的物体进行高亮显示。通过本文的介绍，你可以在自己的Three.js项目中实现这些功能，增强用户体验和交互效果。
2024-11-18 09:33:15
1063
原创 （十四） ThreeJS入门 THREE.SpotLight 知识详解
是 Three.js 中的一种光源类型，它模拟了聚光灯的行为，即从一个特定的点向一个特定的方向发出锥形的光束。这种光源非常适合用于模拟舞台灯光、手电筒或汽车前灯等效果。可以产生定向的光照，并且可以根据需要产生阴影。
2024-11-18 09:24:04
526
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人