threejs 光带扩散动画

news2024/11/15 11:53:59

目录

一、创建光带

(1) 设置光带顶点

(2)  设置光带顶点透明度属性

二、光带动画

完整代码

html文件代码

 js文件代码

最后展示一下项目里的效果：

最近项目中要求做一段光带效果动画，尝试着写了一下，下面是本次分享光带扩散动画的效果预览：

20240110_204035

一、创建光带

(1) 设置光带顶点

这里使用缓冲区几何体bufferGeometry，通过设置顶点属性position来构成光带模型，在创建顶点之前需要一下几个必备参数：

r光带初始时的半径
h光带的高度
radian弧度值
segment间隔段数，光带由N段矩形构成(矩形由2个三角形构建)，此属性决定矩形数量，值越大光带越接近圆形
interval每段间隔的弧度值
// 创建缓冲区几何体
const geometry = new THREE.BufferGeometry();
// 光带初始半径
const r = 10;
// 光带高度
const h = 10;
// 弧度
let radian = 0;
// 间隔段数,此值越高光带棱角越分明
const segment = 50;
// 弧度间隔
const interval = (Math.PI * 2) / segment;

接下来就是创建光带的顶点位置数组了，光带由N个矩形组成，一个矩形又由两个三角形构成；

for循环遍历间隔段数segment，每3个值代表一个顶点位置，3个顶点位置又组成一个三角形；

x轴上的位置使用Math.cos函数得出，z轴上的位置使用Math.sin函数得出，y轴则看三角形的三个点创建顺序来得出。此处我创建点位时，三角形底下的点为点2，所以点2的y值设置为0

第一个三角形点位顺序(第二个三角形类推，这里不展示了)：

最后通过bufferAttribute属性设置几何体顶点位置，注意顶点位置数组需要转换成32位浮点类型的数组

// 顶点位置数组
const vertexPosArr = [];
// 遍历出光带的顶点数据
for (let i = 0; i < segment; i++) {
    // 弧度逐渐增加，从0度增加到360度
    radian += interval;
    // 计算出两个三角形的顶点位置，形成一个矩形平面，最后多个矩形平面组成圆形的光带
    vertexPosArr.push(
        // 第一个三角形
        Math.cos(radian) * r, h, Math.sin(radian) * r, // 点1
        Math.cos(radian) * r, 0, Math.sin(radian) * r, // 点2
        Math.cos(radian + interval) * r, 0, Math.sin(radian + interval) * r,  // 点3
        // 第二个三角形
        Math.cos(radian) * r, h, Math.sin(radian) * r, // 点1
        Math.cos(radian + interval) * r, 0, Math.sin(radian + interval) * r,  // 点2
        Math.cos(radian + interval) * r, h, Math.sin(radian + interval) * r,  // 点3
    )
}

// 设置几何体缓冲区position属性
geometry.attributes.position = new THREE.BufferAttribute(new Float32Array(vertexPosArr), 3);

(2)  设置光带顶点透明度属性

光带是渐变透明的，由黑到白(效果中蓝色是因为材质设置了蓝色将白色替换了)；

通过获取顶点的getY函数获取当前顶点的y值(也就是顶点的高度)，(1-顶点高度) / 光带高度使光带从下往上逐渐透明，也可以换成顶点高度 / 光带高度使光带从上往下逐渐透明

// 设置几何体缓冲区position属性
geometry.attributes.position = new THREE.BufferAttribute(new Float32Array(vertexPosArr), 3);
// 获取顶点
const position = geometry.attributes.position;
// 顶点总数量
const count = position.count;
// 透明度数组，每个顶点位置将会对应一个透明度
const alphaArr = [];
// 根据高度设置顶点透明度
for (let i = 0; i < count; i++) {
    alphaArr.push((1 - position.getY(i) / h));
}
// 设置几何体缓冲区alpha属性
geometry.attributes.alpha = new THREE.BufferAttribute(new Float32Array(alphaArr), 1);

(3)  创建光带材质

这里使用的普通网格材质，这里必须设置side属性为THREE.DoubleSide双面可见、材质透明度transparent属性开启

至于材质使用onBeforeCompile函数替换着色器shader代码一块这里不做说明了，因为这一块东西很多，一时也说不清楚。

