自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(103)
  • 收藏
  • 关注

原创 多种vue前端框架介绍

学如逆水行舟,不进则退。在现今的软件开发领域,Vue.js凭借其高效、灵活和易于上手的特性,成为了前端开发的热门选择。对于需要快速搭建企业级后台管理系统的开发者而言,使用现成的Vue后台管理系统模板无疑是一个明智之举。本文我为大家分享几款开源、免费开源、开箱即用的开源免费的 Vue3 开源管理后台,它们可以帮助你在项目中快速起步!专注于业务逻辑的开发。

2025-01-15 11:44:24 1909

原创 Three 场景(Scene)

场景能够让你在什么地方、摆放什么东西来交给three.js来渲染,这是你放置物体、灯光和摄像机的地方。

2024-11-25 13:25:35 640

原创 three.js 纹理(Texture)、深度纹理(DepthTexture)、视频纹理(VideoTexture)

创建一个纹理贴图,将其应用到一个表面,或者作为反射/折射贴图。

2024-10-29 19:45:24 1543

原创 three.js Canvas纹理(CanvasTexture)、压缩的纹理(CompressedTexture)

从Canvas元素中创建纹理贴图。它几乎与其基类相同,但它直接将(需要更新)设置为了。

2024-10-28 10:33:07 602

原创 three.js LightShadow

从光的角度来看,其他物体背后的物体将处于阴影中。创建一个新的LightShadow。超出像素深度的位置在阴影中。较高的值会以计算时间为代价提供更好的阴影质量。默认值为0.此处非常小的调整(大约0.0001)可能有助于减少阴影中的伪影。阴影贴图偏差,在确定曲面是否在阴影中时,从标准化深度添加或减去多少。模拟阴影相机空间,计算阴影贴图中的位置和深度。较高的值会在阴影中产生不必要的条带效果 - 更大的。将此值设置为大于1的值将模糊阴影的边缘。中的所有属性的值复制到该Light。这是在渲染期间内部计算的。

2024-10-25 10:21:08 540

翻译 three.js开发智慧园区

技术栈基于vue3+vite,

2024-10-24 11:53:56 303

原创 three.js 灯光

光照探针是一种在3D场景中添加光源的另一种方法。AmbientLightProbe 是场景中单个环境光的光照估算数据。有关光照探针的更多信息,请转到。

2024-10-23 16:57:41 964

原创 three.js Clock、Layers

该对象用于跟踪时间。如果可用,则 Clock 对象通过该方法实现,否则回落到使用略欠精准的来实现。

2024-10-21 14:22:49 683

原创 three.js 光线投射Raycaster

这个类用于进行(光线投射)。光线投射用于进行鼠标拾取(在三维空间中计算出鼠标移过了什么物体)。

2024-10-21 14:19:26 945

原创 threejs 三维物体(Object3D)

这是Three.js中大部分对象的基类,提供了一系列的属性和方法来对三维空间中的物体进行操纵。请注意,可以通过( object )方法来将对象进行组合,该方法将对象添加为子对象,但为此最好使用(来作为父对象)。

2024-10-13 17:35:19 1403

原创 three.js BufferGeometry

该 attribute 因此所存储的是每个三角面片的三个顶点的索引。start 表明当前 draw call 中的没有索引的几何体的几何体的第一个顶点;的 hashmap, 通过该 hashmap,遍历 attributes 的速度会更快。将当前几何体分割成组进行渲染,每个部分都会在单独的 WebGL 的 draw call 中进行绘制。通过 hashmap 存储该几何体相关的属性,hashmap 的 id 是当前 attribute 的名称,值是相应的。该操作一般在一次处理中完成,不会循环处理。

2024-09-26 17:55:05 1147

原创 three.js BufferAttribute

这个类用于存储与相关联的 attribute(例如顶点位置向量,面片索引,法向量,颜色值,UV坐标以及任何自定义 attribute )。利用 BufferAttribute,可以更高效的向GPU传递数据。详情和例子见该页。在 BufferAttribute 中,数据被存储为任意长度的矢量(通过进行定义),下列函数如无特别说明, 函数参数中的index会自动乘以矢量长度进行计算。

2024-09-25 18:05:13 1235

原创 three.js 透视相机(PerspectiveCamera)

这一摄像机使用(透视投影)来进行投影。这一投影模式被用来模拟人眼所看到的景象,它是3D场景的渲染中使用得最普遍的投影模式。

2024-09-23 17:57:04 853

原创 three.js AudioAnalyser、AudioContext、AudioListener、PositionalAudio

大多数情况下, listener对象是camera的子对象. Camera的3D变换表示了listener的3D变换.一个three.js程序通常创建一个AudioListener. 它是音频实体构造函数的必须参数,比如。2的幂次方最高为2048, 用来表示确定频域的FFT (傅立叶变换)大小. 这个。用来分析数据的Uint8Array的大小由。表示在场景中所有的位置和非位置相关的音效.创建一个新的AudioListener.的值, 否则创建一个新的。方法. 看这个页面.如果定义了,返回给外部。

