阿铎前端-CSDN博客

原创 Three.js PBR材质

本文将详细介绍Three.js中的PBR（Physically Based Rendering）材质，包括PBR的基本概念、适用场景、PBR材质的构建以及一些高级应用技巧。

2024-11-15 09:55:38 1464

原创 (十三) ThreeJS入门 THREE.HemisphereLight

是 Three.js 中的一种光源类型，它用于模拟天空和地面的光照效果。这种光源模拟了一个半球形的光源，从上方（天空）和下方（地面）分别发光，非常适合用来创建自然的环境光照效果。可以提供一种柔和且均匀的光照，特别适合用于室外场景或模拟自然环境的光照条件。

2024-11-15 09:27:18 498

原创 Three.js 高级纹理类型

在使用Three.js创建3D图形时，纹理扮演着重要的角色，它们可以增加模型的视觉效果，使模型看起来更加真实。本文将深入讨论几种高级纹理类型：法线贴图凹凸贴图高光贴图环境贴图（Environment Maps）以及数据纹理。

2024-11-14 09:39:34 803

原创 (十二) ThreeJS入门 THREE.DirectionalLight

是 Three.js 中的一种光源类型，它模拟来自无限远的平行光线，类似于太阳光。这种光源非常适合用于模拟直射的日光或任何其他远距离光源的效果。平行光的特点是，所有光线都平行于彼此，并且它们在场景中的作用范围是无限的。这意味着，无论光源距离场景中的物体有多远，光线的方向和强度都是恒定的。

2024-11-14 09:24:20 726

在UV映射中，"U"对应于纹理的水平（宽度）方向，"V"对应于纹理的垂直（高度）方向。UV坐标的范围通常是从0到1，其中（0,0）表示纹理的左下角，（1,1）表示纹理的右上角。这个名字中的"U"和"V"代表的是纹理坐标的两个维度，它们与三维空间的"X"、"Y"和"Z"坐标是独立的。在这个例子中，我们首先加载了纹理，然后创建了一个包含该纹理的材质和一个使用该材质的网格。在这个例子中，我们将纹理的偏移设置为(0.5, 0.5)，表示纹理在U和V方向上都向正方向偏移了一半的距离。的技术，以增强物体的视觉表现。

2024-11-13 09:51:38 1765

原创 (十一) ThreeJS入门 THREE.AmbientLight 知识详解

是 Three.js 中的一种光源类型，它提供了一种非方向性的全局光照效果。环境光的主要特点是它不考虑光源的方向，也不产生阴影。环境光的作用是模拟场景中的基础照明，确保即使在没有其他光源的情况下，物体也有一定的可见性。这种光源非常适合用于补充其他定向光源，以避免场景过于黑暗。

2024-11-13 09:31:18 725

原创 Three.js 常用动画库

在Three.js 中，动画是创建互动和动态3D内容的关键组件。无论是为游戏、可视化工具，还是艺术项目添加动画效果，使用动画库都能极大地简化这个过程。本篇博客将梳理一些常用的动画库及其在Three.js 中的应用，帮助开发者更好地理解和使用这些工具。

2024-11-12 10:35:22 2013

原创 (十) ThreeJS入门 THREE.Light(灯光) 详解

在 Three.js 中，是所有光源类型的基类，并不是直接实例化的对象。光源在 Three.js 场景中用于模拟光照效果，可以极大地影响场景的外观和氛围。Three.js 提供了多种不同类型的光源，包括：环境光是一种非方向性的光源，它均匀地照亮整个场景中的所有物体。环境光不产生阴影，也不考虑物体表面的方向，因此它主要用于提供基础的亮度。

2024-11-12 10:11:07 518

原创 Three.js 常用辅助对象

AxesHelper 类用于在场景中创建一个坐标轴辅助对象，表示 X、Y 和 Z 轴。这对于确定场景中物体的方向和位置非常有用。

2024-11-11 10:29:59 1930

原创 (九) ThreeJS入门 ArrayCamera 知识详解

是 Three.js 中的一种特殊摄像机类型，它允许你在单个摄像机对象中管理多个摄像机。这在需要同时从多个视角捕捉场景时非常有用，例如在创建多视角视频、全景视图、或者在某些特殊的渲染效果中。

2024-11-11 09:57:29 331

原创 Three.js 浏览器窗口变动自适应

在 Three.js 项目中，为了确保渲染内容在窗口大小变化时能够正确自适应，我们需要监听window的resize事件，并更新相机和渲染器的参数。本文将展示如何实现这一功能。

2024-11-08 09:29:58 583