// 创建光带的材质
const material = new THREE.MeshBasicMaterial({
    color: '#00ffff',
    side: THREE.DoubleSide,
    transparent: true,
    depthTest: false,
})
// 材质渲染前所执行，替换shader着色器代码
material.onBeforeCompile = (shader) => {
    shader.vertexShader = shader.vertexShader.replace(
        'void main() {',
        `
            // 引进透明度分量
            attribute float alpha; 
            // varying声明一个属性，赋值透明度分量alpha，让片元着色器能拿到这个属性
            varying float vAlpha;
            void main() {
                vAlpha = alpha;
          `,
    )
    shader.fragmentShader = shader.fragmentShader.replace(
        'void main() {',
        `
            // 引进从顶点着色器传递的透明度分量
            varying float vAlpha;
            void main() {
          `,
    )
    shader.fragmentShader = shader.fragmentShader.replace(
        '#include <output_fragment>',
        `
            #include <output_fragment>
            // 设置颜色和透明度值，让光带有一个渐变效果
            gl_FragColor = vec4( outgoingLight, vAlpha  );
        `,
    )
}
const lightBand = new THREE.Mesh(geometry, material);
scene.add(lightBand);

二、光带动画

这里的光带动画是写在循环执行函数内的，有过threejs基础一定不陌生；

这里每次使用clone属性克隆光带模型获取scale的x值(换成z值也一样，y值不可以)，通过if判断光带当前缩放大小来决定相应操作；

这里光带将从1倍扩散到9倍，7倍到9倍的时候会逐渐减小光带高度，这有就又了光带扩散动画末尾的逐渐消失效果，最后超过9倍重置缩放倍数为1，形成循环；

// 渲染循环
function render () {
    // 光带当前缩放倍数
    let scale = lightBand.clone().scale.x;
    // 小于7时scale不断增加
    if (scale < 7) {
        scale += 0.02;
        // 重新设置光带缩放倍数
        lightBand.scale.set(scale, 1, scale);
    } 
    // 小于8时scale不断增加，但是光带高度逐渐减小
    else if (scale < 9) {
        scale += 0.02;
        lightBand.scale.set(scale, (9 - scale) / 2, scale);
    } 
    // 大于9时光带缩放倍数重置为1
    else {
        scale = 0;
        lightBand.scale.set(scale, scale, scale);
    }
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}
render();

完整代码

这里使用的html+js构建的小案例，threejs使用的148的版本

html文件代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        overflow: hidden;
        margin: 0;
    }
</style>

<body>
    <div id="webgl"></div>
    <script type="importmap">
        {
            "imports":{
                "three":"../../build/three.module.js",
                "three/addons/": "../../examples/jsm/"
            }
        }
    </script>
    <script src="./index.js" type="module"></script>
</body>

</html>

 js文件代码

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const width = window.innerWidth;
const height = window.innerHeight;

// 创建场景
const scene = new THREE.Scene();

// 设置光源
const pointLight = new THREE.PointLight('#ffffff', 1, 0);
pointLight.position.set(200, 0, 200);
scene.add(pointLight);
const ambientLight = new THREE.AmbientLight(0xffffff, 0.2);
scene.add(ambientLight);

// 创建透视相机
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
camera.position.set(0, 0, 100);
camera.lookAt(0, 0, 0);