2024-09-22 20:41:49 1022

原创 three.js Audio

/- 100为一个半音, +/- 1200为一个八度。. 在初始化和设置/删除filters时使用.表示类型的字符串, 设置为'Audio'.音源的类型. 默认为 'empty'.. 在设置/删除filters时使用.()等方法控制播放. 默认为。,以用于播放整个buffer。是否自动开始播放. 默认为。音频开始播放的偏移时间. 和。给 'audioNode'.为true, 也开始播放.(是否循环播放)的值.是true, 开始播放.是true, 暂停播放.的值 (是否循环播放).是true, 停止播放.

2024-09-20 22:26:09 696

原创 three.js PropertyBinding和PropertyMixer

插值器可使用 .buffer 作为 .result 且数据会进入'incoming'区. 'accu0'和'accu1'用于按帧交错累加‘incoming’中的数据并进行比较以侦测变化。创建一个新的复合属性绑定(Composite PropertyBinding) (如果根对象是AnimationObjectGroup)或普通属性绑定。将buffer[accuIndex]中'incoming'区的数据累加到'accu[i]'区中。记住绑定属性的状态并复制到两个'accu'区中.如果权值为0,则什么都不做。

2024-09-18 23:33:16 684

原创 three.js KeyframeTrack

关键帧轨道(KeyframeTrack)是关键帧()的定时序列, 它由时间和相关值的列表组成, 用来让一个对象的某个特定属性动起来。在使用手册的“下一步”章节中,“动画系统”一文对three.js动画系统中的不同元素作出了概述和的动画层级相反, 关键帧轨道(KeyframeTrack)不会将单帧作为对象存储在“key”数组(一个存有每一帧的时间和值的地方)中。数组按顺序存储该轨道的所有关键帧的时间值,而数组包含动画属性的相应更改值。

2024-09-14 15:43:18 1191

原创 Three.js AnimationUtils 和 AnimationObjectGroup

将本来要作为根对象传入构造器或者动画混合器(AnimationMixer)的clipAction方法中的对象加入组中,并将这个组对象作为根对象传递。一个包含此动画对象组(AnimationObjectGroup)的一些信息的对象 (总数, 使用中的数量,绑定到每个对象上的数量)将任意数量的对象从这个动画对象组(AnimationObjectGroup)中删除。注意,这个类的实例作为混合器中的一个对象,因此,必须对组内的单个对象做缓存控制。一个提供各种动画辅助方法的对象,内部使用。将数组转换为某种特定类型。

2024-09-12 17:42:13 758

原创 three.js AnimationClip 和 AnimationMixer

动画剪辑(AnimationClip)是一个可重用的关键帧轨道集,它代表动画。

2024-09-11 22:48:20 1000

原创 Three.js AnimationAction

AnimationActions 用来调度存储在中的动画。

2024-09-09 22:47:27 1110

原创 Three 渲染器(二)

options - (可选)一个保存着自动生成的目标纹理的纹理参数以及表示是否使用深度缓存/模板缓存的布尔值的对象。是一个缓冲,就是在这个缓冲中,视频卡为正在后台渲染的场景绘制像素。它用于不同的效果,例如用于在一个图像显示在屏幕上之前先做一些处理。这个方法用来来清除renderTarget的颜色、深度和/或模板缓冲区。如果设置,那么场景的深度将会被渲染到此纹理上。渲染目标视口内的一个矩形区域,区域之外的片元将会被丢弃。纹理实例保存这渲染的像素,用作进一步处理的输入值。采用传入的渲染目标的设置。

2024-09-08 00:16:40 892

原创 Three 渲染器

将输出canvas的大小调整为(width, height)并考虑设备像素比,且将视口从(0, 0)开始调整到适合大小 将updateStyle设置为false以阻止对canvas的样式做任何改变。根据应用的需求,可能需要关闭排序并使其他方法来处理透明度的渲染,例如, 手动确定每个对象的显然顺序。- (可选) 该对象的属性定义了渲染器的行为。在所有情况下,当缺少参数时,它将采用合理的默认值。- maxTextures: *gl.MAX_TEXTURE_IMAGE_UNITS的值,着色器可使用的纹理数量。

2024-09-06 09:34:11 1166

原创 three 加载器(四)

如果采用此方法,一旦相应的加载过程完成,纹理可能会在场景中出现。— 将在加载过程中进行调用。从URL中进行加载,并将被解析的响应内容传递给onLoad。— 将在加载过程中进行调用,参数为进度事件。— 当解析完成时被调用,其中参数被解析为。— 必选参数,需要被解析的JSON源。— 必选参数,需要被解析的JSON源。— 必选参数,需要被解析的JSON源。— 必选参数,需要被解析的JSON源。— 必选参数,需要被解析的JSON源。— 必选参数,需要被解析的JSON源。— 必选参数,需要被解析的JSON源。

