ThreeJs基础代码段（五）飘扬的旗帜

先看效果：

想要做到旗帜飘扬的效果，仅仅依靠标准的几何体与材质是不够的，还需要对之加以“改装”。

通常制作一面国旗用简单的立方体贴上纹理，效果如下，比较生硬死板，整体感官一般。

那么如何制作一面飘扬的旗帜呢？

在threejs中可以通过更改材质的方式和编写着色器的方式来达到我们想要的效果。但是MeshStandardMaterial材质非常复杂，涉及较多的代码与计算，且性能开销比较大，所以编写自己的着色器无疑是最简单的方式。

首先需要创建一个特定的材质，这里我们选择ShaderMaterial，因为此材质可以将一些代码自动添加到着色器代码中，这里我们提供顶点着色器和片段着色器，并在uniforms中提供三个参数，频率、时间和纹理，频率控制方向的位移，时间控制旗帜的活跃程度：

const material = new THREE.ShaderMaterial({vertexShader: testVertexShader,fragmentShader: testFragmentShader,uniforms:{uFrequency: { value: new THREE.Vector2(10, 5) },uTime: { value: 0 },uColor: { value: new THREE.Color('orange') },uTexture: { value: flagTexture }}
})

顶点着色器代码：

uniform vec2 uFrequency;
uniform float uTime;varying vec2 vUv;
varying float vElevation;void main()
{vec4 modelPosition = modelMatrix * vec4(position, 1.0);float elevation = sin(modelPosition.x * uFrequency.x - uTime) * 0.1;elevation += sin(modelPosition.y * uFrequency.y - uTime) * 0.1;modelPosition.z += elevation;vec4 viewPosition = viewMatrix * modelPosition;vec4 projectedPosition = projectionMatrix * viewPosition;gl_Position = projectedPosition;vUv = uv;vElevation = elevation;
}

片段着色器代码：

uniform vec3 uColor;
uniform sampler2D uTexture;varying vec2 vUv;
varying float vElevation;void main()
{vec4 textureColor = texture2D(uTexture, vUv);textureColor.rgb *= vElevation * 2.0 + 0.65;gl_FragColor = textureColor;// gl_FragColor = vec4(vUv, 1.0, 1.0);
}

在旗帜飘扬的过程中，还增加了阴影，过程如下：

//在顶点着色器中，我们将风高程存储在一个变量中
void main()
{// ...float elevation = sin(modelPosition.x * uFrequency.x - uTime) * 0.1;elevation += sin(modelPosition.y * uFrequency.y - uTime) * 0.1;modelPosition.z += elevation;// ...
}
//变量将提升发送到片段
// ...
varying float vElevation;void main()
{// ...vElevation = elevation;
}
检索片段着色器中的变量
// ...
varying float vElevation;void main()
{vec4 textureColor = texture2D(uTexture, vUv);textureColor.rgb *= vElevation * 2.0 + 0.5;gl_FragColor = textureColor;
}

更新材质：

    const elapsedTime = clock.getElapsedTime()// Update materialmaterial.uniforms.uTime.value = elapsedTime

ThreeJs基础代码段（五）飘扬的旗帜相关推荐

ThreeJS基础代码段（四）运动残影
一.实际效果先看实际效果: 二.AfterimagePass.js 实现运动残影的方式有许多种,有博客中给出了processing的实现方式,代码很简单,效果也不错.这里分享之前实现此效果的另一种方 ...
C#基础代码笔记(五)
文章目录前言: 1.模拟静态全局变量代码: 2.主函数运行代码: 3.游戏头运行代码: 4.初始化游戏地图的关卡代码: 5.画简易地图运行代码: 6.地图中关卡对应标识符赋给地图的运行代码: 7.玩 ...
python必备基础代码-新手上路必学的Python函数基础知识，全在这里了（多段代码举例）...
原标题:新手上路必学的Python函数基础知识,全在这里了(多段代码举例) 导读:函数是Python中最重要.最基础的代码组织和代码复用方式.根据经验,如果你需要多次重复相同或类似的代码,就非常值得写 ...
IOS开发基础之使用XCode12快速生成代码段
IOS开发基础之使用XCode创建代码片段这里我们选择的是XCode版本是12.3 版本,高版本 XCode12.3 是2020年12月份发布的最新的版本务必学会使用快速生成代码,可以节约开发时间 ...
操作系统学习(五) 、代码段和数据段描述符
一.代码段和数据段描述符格式段描述符通用格式如下所示: 代码段和数据段描述符中各个位的含义如下所示: 二.代码段和数据段描述符类型当段描述符中S标志位(描述符类型)被置位,则该描述符用于代码段或数 ...
【基础知识】BSS段，数据段，代码段，堆栈段
在了解BSS段他们之前,我们先来看一下他们在内存中的位置 BSS段(bss segmen) BSS 是 Block Started by Symbol 的简称,通常是指用来存放程序中未初始化的全局变量 ...
Opencv 图像处理-Contours函数提取轮廓及感兴趣区域ROI的必用且实用操作技巧-(涵盖Contours的一切使用基础，附代码段)
需求目的:一般都是做项目时使用opencv的findcontours和drawcontours搭配使用抓取图像内感兴趣区域. 1.Contours函数轮廓点大小排序当使用findco ...
零基础代码学python-零基础学python之构建web应用（入门级）
构建一个web应用前面的学习回顾: IDLE是Python内置的IDE,用来试验和执行Python代码,可以是单语句代码段,也可以是文本编辑器中的多语句程序. 四个内置数据结构:列表.字典.集合和元 ...
黑马程序员C语言基础（第五天）运算符与表达式、程序流程结构、数组和字符串、函数
https://www.bilibili.com/video/BV15W411K7k6?p=93&spm_id_from=pageDriver 黑马程序员C语言基础(第五天)运算符与表达式.程 ...
收藏 | PyTorch常用代码段合集
点上方蓝字计算机视觉联盟获取更多干货在右上方 ··· 设为星标 ★,与你不见不散仅作学术分享,不代表本公众号立场,侵权联系删除转载于:作者丨Jack Stark@知乎来源丨https://zh ...

ThreeJs基础代码段（五）飘扬的旗帜

ThreeJs基础代码段（五）飘扬的旗帜相关推荐

最新文章

热门文章