// 创建渲染器
const renderer = new THREE.WebGLRenderer({
    antialias: true,
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);

const planeGeometry = new THREE.PlaneGeometry(200, 200);
const planeMaterial = new THREE.MeshBasicMaterial({ color: '#696969' });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotateX(-Math.PI / 2);
scene.add(plane);

// 创建缓冲区几何体
const geometry = new THREE.BufferGeometry();
// 光带初始半径
const r = 10;
// 光带高度
const h = 10;
// 弧度
let radian = 0;
// 间隔段数,此值越高光带棱角越分明
const segment = 50;
// 弧度间隔
const interval = (Math.PI * 2) / segment;
// 顶点位置数组
const vertexPosArr = [];
// 遍历出光带的顶点数据
for (let i = 0; i < segment; i++) {
    // 弧度逐渐增加，从0度增加到360度
    radian += interval;
    // 计算出两个三角形的顶点位置，形成一个矩形平面，最后多个矩形平面组成圆形的光带
    vertexPosArr.push(
        // 第一个三角形
        Math.cos(radian) * r, h, Math.sin(radian) * r, // 点1
        Math.cos(radian) * r, 0, Math.sin(radian) * r, // 点2
        Math.cos(radian + interval) * r, 0, Math.sin(radian + interval) * r,  // 点3
        // 第二个三角形
        Math.cos(radian) * r, h, Math.sin(radian) * r, // 点1
        Math.cos(radian + interval) * r, 0, Math.sin(radian + interval) * r,  // 点2
        Math.cos(radian + interval) * r, h, Math.sin(radian + interval) * r,  // 点3
    )
}

// 设置几何体缓冲区position属性
geometry.attributes.position = new THREE.BufferAttribute(new Float32Array(vertexPosArr), 3);
// 获取顶点数
const position = geometry.attributes.position;
// 顶点总数量
const count = position.count;
// 透明度数组，每个顶点位置将会对应一个透明度
const alphaArr = [];
// 根据高度设置顶点透明度
for (let i = 0; i < count; i++) {
    const temp = 1 - position.getY(i) / h;
    alphaArr.push(temp);
    console.log(temp, position.getY(i))
}
// 设置几何体缓冲区alpha属性
geometry.attributes.alpha = new THREE.BufferAttribute(new Float32Array(alphaArr), 1);
// 创建光带的材质
const material = new THREE.MeshBasicMaterial({
    color: '#00ffff',
    side: THREE.DoubleSide,
    transparent: true,
    depthTest: false,
})
// 材质渲染前所执行，替换shader着色器代码
material.onBeforeCompile = (shader) => {
    shader.vertexShader = shader.vertexShader.replace(
        'void main() {',
        `
            // 引进透明度分量
            attribute float alpha; 
            // varying声明一个属性，赋值透明度分量alpha，让片元着色器能拿到这个属性
            varying float vAlpha;
            void main() {
                vAlpha = alpha;
          `,
    )
    shader.fragmentShader = shader.fragmentShader.replace(
        'void main() {',
        `
            // 引进从顶点着色器传递的透明度分量
            varying float vAlpha;
            void main() {
          `,
    )
    shader.fragmentShader = shader.fragmentShader.replace(
        '#include <output_fragment>',
        `
            #include <output_fragment>
            // 设置颜色和透明度值，让光带有一个渐变效果
            gl_FragColor = vec4( outgoingLight, vAlpha  );
        `,
    )
}
const lightBand = new THREE.Mesh(geometry, material);
scene.add(lightBand);

// 渲染循环
function render () {
    // 光带当前缩放倍数
    let scale = lightBand.clone().scale.x;
    // 小于7时scale不断增加
    if (scale < 7) {
        scale += 0.02;
        // 重新设置光带缩放倍数
        lightBand.scale.set(scale, 1, scale);
    }
    // 小于8时scale不断增加，但是光带高度逐渐减小
    else if (scale < 9) {
        scale += 0.02;
        lightBand.scale.set(scale, (9 - scale) / 2, scale);
    }
    // 大于9时光带缩放倍数重置为1
    else {
        scale = 0;
        lightBand.scale.set(scale, scale, scale);
    }
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}
render();

// 创建相机轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', () => {
    renderer.render(scene, camera);
})

// 设置界面跟随窗口自适应
window.onresize = function () {
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
}

最后展示一下项目里的效果：

案例中如有不足的请补充，不懂的也可以问我，我知道的会尽力解答

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1372757.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

地铁判官（外包）

地铁判官（外包）

到处都是说外包不好不好的&#xff0c;从没有想过自身问题。 例如&#xff1a; 技术人员动不动就是说&#xff0c;进了外包三天&#xff0c;一年&#xff0c;三年之后技术退步很多。就算你这样的人进了甲方&#xff0c;也是个渣渣。(声明一下&#xff0c;我也是外包&#xff0…
阅读更多...
CMU15-445-Spring-2023-Project #2 - 前置知识（lec07-010）

CMU15-445-Spring-2023-Project #2 - 前置知识（lec07-010）

Lecture #07_ Hash Tables Data Structures Hash Table 哈希表将键映射到值。它提供平均 O (1) 的操作复杂度&#xff08;最坏情况下为 O (n)&#xff09;和 O (n) 的存储复杂度。 由两部分组成&#xff1a; Hash Function和Hashing Scheme&#xff08;发生冲突后的处理&…
阅读更多...
阿里云99元一年2核2G3M云服务器值得买吗？

