- 博客(45)
- 收藏
- 关注
RSS订阅原创 threejs 光棱锥效果(支持生成多个)
此案例的光棱锥是由两个圆锥几何体和一个平面几何体构成，并且支持创建多个，下面是这次案例的展示效果：threejs光棱锥效果。
2024-01-11 14:29:50
653
10
原创 threejs 光带扩散动画
最近项目中要求做一段光带效果动画，尝试着写了一下，下面是本次分享光带扩散动画的效果预览：20240110_204035这里使用缓冲区几何体bufferGeometry，通过设置顶点属性position来构成光带模型，在创建顶点之前需要一下几个必备参数：接下来就是创建光带的顶点位置数组了，光带由N个矩形组成，一个矩形又由两个三角形构成；for循环遍历间隔段数segment，每3个值代表一个顶点位置，3个顶点位置又组成一个三角形；x轴上的位置使用Math.cos函数得出，z轴上的位置使用Math.sin函
2024-01-10 22:21:27
1218
原创 threejs课程笔记-20 向量点乘、叉乘
你只需要记住a.dot(b)的几何含义是向量a在向量b上投影长度与向量b相乘，或者说向量a长度 * 向量b长度 * cos(ab夹角)。threejs三维向量Vector3封装了一个点乘相关的方法.dot()，本节课主要目的就是让大家能够灵活应用点乘方法.dot()a.dot(b)表示向量a与向量b点乘，返回结果是一个数字(标量)假设两个向量的夹角是θ，两个向量的单位向量进行点乘.dot()，返回的结果就是夹角θ的余弦值cos(θ)点乘是向量的一种运算规则，点乘也有其它称呼，比如点积、数量积、标量积。
2023-07-05 22:25:50
911
原创 threejs课程笔记-19 位移、速度、加速度（向量）
前面介绍过threejs的Vector3类可以表示物体的位置，也可以表示物体速度、位移等有方向的量。下面给写一个物体匀速运动的动画案例，已知物体的初始位置、物体的速度，然后写一个物体的运动动画效果。本节课给大家讲解一个物体抛出去落在地面的动画效果，注意学习本节课内容之前，确保你已经掌握上节课关于匀速动画的讲解。重力加速度乘以每次渲染时间，与原来的速度累加，可以更新当前的速度。
2023-07-04 14:38:56
558
原创 17.Tweenjs动画库
tweenjs是一个JavaScript编写的补间动画库，如果你使用three.js开发web3d项目，使用tween.js辅助three.js生成动画效果也是比较好的选择。
2023-07-02 22:15:36
654
原创 16.关键帧动画
执行动画播放器AnimationMixer的clipAction()方法会返回一个AnimationAction对象。AnimationAction对象的功能就是用来控制如何播放关键帧动画，比如是否播放、几倍速播放、是否循环播放、是否暂停播放等等。Bone骨骼是threejs的一个类，用来模拟人或动物的骨骼，他的父节点是Object3D，继承了位置属性position、旋转属性rotation等等。在开发过程中，有时候会用三维建模软件设置动画，一起跟随模型导出文件，这时候，只需要播放文件中的动画即可。
2023-07-02 22:12:42
356
原创 15.场景标注标签信息
下面给大家介绍一个threejs的扩展库CSS2DRenderer.js，通过CSS2DRenderer.js可以把HTML元素作为标签标注三维场景。
2023-07-02 22:11:33
821
原创 14.射线拾取模型
射线Ray和三维向量Vector3一样属于数学几何计算相关的API,可以进行射线交叉计算。学习Three.js中的射线Ray概念，你可以类比数学几何中提到的射线，在三维空间中，一条线把一个点作为起点，然后沿着某个方向无限延伸。
2023-07-02 21:42:51
325
原创 13.后处理EffectComposer
examples/jsm/shaders/目录下有很多不同功能的shader文件,GammaCorrectionShader.js的功能就是进行伽马校正，具体点说就是可以用来解决gltf模型后处理时候，颜色偏差的问题。，你可以看到threejs提供了很多后处理通道，想实现什么样的后期处理效果，需要调用threejs对应的后处理通道扩展库。所谓threejs后期处理，就像ps一样，对threejs的渲染结果进行后期处理，比如添加发光效果。FXAA减弱了锯齿，但是并不完美。查看threejs文件包目录。
2023-07-02 21:21:01
521
原创 12.精灵模型Sprite
Sprite与矩形平面Mesh的区别在于,当你旋转三维场景的时候，如果通过相机控件OrbitControls旋转测试，你可以发现Sprite矩形平面会始终平行于Canvas画布或者说屏幕，而矩形平面Mesh的姿态角度会跟着旋转，不一定平行于canvas画布。Three.js的精灵模型Sprite和Threejs的网格模型Mesh一样都是模型对象，父类都是Object3D。Sprite形状是矩形，PlaneGeometry创建的网格模型Mesh的形状也是矩形。
2023-07-02 20:34:03
204
原创 10.相机基础
在实际应用中，透视投影相机的规则是远小近大，相机距离目标观察点距离越远，目标模型显示越小，距离越近显示越大 前面给大家讲解过，对于透视投影相机而言，OrbitControls缩放，本质上就是改变相机的位置属性.position。通过.minPolarAngle和.maxPolarAngle属性控制上下的旋转范围，默认从0到180度，默认情况下0度，XOZ平面平行canvas画布，y轴垂直指向屏幕外，90度时候，渲染结果y轴竖直向上，180度，XOZ平面平行canvas画布，y轴垂直指向屏幕内。
2023-07-01 16:30:16
634
原创 九、threejs学习笔记-生成曲线、几何体
方法.getPoints()的返回值是一个由二维向量Vector2或三维向量Vector3构成的数组，Vector2表示位于同一平面内的点，Vector3表示三维空间中一点。CatmullRomCurve3是3D样条曲线API，曲线经过的点可以在3D空间中任何一个位置，二维样条曲线SplineCurve默认情况下就是在XOY平面生成一个平面的样条曲线。.lineTo()绘制直线线段，直线线段的起点是当前点属性.currentPoint表示的位置，结束点是.lineTo()的参数表示的坐标。
2023-07-01 11:32:15
935
原创 八、threejs学习笔记-渲染器和前端UI界面
Canvas是HTML的元素之一，Canvas元素的CSS布局规律和div、img等其它HTML元素相似，webgl就是依赖于canvas实现，threejs是基于webgl封装的，自然也要依赖canvas，具体说就是把三场场景渲染到canvas画布上。通过Three.js渲染一个模型的时候，不希望canvas画布有背景颜色，也就是canvas画布完全透明，可以透过canvas画布看到画布后面叠加的HTML元素图文，呈现出来一种三维模型悬浮在网页上面的效果。参数二为一个函数，加载结束调用；
2023-07-01 10:43:41
945
原创 七、threejs学习笔记-PBR材质与纹理贴图
所谓PBR就是，基于物理的渲染。Three.js提供了两个PBR材质相关的API和，其中MeshPhysicalMaterial是MeshStandardMaterial扩展的子类，提供了更多的功能属性。
2023-07-01 10:37:49
1055
原创 六、threejs学习笔记-加载外部三维模型
GLTF格式是新2015发布的三维模型格式，随着物联网、WebGL、5G的进一步发展，会有越来越多的互联网项目Web端引入3D元素，你可以把GLTF格式的三维模型理解为.jpg、.png格式的图片一样，现在的网站，图片基本是标配，对于以后的网站来说如果需要展示一个场景，使用3D来替换图片表达也是很正常的事情。
2023-07-01 10:26:17
691
原创 五、threejs学习笔记-顶点UI贴图，纹理贴图
顶点UV坐标的作用是从纹理贴图上提取像素映射到网格模型Mesh的几何体表面上。顶点UV坐标和顶点位置坐标是一一对应的，UV顶点坐标你可以根据需要在0~1之间任意设置，具体怎么设置，要看你想把图片的哪部分映射到Mesh的几何体表面上。/**纹理坐标0~1之间随意定义*/0, 0, //图片左下角1, 0, //图片右下角1, 1, //图片右上角0, 1, //图片左上角]);// 设置几何体attributes属性的位置normal属性//2个为一组,表示一个顶点的纹理坐标。
2023-07-01 10:01:45
744
原创 四、threejs 学习笔记-层级模型
下面代码创建了两个网格模型mesh1、mesh2，通过THREE.Group类创建一个组对象group,然后通过add方法把网格模型mesh1、mesh2作为设置为组对象group的子对象，然后在通过执行scene.add(group)把组对象group作为场景对象的scene的子对象。网格模型mesh1、mesh2作为设置为父对象group的子对象，如果父对象group进行旋转、缩放、平移变换，子对象同样跟着变换，就像你的头旋转了，眼睛会跟着头旋转。(1) 本地(局部)坐标和世界坐标。
2023-07-01 09:57:38
560
原创 三、threejs 学习笔记-模型对象和材质
复制.copy()简单说就是把一个对象属性的属性值赋值给另一个对象,下面以三维向量对象Vector3给大家举例，其他的threejs对象都可以参照类似的写法。查看官网的Color，可以看到Color提供了.setHex()、.setRGB()、.setStyle()、.set()等修改颜色值的方法。克隆.clone()、复制.copy()是threejs很多对象都具有的方法，比如三维向量对象Vector3、网格模型Mesh、几何体、材质。通过克隆.clone()一个一样的新模型对象。(4) 绕某个轴旋转。
2023-07-01 09:55:05
462
原创 一、threejs 学习笔记-基础入门
npm命令下载// .position 设置相机位置// .lookAt 设置观察目标位置参数含义默认值fov相机视锥体竖直方向视野角度50aspect相机视锥体水平方向和竖直方向长度比，一般设置为Canvas画布宽高比width / height1near相机视锥体近裁截面相对相机距离0.1far相机视锥体远裁截面相对相机距离，far-near构成了视锥体高度方向2000。
2023-07-01 09:54:24
252
原创 二、threejs 学习笔记-几何体BufferGeometry
通过javascript类型化数组 (opens new window)Float32Array创建一组xyz坐标数据用来表示几何体的顶点坐标。//类型化数组创建顶点数据0, 0, 0, //顶点1坐标50, 0, 0, //顶点2坐标0, 100, 0, //顶点3坐标0, 0, 10, //顶点4坐标0, 0, 100, //顶点5坐标50, 0, 10, //顶点6坐标]);
2023-07-01 09:53:37
385
1
原创 threejs课程笔记-18 数学几何计算基础
在threejs的MathUtils类中，定义了弧度与角度的转换方法。弧度转角度.radToDeg()与角度转弧度.degToRad()三角函数练习，将一个半圆等分并显示间隔点。
2023-06-19 22:41:31
503
原创 vue2与vue3的使用区别
vue2中在data()中定义并return返回data(){return {name:'小明',age:'20',vue3使用reactive和ref定义响应式变量reactive定义数组和对象等复杂类型的变量ref定义字符串，数字，布尔值这些简单类型的变量let str = ref('你好')
2023-01-28 22:03:53
138
原创 vue3学习整理
passive：在移动端，当我们在监听元素滚动事件的时候，会一直触发onscroll事件会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.lazy修饰符。它会在同步执行过程中，自动追踪所有能访问到的响应式属性。具名插槽通过特殊attribute的name，表示为这个插槽的唯一id，要为具名插槽中引入内容，需要使用一个带有v-slot的template的元素，v-slot可以缩写为#相比之下，局部注册的组件需要在使用它的父组件中显式导入，并且只能在该父组件中使用。
2023-01-15 22:00:16
373
原创 Lodash方法整理
Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。
2022-12-28 17:53:17
258
原创 uni-app echarts组件封装
第一步，在uni-app市场找到百度图标导入第二步，安装 echarts 或者直接使用插件内的echarts.min文件注意：必须使用hbuilderx 3.4.8-alpha及以上echarts 5.3.0及以上。
2022-12-28 14:52:30
1347
原创 JS中map、forEach、filter、some、every的使用及区别
如果 thisValue参数有值，则每次函数被调用的时候，this 都会指向 thisValue参数上的这个对象。如果省略了 thisValue参数,或者赋值为 null 或 undefined，则 this 指向全局对象。语法：var newArr = [1,2,3].map(function (){item,index,arr},thisValue);只要数组中一个成员返回true，则some()就直接返回true。需要数组中的全部成员都返回true，every()才返回true。
2022-12-27 21:54:56
590
原创 JS方法整理
Array:数组方法sort()：对数组的成员进行排序，默认是按照字典顺序排序，会改变原数组isArray()：返回一个布尔值，判断一个参数是否为数组toString()：将数组中每个元素转为字符串类型push()：在数组的末端添加一个或多个元素，返回添加完成后的数组长度，会改变原数组pop()：在数组的末端删除一个元素，并返回这个删除的元素，会改变原数组shift()：在数组的最前端删除一个元素，并返回这个元素，会改变原数组。
2022-12-27 21:46:39
91
原创 CSS笔记整理
CSSCSS基本结构CSS的语法单元是样式，每个样式包含两个部分内容：选择器和声明（或称为规则）选择器：选择器告诉我们浏览器该样式将作用于页面哪些对象，这些对象可以是某个标签、所有网页对象指定Class或ID值等，；浏览器在解析这个样式时，根据选择器来渲染对象的显示效果，选择器也可称为选择符声明：声明可以增加一个或无数个，这些声明命令浏览器如何去渲染选择器的对象。声明必须包括两个部分：属性和属性值，并用分号来标识一个声明的结束，在一个样式中的最后一个声明可以省略分号。
2022-12-27 21:17:52
172
原创 HTML学习整理
optgroup是表单中比较生僻的一个元素，optgroup元素的作用是在下拉菜单或列表框中定义分组选项，通俗的来说，就是可使用optgroup元素为select元素所包含option元素进行分类。列表是网页中最常见的一种信息结构，很多初学者认为带有项目的符号的多行信息模块就是列表，这是对列表的语义误解，事实上，列表应该是同类、同行或同质信息的排列和结合。新增了27个元素，废弃16个元素，根据现有的标准规范，把HTML5的元素按优先等级定义为结构性元素、块级元素、行内语义性元素、交互性元素4大类。
2022-12-27 20:33:28
445
原创 uni-app renderjs 使用leaflet示例
在保证已有script下在创建一个新的script标签，标签中定义land=“renderjs” module=“任意名”通过change监听‘msg’的变化来调用视图层的‘receiveMsg’方法，rendererjs是一个运行在视图层的js，只支持app-vue和h5。module相当于id，后面需要通过module属性来调用方法。通过callMethod来调用逻辑层的方法并定义传入的参数。下面是通过renderjs使用leaflet地图示例。renderjs的用处。renderjs用法。
2022-12-21 16:53:53
1215
原创 leaflet基本使用
crs:地图使用的坐标系，默认使用的是EPSG3857坐标系。zoomControl:是否将zoom缩放控件添加到地图中。iconSize:图标图像的尺寸，单位为像素。title:鼠标移动到标记上时显示的标记。:地图默认的中心点位置[纬度，经度]maxZoom:地图最大的缩放等级。minZoom:地图最小的缩放等级。icon:将创建的标记改为一个图标。zoom:地图默认的缩放等级。layers:添加到地图的图层。opacity:标记的不透明度。iconUrl:图标图像的地址。版权控件添加到地图中。
2022-12-09 14:17:00
4497
原创 JS 多次请求接口，按顺序依次等待执行
在函数名前面使用async，然后在将请求接口封装在Promise中，在调用Promise前加上await，await会等待Promise中执行到resolve时，再进行下一步操作。在开发中需要多次请求某一个相同的接口，但是不能多次请求同时执行，需要等待上一次请求结束再执行新的请求。
2022-11-24 20:54:44
4359
原创 render函数
通常我们都会把我们的页面结构逻辑都写在 template 中，然后再通过vue将我们的代码转换成虚拟DOM，相比于真实DOM，虚拟DOM是通过js代码处理的，所以消耗的性能相对较小，当然大部分情况下使用 template 创建我们的HTML是可以的，但是在有些场景下，我们真的需要通Javascript的完全编程的能力来完成时，就可以用到 render函数，比之 template 更接近编译器。render函数即渲染函数，它是个函数，render返回的参数是Vnode（即虚拟节点，也就是我们要渲染的节点）
2022-11-22 11:14:30
10616
3
原创 Vue（2.X）入门使用
是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。直接用标签引入这里我使用的是2.x的版本：https://cn.vuejs.org/js/vue.js先来试试创建第一个Vue应用吧插值数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：Mustache 标签将会被替代为对应数据对象上 msg property 的......
2022-07-25 16:37:23
301
空空如也
uni-app中微信小程序的addGroundOverlay方法的使用问题
2023-05-11
echart拐点文字重叠
2022-12-07
TA创建的收藏夹 TA关注的收藏夹
TA关注的人