three.js实战
文章平均质量分 66
使用三维框架three.js实现一些简单使用的实用效果
点燃火柴
心之所向,涸池若海
展开
-
纯shader实现动态警告可视化组件(three.js实战16)
纯shader实现动态警告可视化组件1. demo效果2. 实现要点2.1 绘制外层2.2绘制中间环状圆2.3 绘制中心感叹号3. demo代码1. demo效果 waring-circle 2. 实现要点2.1 绘制外层外层由两部分组成,一个是组成圆环的小圆点,一个是动态变换的弧段,具体实现如下vec4 drawOutCirclePoint(vec2 st){ vec4 o原创 2021-10-27 00:38:26 · 1061 阅读 · 0 评论 -
纯shader实现移动的箭头(three.js实战15)
纯shader实现移动的箭头1. demo效果2. 实现要点2.1 绘制箭头2.2 绘制不同方向流动箭头3. demo代码1. demo效果 2. 实现要点2.1 绘制箭头首先绘制矩形,然后将两个矩形合并生成一个箭头,然后循环生成五个箭头作为底色,单独绘制一个白色箭头作为当前高亮元素,使白色箭头不断切换到底色中的位置,模拟流动效果 float band(float t,floa原创 2021-10-27 00:22:18 · 1895 阅读 · 0 评论 -
纯shader实现动态时钟效果(three.js实战14)
纯shader实现动态时钟效果1. demo效果![在这里插入图片描述](https://img-blog.csdnimg.cn/1076c8cf38bc4ea7a1c2ce45a676d22e.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA54K554eD54Gr5p-0,size_20,color_FFFFFF,t_70,g_se,x_16)2. 实现要点2.1 绘制刻度2.2原创 2021-09-05 23:57:28 · 818 阅读 · 0 评论 -
纯shader实现雷达扫描效果(three.js实战13)
1. demo效果2. 实现要点2.1 绘制雷达边框这一步其实就是绘制一个圆,输入一个屏幕坐标st,原型坐标还有半径,使用distance求出坐标上任意点到圆心的距离,将这个距离接近圆半径的点绘制 float drawCircle(vec2 st,vec2 center,float radius) { float pct = distance(st,center); float line_width = 0.01; re...原创 2021-08-19 23:52:52 · 3573 阅读 · 3 评论 -
模拟楼宇扫光效果(three.js实战12)
1.demo效果2. 实现要点2.1 创建shader材质 let buildingSweepingLightShader = { uniforms: { "boxH": { type: "f", value: -10.0 } }, vertexShader: ` varying vec3 vColor; varying float v_pz;..原创 2021-08-12 23:34:22 · 3179 阅读 · 6 评论 -
一个展示百分比的动态可视化组件(three.js实战11)
一个展示百分比的动态可视化组件1. demo效果2. demo代码js3. demo代码HTML1. demo效果2. demo代码js为了方便后期使用,把demo效果抽成组件,写在component.js中,下面是这个文件内容var CirclePercent = function () { var self = this this.percentNum = 0 this.circlePercent = new THREE.Group(); this.materialColor原创 2021-07-23 22:44:13 · 834 阅读 · 1 评论 -
纯shader实现圆圈内缓缓上升的波浪线(three.js实战10)
使用着色器创建扩散光圈1. demo效果2. RawShaderMaterial介绍3. demo代码1. demo效果2. RawShaderMaterial介绍我们之前在three.js中使用着色器,大多时候都是通过ShaderMaterial着色器材质传入着色器程序,使用这个着色器材质比较方便,因为three.js已经内置了很多常用的变量如position、color、normal、uv等,其实three.js还提供了另外一个着色器材质RawShaderMaterial,与ShaderMate原创 2021-07-08 22:32:13 · 1126 阅读 · 0 评论 -
三维场景中创建镜面反射效果(three.js实战9)
创建镜面效果1. demo效果2. 实现要点2.1 创建三维模型2.2 创建镜面2.3 场景动画更新3. demo代码1. demo效果2. 实现要点2.1 创建三维模型demo中涉及到的模型包括:一个胶囊体,一个甜圈圈,一个多面体小球,和五个面的墙面,上一篇文章专门讲述胶囊体和甜圈圈的创建,此处不再细说,多面体小球也非常简单,直接使用IcosahedronGeometry几何体创建即可function createSmallSphere() { const geometry = new原创 2021-07-02 00:26:28 · 4204 阅读 · 10 评论 -
创建胶囊体和甜圈圈(three.js实战8)
创建胶囊体和甜圈圈1. demo效果2. 实现过程2.1 实现原理2.2 绘制胶囊体2.3 绘制甜圈圈3 demo代码1. demo效果2. 实现过程2.1 实现原理完全对称的几何体可以通过一条样条曲线,扫描360度创建几何体。three.js提供的LatheGeometry类,只需要提供样条曲线的点集,就可以创建出demo中的几何体。2.2 绘制胶囊体上图为绘制胶囊体原理图绘制胶囊体的样条曲线分为三部分,上半部分四分之一圆弧,中间一条直线,下半部分四分之一圆,接下来看看绘制过程/原创 2021-06-30 23:29:34 · 1279 阅读 · 6 评论 -
三维空间中创建label标签(three.js实战7)
使用CSS2DRenderer创建文字说明标签1. demo效果2. CSS2DRenderer使用流程2.1 相关文件引入2.2 创建CSS2DRenderer渲染器2.3 创建ShaderMaterial材质2.4 使用BufferGeometry实例和ShaderMaterial材质创建网格对象3. demo代码1. demo效果如上图,demo中使用CSS2DRenderer创建label,在物体运动中始终保持面向相机,缩放中也正常显示2. CSS2DRenderer使用流程2.1 相关原创 2021-06-27 15:50:05 · 3335 阅读 · 0 评论 -
绘制彩色立方体,使用attribute变量向着色器传值,BufferGeometry和ShaderMaterial配合使用(three.js实战6)
绘制彩色立方体,使用attribute变量向着色器传值1. 前言与demo效果2. 如何使用attribute变量向着色器传值2.1 创建BufferGeometry实例2.2 使用setAttribute设置attribute变量与变量值2.3 创建ShaderMaterial材质2.4 使用BufferGeometry实例和ShaderMaterial材质创建网格对象3. demo代码1. 前言与demo效果上一篇文章学习了如何使用uniform 变量向着色器传值,接下来该学习如何使用attribu原创 2021-06-26 17:59:05 · 869 阅读 · 0 评论 -
绘制不断变色的台体,使用uniform变量向着色器传值,BufferGeometry和ShaderMaterial配合使用(three.js实战5)
使用BufferGeometry和ShaderMaterial绘制不断变色的台体1. 前言与demo效果2. 如何使用ShaderMaterial2.1 vertexShader属性2.2 fragmentShader属性2.3 uniforms属性3. demo实现要点3.1 创建ShaderMaterial材质3.2 绘制台体和边框线3.3 render中更新uniforms变量4. demo代码1. 前言与demo效果上一篇文章学习了如何使用BufferGeometry 向缓存中传输几何体的顶点坐原创 2021-06-21 23:45:29 · 933 阅读 · 0 评论 -
三维空间中绘制点、线、面、UV贴图,万能的BufferGeometry(three.js实战4)
使用BufferGeometry1. 序言2. 如何使用BufferGeometry2.1 创建BufferGeometry对象2.2 向BufferGeometry对象添加属性2.3 创建Mesh3. BufferGeometry使用示例3.1 绘制点3.2 绘制线3.3 绘制面3.4 绘制自定义UV贴图4. 示例代码1. 序言three.js 中提供了一系列绘制几何体的类,如BoxGeometry、SphereGeometry,PlaneGeometry、CircleGeometry、Cylinde原创 2021-06-17 00:14:40 · 6528 阅读 · 9 评论 -
既有方向又会动的线,包你学会制作按箭头方向流动的线(three.js实战3)
制作按箭头方向流动的线1.demo效果2. 实现思路3. 实现要点3.1 创建箭头流动线3.2 创建流动线3.3 更新纹理偏移4. demo代码1.demo效果2. 实现思路实现思路比较简单,使用纹理材质创建网格对象,然后在render函数中改变纹理的偏移量(texture.offset.x),实现流动的效果3. 实现要点3.1 创建箭头流动线创建长条状平面使用THREE.PlaneGeometry类创建一个长条状平面,用来填充箭头纹理创建纹理材质使用TextureLoade原创 2021-06-13 17:15:19 · 5752 阅读 · 6 评论 -
半小时学会制作三维扩散光圈(three.js实战2)
圆柱上使用纹理贴图实现扩散光圈1.demo效果2. 实现思路3. 实现要点3.1 创建圆柱3.2 圆柱扩散动画4. demo代码1.demo效果2. 实现思路使用CylinderGeometry创建圆柱,圆柱的顶面和底面隐藏,侧面使用纹理贴图材质。在render函数中,使圆柱的半径不断变大,使圆柱的材质可见度不断降低,从而实现扩散的光圈效果3. 实现要点3.1 创建圆柱创建圆柱几何体使用THREE.CylinderGeometry类创建圆柱几何体创建圆柱材质这里分别创建圆柱的侧原创 2021-06-13 10:22:13 · 4882 阅读 · 12 评论 -
一篇文章教你在三维空间中创建流动线条(three.js实战1)
一文教你在三维视图中创建流动线条1.demo效果2. 流动线条实现思路3. 实现要点3.1 定义线条运动轨迹3.2 绘制流动线所需的其他参数3.3 初始化线条3.4 线条流动实现3.5 环形线条函数封装3.6 流动线条函数使用4. demo代码4.1 HTML文件4.2 JS文件1.demo效果2. 流动线条实现思路首先定义一条线段流动的的轨迹线,从这条线上均匀的取若干个点,从这些轨迹点中的某一点开始取若干个点,绘制线条,起始点后移,在取相同的点绘制线条,起始点不断后移,不会绘制线条,就得到流动原创 2021-06-13 10:11:58 · 5056 阅读 · 5 评论