阿里云99元一年2核2G3M云服务器值得买吗？

阿里云作为国内领先的云服务提供商&#xff0c;一直致力于为用户提供优质、高效的服务。目前&#xff0c;阿里云推出的99元一年2核2G3M云服务器&#xff0c;更是引发了广大用户的关注。本文将详细解析这款云服务器的特点、优势以及适用场景&#xff0c;为大家上云提供参考。 一…
阅读更多...
Android逆向学习（六）绕过app签名校验，通过frida，io重定向（上）

Android逆向学习（六）绕过app签名校验，通过frida，io重定向（上）

Android逆向学习&#xff08;六&#xff09;绕过app签名校验&#xff0c;通过frida&#xff0c;io重定向&#xff08;上&#xff09; 一、写在前面 这是吾爱破解正己大大教程的第五个作业&#xff0c;然后我的系统还是ubuntu&#xff0c;建议先看一下上一个博客&#xff0c;关…
阅读更多...
阿赵UE学习笔记——8、贴图导入设置

阿赵UE学习笔记——8、贴图导入设置

阿赵UE学习笔记目录 大家好&#xff0c;我是阿赵。   继续学习虚幻引擎的用法&#xff0c;这次来说一下贴图的导入设置。   在内容浏览器里面可以看到纹理类型的资源&#xff0c;就是贴图了&#xff0c;鼠标悬浮在上面可以看到这个纹理贴图的信息&#xff1a; 双击纹理贴图…
阅读更多...
使用Scikit Learn 进行识别手写数字

使用Scikit Learn 进行识别手写数字

使用Scikit Learn 进行识别手写数字 作者&#xff1a;i阿极 作者简介&#xff1a;数据分析领域优质创作者、多项比赛获奖者&#xff1a;博主个人首页 &#x1f60a;&#x1f60a;&#x1f60a;如果觉得文章不错或能帮助到你学习&#xff0c;可以点赞&#x1f44d;收藏&#x1f…
阅读更多...
虽迟但到！MySQL 可以用 JavaScript 写存储过程了!

虽迟但到！MySQL 可以用 JavaScript 写存储过程了!

任何能用 JavaScript 来干的事情&#xff0c;最终都会用 JavaScript 来干 背景 不久前&#xff0c;Oracle 在 MySQL 官方博客官宣了在 MySQL 中支持用 JavaScript 来写存储过程。 最流行的编程语言 最流行的数据库。程序员不做选择&#xff0c;当然是全都要。 使用方法 用 J…
阅读更多...
压测必经之路，Jmeter分布式压测教程

压测必经之路，Jmeter分布式压测教程

01、分布式压测原理 Jemter分布式压测是选择其中一台作为调度机&#xff08;master&#xff09;&#xff0c;其他机器作为执行机&#xff08;slave&#xff09;&#xff1b;当然一台机器也可以既做调度机&#xff0c;也做执行机。 调度机执行脚本的时候&#xff0c;master将会…
阅读更多...
软件测试工具Robot Framework如何安装

软件测试工具Robot Framework如何安装

安装文件准备 表1 安装文件准备 Robot框架结构 为了更好的了解环境安装&#xff0c;我们先看下框架结构&#xff1a; 图1 Robot Framework Architecture Robot Framework 通过导入不同的库&#xff0c;就可以使用库中所提供的关键字&#xff0c;从而时行相关的测试。有几个标…
阅读更多...
掌握Java Future模式及其灵活应用

掌握Java Future模式及其灵活应用

第1章&#xff1a;引言 大家好&#xff0c;我是小黑&#xff0c;今天咱们来聊聊Future。咱们程序员在日常工作中&#xff0c;肯定都遇到过需要处理耗时任务的情况&#xff0c;特别是在Java领域。比如说&#xff0c;小黑要从网络上下载数据&#xff0c;或者要执行一个计算密集型…
阅读更多...
MySql -数据库基本概念

MySql -数据库基本概念

