![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
threejs
文章平均质量分 76
焦焦焦焦焦
这个作者很懒,什么都没留下…
展开
-
threejs 光棱锥效果(支持生成多个)
此案例的光棱锥是由两个圆锥几何体和一个平面几何体构成,并且支持创建多个,下面是这次案例的展示效果:threejs光棱锥效果。原创 2024-01-11 14:29:50 · 652 阅读 · 10 评论 -
threejs 光带扩散动画
最近项目中要求做一段光带效果动画,尝试着写了一下,下面是本次分享光带扩散动画的效果预览:20240110_204035这里使用缓冲区几何体bufferGeometry,通过设置顶点属性position来构成光带模型,在创建顶点之前需要一下几个必备参数:接下来就是创建光带的顶点位置数组了,光带由N个矩形组成,一个矩形又由两个三角形构成;for循环遍历间隔段数segment,每3个值代表一个顶点位置,3个顶点位置又组成一个三角形;x轴上的位置使用Math.cos函数得出,z轴上的位置使用Math.sin函原创 2024-01-10 22:21:27 · 1217 阅读 · 0 评论 -
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 · 910 阅读 · 0 评论 -
threejs课程笔记-19 位移、速度、加速度(向量)
前面介绍过threejs的Vector3类可以表示物体的位置,也可以表示物体速度、位移等有方向的量。下面给写一个物体匀速运动的动画案例,已知物体的初始位置、物体的速度,然后写一个物体的运动动画效果。本节课给大家讲解一个物体抛出去落在地面的动画效果,注意学习本节课内容之前,确保你已经掌握上节课关于匀速动画的讲解。重力加速度乘以每次渲染时间,与原来的速度累加,可以更新当前的速度。原创 2023-07-04 14:38:56 · 557 阅读 · 0 评论 -
threejs课程笔记-18 数学几何计算基础
在threejs的MathUtils类中,定义了弧度与角度的转换方法。弧度转角度.radToDeg()与角度转弧度.degToRad()三角函数练习,将一个半圆等分并显示间隔点。原创 2023-06-19 22:41:31 · 502 阅读 · 0 评论 -
17.Tweenjs动画库
tweenjs是一个JavaScript编写的补间动画库,如果你使用three.js开发web3d项目,使用tween.js辅助three.js生成动画效果也是比较好的选择。原创 2023-07-02 22:15:36 · 652 阅读 · 0 评论 -
16.关键帧动画
执行动画播放器AnimationMixer的clipAction()方法会返回一个AnimationAction对象。AnimationAction对象的功能就是用来控制如何播放关键帧动画,比如是否播放、几倍速播放、是否循环播放、是否暂停播放等等。Bone骨骼是threejs的一个类,用来模拟人或动物的骨骼,他的父节点是Object3D,继承了位置属性position、旋转属性rotation等等。在开发过程中,有时候会用三维建模软件设置动画,一起跟随模型导出文件,这时候,只需要播放文件中的动画即可。原创 2023-07-02 22:12:42 · 356 阅读 · 0 评论 -
15.场景标注标签信息
下面给大家介绍一个threejs的扩展库CSS2DRenderer.js,通过CSS2DRenderer.js可以把HTML元素作为标签标注三维场景。原创 2023-07-02 22:11:33 · 821 阅读 · 0 评论 -
14.射线拾取模型
射线Ray和三维向量Vector3一样属于数学几何计算相关的API,可以进行射线交叉计算。学习Three.js中的射线Ray概念,你可以类比数学几何中提到的射线,在三维空间中,一条线把一个点作为起点,然后沿着某个方向无限延伸。原创 2023-07-02 21:42:51 · 325 阅读 · 0 评论 -
13.后处理EffectComposer
examples/jsm/shaders/目录下有很多不同功能的shader文件,GammaCorrectionShader.js的功能就是进行伽马校正,具体点说就是可以用来解决gltf模型后处理时候,颜色偏差的问题。,你可以看到threejs提供了很多后处理通道,想实现什么样的后期处理效果,需要调用threejs对应的后处理通道扩展库。所谓threejs后期处理,就像ps一样,对threejs的渲染结果进行后期处理,比如添加发光效果。FXAA减弱了锯齿,但是并不完美。查看threejs文件包目录。原创 2023-07-02 21:21:01 · 520 阅读 · 0 评论 -
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 阅读 · 0 评论 -
11.光源和阴影
聚光源可以认为是一个沿着特定方会逐渐发散的光源,照射范围在三维空间中构成一个圆锥体。原创 2023-07-02 09:01:35 · 89 阅读 · 0 评论 -
10.相机基础
在实际应用中,透视投影相机的规则是远小近大,相机距离目标观察点距离越远,目标模型显示越小,距离越近显示越大 前面给大家讲解过,对于透视投影相机而言,OrbitControls缩放,本质上就是改变相机的位置属性.position。通过.minPolarAngle和.maxPolarAngle属性控制上下的旋转范围,默认从0到180度,默认情况下0度,XOZ平面平行canvas画布,y轴垂直指向屏幕外,90度时候,渲染结果y轴竖直向上,180度,XOZ平面平行canvas画布,y轴垂直指向屏幕内。原创 2023-07-01 16:30:16 · 634 阅读 · 0 评论 -
九、threejs学习笔记-生成曲线、几何体
方法.getPoints()的返回值是一个由二维向量Vector2或三维向量Vector3构成的数组,Vector2表示位于同一平面内的点,Vector3表示三维空间中一点。CatmullRomCurve3是3D样条曲线API,曲线经过的点可以在3D空间中任何一个位置,二维样条曲线SplineCurve默认情况下就是在XOY平面生成一个平面的样条曲线。.lineTo()绘制直线线段,直线线段的起点是当前点属性.currentPoint表示的位置,结束点是.lineTo()的参数表示的坐标。原创 2023-07-01 11:32:15 · 932 阅读 · 0 评论 -
八、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 阅读 · 0 评论 -
七、threejs学习笔记-PBR材质与纹理贴图
所谓PBR就是,基于物理的渲染。Three.js提供了两个PBR材质相关的API和,其中MeshPhysicalMaterial是MeshStandardMaterial扩展的子类,提供了更多的功能属性。原创 2023-07-01 10:37:49 · 1052 阅读 · 0 评论 -
六、threejs学习笔记-加载外部三维模型
GLTF格式是新2015发布的三维模型格式,随着物联网、WebGL、5G的进一步发展,会有越来越多的互联网项目Web端引入3D元素,你可以把GLTF格式的三维模型理解为.jpg、.png格式的图片一样,现在的网站,图片基本是标配,对于以后的网站来说如果需要展示一个场景,使用3D来替换图片表达也是很正常的事情。原创 2023-07-01 10:26:17 · 679 阅读 · 0 评论 -
五、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 阅读 · 0 评论 -
四、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 · 556 阅读 · 0 评论 -
三、threejs 学习笔记-模型对象和材质
复制.copy()简单说就是把一个对象属性的属性值赋值给另一个对象,下面以三维向量对象Vector3给大家举例,其他的threejs对象都可以参照类似的写法。查看官网的Color,可以看到Color提供了.setHex()、.setRGB()、.setStyle()、.set()等修改颜色值的方法。克隆.clone()、复制.copy()是threejs很多对象都具有的方法,比如三维向量对象Vector3、网格模型Mesh、几何体、材质。通过克隆.clone()一个一样的新模型对象。(4) 绕某个轴旋转。原创 2023-07-01 09:55:05 · 462 阅读 · 0 评论 -
二、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 学习笔记-基础入门
npm命令下载// .position 设置相机位置// .lookAt 设置观察目标位置参数含义默认值fov相机视锥体竖直方向视野角度50aspect相机视锥体水平方向和竖直方向长度比,一般设置为Canvas画布宽高比width / height1near相机视锥体近裁截面相对相机距离0.1far相机视锥体远裁截面相对相机距离,far-near构成了视锥体高度方向2000。原创 2023-07-01 09:54:24 · 252 阅读 · 0 评论