原创 (八）ThreeJS入门 StereoCamera 知识详解

是 Three.js 中用于创建立体视图（Stereo View）的摄像机类。立体视图通过模拟两只眼睛的视角来创建深度感，从而让观察者感觉他们正在观看的是一个真实的三维空间。这种技术常用于虚拟现实（VR）应用、立体3D电影或照片等领域。

2024-11-08 09:19:25 567

原创 Three.js性能优化和实践建议

Three.js 是一个功能强大的 3D 引擎，当场景足够大的时候，就会出现卡顿的现象，首先要保证电脑的性能够用，然后看看下面方法，帮助你提高应用的运行效率。

2024-11-07 14:34:55 2394

原创 Three.js 常用格式加载（obj、gltf、fbx、glb）

5.仅使用remove函数只是移除场景中的对象，并没有释放几何体和内存占用所以需要使用dispose释放占用内存。gltf、glb格式文件加载。3.fbx格式文件加载。4.obj文件格式加载。

2024-11-07 10:54:41 1185

原创 (七)ThreeJS入门 CubeCamera 知识详解

是 Three.js 中的一种特殊摄像机类型，它用于生成环境贴图（Environment Maps）或反射贴图（Reflection Maps），能够捕捉场景周围的全景图像。THREE.CubeCamera 会在每个渲染帧自动渲染六个方向（前、后、左、右、上、下）的场景视图，并将这些视图拼接成一个立方体贴图（Cube Map）。

2024-11-07 10:41:19 420

原创 Threejs 初学技巧（看不到模型，场景一片黑）

相机的平截头体是以米为单位测量的，为了获得最佳性能，你应该尽可能地缩小它。的几个基本教程，看文档操作一切都很好。但是现在您正在创建自己的应用程序，并且您已经按照教程中的说明进行了所有设置。的一个单元在是一米，初学者很容易搞错单位，导致渲染的比例不对，如果太大就有可能看不见，太小就是一个点。如果你这样做时，物体神奇地出现了，那么你的问题是光线不足。，检查浏览器报错，查看是否有错误信息，如果有你可以解决它。中的大多数材质都需要光线才能看到，除一些自发光的材质。方法是正常工作的，你可以找出还有什么其他问题。

2024-11-06 10:18:09 1048

原创 (六)ThreeJS入门 OrthographicCamera 知识详解

类是 Three.js 中用于创建正射摄像机的一个类。正射摄像机没有透视效果，这意味着场景中的物体不论远近，大小都是固定的。使用正射摄像机可以帮助开发者更容易地控制视图中的元素布局，并且避免了透视带来的变形问题。当窗口尺寸发生变化时，例如用户调整浏览器窗口大小，你应当更新摄像机的视口边界，并调用。- 更新摄像机的投影矩阵。这些边界定义了一个矩形区域，摄像机只能看到位于这个矩形内的物体。- 靠近摄像机的裁剪平面的距离。- 摄像机在世界坐标系中的位置。- 远处的裁剪平面的距离。- 克隆一个摄像机对象。

2024-11-06 09:40:00 609

原创 (五)ThreeJS入门 PerspectiveCamera 知识详解

类是 Three.js 中用于创建透视摄像机的一个类。透视摄像机模拟了人眼和普通照相机的视角效果，即远的物体看起来比近的小。这对于模拟真实的3D环境非常有用。

2024-11-05 09:37:18 763

原创（四）ThreeJS入门 Camera（相机）知识详解

在Three.js中，是所有相机类型的基类，并且它本身不能直接实例化。Three.js 提供了几种不同类型的相机来满足不同的渲染需求，主要包括和。

2024-11-04 11:32:27 328

原创（三）ThreeJS入门 THREE.FogExp2 知识详解

指数雾效果是一种基于距离的雾效，它会使远处的物体逐渐被雾的颜色所取代，但这种效果是以指数的方式递增的。这意味着，随着物体离相机越来越远，雾的效果会迅速增强，导致远处的物体很快被雾的颜色覆盖。在这个例子中，我们创建了一个透视相机，并将一个绿色的立方体添加到了场景中。接着，我们创建了一个灰色的指数雾效果，密度设置为 0.005。随着立方体远离相机，雾的效果会迅速增加，使立方体看起来逐渐变淡并融合到背景中。密度值决定了雾效的衰减速率。较低的密度值会导致雾效增加得较慢，而较高的密度值则会使雾效迅速增加。

2024-11-04 11:17:32 389

原创 (二)ThreeJS入门： Fog 知识详解

是用于模拟雾的效果，它们可以增加场景的真实感，尤其是在大型或开阔的空间中。雾效可以使远处的物体看起来模糊或变淡，从而营造出一种空间感。在这个例子中，创建了一个灰色的线性雾，当物体距离相机超过 10 个单位时开始受到影响，直到 500 个单位时完全被雾覆盖。在这个例子中，创建了一个灰色的指数雾，其密度为 0.00025，这意味着雾效会随着距离的增加而呈指数级增加。代表线性雾，它是一种基于距离的雾效。随着物体离相机越来越远，它们逐渐被雾的颜色所取代。在 Three.js 中，

2024-11-04 11:07:48 531

原创（一）ThreeJS入门: 场景 Scene 详解

是 Three.js 中的一个基本类，用于存储场景中的所有对象。它是 Three.js 场景的容器，在其中你可以放置各种类型的三维对象，比如网格模型 (THREE.Mesh)、灯光 (THREE.Light)、辅助对象 (THREE.AxesHelper, THREE.GridHelper) 等。

2024-11-04 10:38:56 366

原创 vue+threeJS示例: 入门的示例

本threeJS示例演示不断翻转的立体箱体，通过requestAnimationFrame(animate)，来让立方体旋转。

2024-11-04 10:06:43 458

原创 vue+ThreeJS：从0 到1 搭建开发环境

下载地址：https://nodejs.org/en/download/ 根据用户自己的机器情况进行选择不同版本的软件下载。安装可以参考：https://cli.vuejs.org/zh/guide/installation.html。为了在项目中操作方便，我们直接引用elementUI组件，方便添加一些按钮，弹窗等。在系统中找一个文件夹，如d:/demos中，打开cmd窗口，使用。进入到vue-leaflet 文件夹中，打开cmd窗口，使用。进入到vue-three文件夹中，打开cmd窗口，使用。

2024-11-04 09:58:25 1081

mad970906的博客