一、数据库的基本概念 1.为什么要学数据库&#xff1f; 之前我们如果想将一些数据实现永久化存储&#xff0c;可以怎么做呢&#xff1f;没错。使用IO流的技术将数据保存到本地文件中但是接下来我有这样一个需求&#xff1a;将下面的user.txt文件中的王五年龄修改为35 张三 2…
阅读更多...
Java顺序表（1）

Java顺序表（1）

&#x1f435;本篇文章将对顺序表中的方法进行模拟实现 一、线性表 线性表是指在逻辑结构上呈连续的线性结构&#xff0c;而在物理结构上不一定是连续的结构&#xff0c;常见的线性表有&#xff1a;顺序表、链表、栈、队列等 二、顺序表 顺序表一般采用数组来存储数据&#x…
阅读更多...
C++——map和set的基本使用

C++——map和set的基本使用

目录 一&#xff0c;关联式容器 二&#xff0c;键值对 三&#xff0c;set的使用 3.1 set介绍 3.2 set的插入和删除 3.3 set的pair 3.4 multiset 四&#xff0c;map的使用 4.1 map介绍 4.2 map实现简易字典 4.3 map实现统计次数 4.4 map的[] 五&#xff0c;使用map或…
阅读更多...
CHS_01.2.1.1+2.1.3+进程的概念、组成、特征

CHS_01.2.1.1+2.1.3+进程的概念、组成、特征

CHS_01.2.1.12.1.3进程的概念、组成、特征 进程进程的概念 进程的组成——PCB进程的组成——PCB进程的组成——程序段、数据段知识滚雪球&#xff1a;程序是如何运行的&#xff1f;进程的组成进程的特征 知识回顾与重要考点 从这个小节开始 我们会正式进入第二章处理机管理相关…
阅读更多...
暴雨信息发布算力网络应用平台打造零感知算网服务新模式

暴雨信息发布算力网络应用平台打造零感知算网服务新模式

为进一步优化算力网络应用服务能力和降低算力网络使用难度&#xff0c;暴雨信息突破基于算力网络的实例跨域协同与迁移、基于测试评估的应用度量和解构等技术&#xff0c;研发并推出算力网络应用平台。该系统通过提供一种即开即用、按需付费的零感知算网应用服务&#xff0c;使…
阅读更多...
捕捉小红书开年顶流，品牌快“跟风”上车！

捕捉小红书开年顶流，品牌快“跟风”上车！

2024年开年&#xff0c;“南方小土豆”纷纷北上&#xff0c;元旦期间哈尔滨收入近60亿元&#xff0c;“冰雪”一跃成为今冬最炙手可热的流行趋势&#xff01; 千瓜数据显示&#xff0c;小红书“冰雪”相关商业笔记同比去年增长649.84%。本期&#xff0c;千瓜将从“冰雪”场景出…
阅读更多...
离散数学-二元关系

离散数学-二元关系

4.1关系的概念 1)序偶及n元有序组 由两个个体x和y&#xff0c;按照一定顺序排序成的、有序数组称为有序偶或有序对、二元有序组&#xff0c; 记作<x&#xff0c;y>&#xff0c;其中x是第一分量&#xff0c;y是第二分量。 相等有序偶&#xff1a;第一分量和第二分量分…
阅读更多...
Excel·VBA按指定顺序排序函数

Excel·VBA按指定顺序排序函数

与之前写过的《ExcelVBA数组冒泡排序函数》不同&#xff0c;不是按照数值大小的升序/降序对数组进行排序&#xff0c;而是按照指定数组的顺序&#xff0c;对另一个数组进行排序 以下代码调用了《ExcelVBA数组冒泡排序函数》bubble_sort_arr函数&#xff08;如需使用代码需复制…
阅读更多...
EasyPOI导出报表

EasyPOI导出报表

报表导出是一种很常见的功能&#xff0c;只要是开发都会涉及到这一功能&#xff0c;早些年经常集成poi完成导出功能&#xff0c;我之前也有写过关于poi导出的文章&#xff0c;现如今&#xff0c;也有了更为方便的导出插件 — EasyPOI&#xff0c;废话不多说&#xff0c;开始撸代…
阅读更多...
内网渗透实战攻略

内网渗透实战攻略

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 &#x1f4ab;个人格言:"没有罗马,那就自己创造罗马~" 目录 介绍 什么是内网&#xff1f; 什么是内网渗透&#xff1f; 内网渗透的目的&#xff1a; 内网…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023