2024-09-05 14:03:48 969

原创 three.js Loader

crossOrigin 字符串用于实现 CORS ,以从允许 CORS 的其他域加载url。— crossOrigin字符串用于实现CORS,以从允许CORS的其它域加载url。该方法需要被所有具体的加载器来实现。它包含了从后端加载资产的逻辑。将从中加载额外资源(例如纹理贴图)的基本路径。— 一个字符串,包含要加载的文件的路径/URL。url — 从基本URL中,进行提取的URL。将从中加载资产的基本路径。— 设置独立资源(如纹理贴图)的基本路径。创建一个新的Loader。— 设置资产的基本路径。

2024-09-04 11:29:37 1313 2

原创 three.js 图片加载器

用来加载一个Image的加载器。manager — 加载器使用的loadingManager,默认为THREE.DefaultLoadingManager.manager — 加载器使用的loadingManager,默认为THREE.DefaultLoadingManager.ImageBitmap提供了一种异步且有效的资源的途径,用于在WebGL中渲染的纹理。设置加载文件的基本路径或URL。从URL中进行加载,并返回将包含数据的image对象。从URL中进行加载,并返回将包含数据的image对象。

2024-09-04 11:20:54 1327

原创 Three 加载器(三)

这是一个全局属性,只需要设置一次,供内部使用FileLoader的所有加载器使用。Cache 是​​一个缓存模块,用于保存通过此加载器发出的每个请求的响应,因此每个文件都会被请求一次。manager — loadingManager 是加载器所使用的加载管理器。使用XMLHttpRequest来加载资源的低级类,并由大多数加载器内部使用。loadingManager 是加载器所使用的加载管理器,默认为 DefaultLoadingManager.加载器正在使用的loadingManager。

2024-09-03 19:24:08 901

原创 three 加载器 (二)

请注意,一般来说,在立方体贴图坐标系中,当查找positive-z轴时,positive-x表示右侧 - 换句话说,此坐标系使用左手坐标系。urls — 数组长度为6的图像数组,数组内容为URL,每一个URL用于CubeTexture的每一侧。这些URL将被指定顺序: pos-x, neg-x, pos-y, neg-y, pos-z, neg-z. 数组内容也可以为。从URL中进行加载,并将被加载的texture传递给onLoad。从URL中进行加载,并将被加载的纹理传递给onLoad。

2024-09-02 17:52:28 714

原创 three 加载器(一)

manager — 加载器所使用的loadingManager。manager — 加载器使用的loadingManager。基于块的纹理加载器 (dds, pvr, ...)的抽象类。加载器正在使用的loadingManager。用来加载BufferGeometry的加载器。设置加载文件的基本路径或URL。当加载同一目录中的许多模型,此方法将很有用。从URL中进行加载,并将已经以解析的响应内容传递给onLoad。回调参数为将要加载的纹理。从URL中进行加载,并将被加载的纹理传递给onLoad。

2024-08-29 14:09:52 762

原创 three 加载器 AnimationLoader、AudioLoader

manager — 加载器所使用的loadingManager。onProgress — 将在加载过程中进行调用。onProgress — 将在加载过程中进行调用。manager — 加载器使用的loadingManager。context — 加载器使用的AudioContext。加载器正在使用的loadingManager。加载器正在使用的loadingManager。从URL中进行加载并将已经加载的AudioBuffer传递给onLoad。回调参数为将要加载的响应文本。

2024-08-27 14:10:40 651

原创 Three 物体(四)

具有Skeleton(骨架)和bones(骨骼)的网格,可用于给几何体上的顶点添加动画。这个精灵的锚点,也就是精灵旋转时,围绕着旋转的点。SpriteMaterial的一个实例,定义了这个对象的外观。material —— (可选)一个Material实例,默认值是一个新的MeshBasicMaterial。精灵是一个总是面朝着摄像机的平面,通常含有使用一个半透明的纹理。用于表示蒙皮网格中骨骼的层次结构的Skeleton(骨架)。将前一个Sprite对象的属性复制给当前的这个对象。

2024-08-26 13:44:54 603

原创 Three 物体(三)

geometry —— (可选)是一个Geometry或者BufferGeometry的实例,默认值是一个新的BufferGeometry。请注意,这是一份原始数组的拷贝,不是引用,所以你可以在不对当前数组造成影响的情况下,修改原始数组。material —— (可选) 是一个对象,默认值是一个具有随机颜色的新的PointsMaterial。一个Geometry或BufferGeometry的实例(或者派生类),定义了物体的结构。bones —— 包含有一组bone的数组,默认值是一个空数组。

2024-08-23 10:10:16 949

原创 Three 物体(二)

每一个级别都和一个几何体相关联,且在渲染时,可以根据给定的距离,来在这些级别对应的几何体之间进行切换。通常情况下,你会创建多个几何体,比如说三个,一个距离很远(低细节),一个距离适中(中等细节),还有一个距离非常近(高质量)。material —— (可选)一个Material,或是一个包含有Material的数组,默认是一个新的MeshBasicMaterial。多细节层次 —— 在显示网格时,根据摄像机距离物体的距离,来使用更多或者更少的几何体来对其进行显示。(多边形网格)的物体的类。

2024-08-22 09:31:30 804

原创 Three 物体 (一)

material —— 线的材质,默认值是一个新的具有随机颜色的LineBasicMaterial。它和Line几乎是相同的,唯一的区别是它在渲染时使用的是。它几乎和LineSegments是一样的,唯一的区别是它在渲染时使用的是。如果没有指定材质,一个随机颜色的线的材质将会被创建,并应用到该物体上。如果没有指定材质,一个随机颜色的线的材质将会被创建,并应用到该物体上。如果没有指定材质,一个随机颜色的线的材质将会被创建,并应用到该物体上。它几乎和Line是相同的,唯一的区别是它在渲染时使用的是。

2024-08-21 10:55:20 844

原创 three 三角形(Triangle)

一个三角形由三个表示其三个角的Vector3所定义。

2024-08-19 10:04:12 742

原创 three 数学函数(Math)

返回0-1之间的值,该值表示x在最小值和最大值之间移动的百分比,但是当x接近最小值和最大值时,变化程度会平滑或减慢。在区间*- range / 2* 到 *range / 2*随机一个浮点数。结果 - t = 0 将会返回 x 如果 t = 1 将会返回 y.返回一个0-1之间的值。x - 根据其在最小值和最大值之间的位置来计算的值。x - 根据其在最小值和最大值之间的位置来计算的值。t - 封闭区间[0,1]内的插值因子。在x=0和x=1处有0阶和二阶导数。返回大于等于 n 的2的最小次幂。

2024-08-19 10:03:04 670

原创 three 射线(Ray)

射线由一个原点向一个确定的方向发射。它被Raycaster(光线投射)所使用, 以用于辅助。光线投射用于在各个物体之间进行拾取(当鼠标经过三维空间中的物体/对象时进行拾取)。

2024-08-16 13:41:00 683 1

原创 Three 四维向量(Vector4)

该类表示的是一个三维向量(4D一个四维向量表示的是一个有顺序的、四个为一组的数字组合(标记为x、y和z), 可被用来表示很多事物,一个位于四维空间中的点。一个在四维空间中的方向与长度的定义。在three.js中,长度总是从(0, 0, 0, 0)到(x, y, z, w)的(欧几里德距离,即直线距离), 方向也是从(0, 0, 0, 0)到(x, y, z, w)的方向。任意的、有顺序的、四个为一组的数字组合。

2024-07-29 17:15:41 811

原创 Three 三维向量(Vector3)

该类表示的是一个三维向量(3D一个三维向量表示的是一个有顺序的、三个为一组的数字组合(标记为x、y和z), 可被用来表示很多事物。一个位于三维空间中的点。一个在三维空间中的方向与长度的定义。在three.js中,长度总是从(0, 0, 0)到(x, y, z)的(欧几里德距离,即直线距离), 方向也是从(0, 0, 0)到(x, y, z)的方向。任意的、有顺序的、三个为一组的数字组合。

2024-07-26 13:58:52 1757

原创 Three 二维向量(Vector2)

2D(二维向量)的类。一个二维向量是一对有顺序的数字(标记为x和y),可用来表示很多事物一个位于二维空间中的点(例如一个在平面上的点)。一个在平面上的方向与长度的定义。在three.js中,长度总是从(0, 0)到(x, y)的(欧几里德距离,即直线距离), 方向也是从(0, 0)到(x, y)的方向。任意的、有顺序的一对数字。

2024-07-24 16:13:00 978

原创 Three 三维矩阵(Matrix3)、四维矩阵(Matrix4)

将传入的欧拉角转换为该矩阵的旋转分量(左上角的3x3矩阵)。throwOnDegenerate - (optional) 如果设置为true,如果矩阵是退化的(如果不可逆的话),则会抛出一个错误。throwOnDegenerate - (optional) 如果设置为true,如果矩阵是退化的(如果不可逆的话),则会抛出一个错误。,如果throwOnDegenerate 参数没有设置且给定矩阵不可逆,那么将当前矩阵设置为3X3单位矩阵。把该矩阵设置为绕x轴旋转弧度theta (θ)大小的矩阵。

2024-07-23 11:46:27 2014

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除