three.js实现信号波效果

three.js实现信号波效果

图例

在这里插入图片描述

步骤

  1. 创建平面,添加贴图,平移几何体
  2. 缩放

代码

<template><div class="app"><div ref="canvesRef" class="canvas-wrap"></div></div>
</template><script setup>
import { ref, onMounted } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";const canvesRef = ref(null);
const canvasWidth = window.innerWidth;
const canvasHeight = window.innerHeight;
let scene;
let camera;
let renderer;
let axesHelper;
let cameraControls;
let mesh;
var l = 60; //波动距离
var s = 1; // 缩放倍数
init();
render();
function init() {// 场景scene = new THREE.Scene();// 相机camera = new THREE.PerspectiveCamera(45,canvasWidth / canvasHeight,1,10000);camera.position.set(0, 0, 350);camera.lookAt(0, 0, 0);// 模型addModel();// 坐标辅助对象axesHelper = new THREE.AxesHelper(200);scene.add(axesHelper);// 渲染器//antialias - 是否执行抗锯齿。默认为false.renderer = new THREE.WebGLRenderer();renderer.setSize(canvasWidth, canvasHeight);// 相机轨道控制器cameraControls = new OrbitControls(camera, renderer.domElement);
}function addModel() {const g = new THREE.PlaneGeometry(2, 1);g.translate(-1, 0, 0);const m = new THREE.MeshBasicMaterial({color: 0x00ffff,map: new THREE.TextureLoader().load("../src/assets/img/信号波.png"),side: THREE.DoubleSide,transparent: true,});mesh = new THREE.Mesh(g, m);console.log(mesh);scene.add(mesh);
}function render() {renderer.render(scene, camera);s += 0.6;mesh.scale.set(s, s, s);if (s <= l * 0.2) {mesh.material.opacity = (s - 1) / (l * 0.2 - 1); //保证透明度在0~1之间变化} else if (s > l * 0.2 && s <= l) {mesh.material.opacity = 1 - (s - l * 0.2) / (l - l * 0.2); //保证透明度在0~1之间变化} else {s = 1.0;}requestAnimationFrame(render);
}
onMounted(() => {canvesRef.value.appendChild(renderer.domElement);
});
</script><style lang="scss" scoped>
.app {position: relative;
}
</style>

图片(透明的)

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Apache JMeter 5.5: 新手指南

如何获取并运行 JMeter 首先&#xff0c;要使用 JMeter&#xff0c;你需要从官网获取软件包。前往 Apache JMeter 的官方页面&#xff0c;然后下载所 需的压缩文件。 配置和启动 JMeter 获取了 JMeter 后&#xff0c;由于它是无需安装即可使用的工具&#xff0c;直接解压下载…

AirSim 的 ROS 功能包测试

参考链接&#xff1a; Ubuntu18.04搭建AirSimROS仿真环境_airsim ros-CSDN博客 ROS: AirSim ROS Wrapper - AirSim 1.编译 ros 包&#xff08;必须是 gcc-8&#xff09; 如果您的默认 GCC 不是 8 或更高&#xff08;使用 gcc --version 检查&#xff09;&#xff0c;那么编译…

vue element plus DatePicker 日期选择器

用于选择或输入日期 TIP 在 SSR 场景下&#xff0c;您需要将组件包裹在 <client-only></client-only> 之中 (如: Nuxt) 和 SSG (e.g: VitePress). 选择某一天# 以”日“为基本单位&#xff0c;基础的日期选择控件 基本单位由 type 属性指定。 通过 shortcuts 配…

软件测试|Python urllib3库使用指南

简介 当涉及到进行网络请求和处理HTTP相关任务时&#xff0c;Python的urllib3库是一个强大且灵活的选择。它提供了一种简单的方式来执行HTTP请求、处理响应和处理连接池&#xff0c;使得与Web服务进行交互变得更加容易。本文将详细介绍如何使用urllib3库进行网络请求。 安装u…

java.net.ConnectException: Connection refused: connect已解决

&#x1f95a;今日鸡汤&#x1f95a; 要有最朴素的生活和最遥远的梦想&#xff0c;即使明天天寒地冻&#xff0c;山高水远&#xff0c;路远马亡。 —— 《枫》 遇见问题莫着急&#xff0c;着急也没用~&#x1f636;‍&#x1f32b;️ 目录 &#x1f9c2;1.令人发麻的问题 &am…

python深度学习搭环境技巧

1、使用-t做不同项目的环境隔离 pip intall xxx -t /path/env1 公共环境放一个路径&#xff0c;其他放单独路径&#xff0c;可以完美隔离 训练时通过export PYTHONPATH/path/env1:$PYTHONPATH来调整 2、安装包&#xff0c;因为依赖导致失败 加上参数–no-deps, 不按照依赖 有…

vagrant 用户名密码登录

正常登录后 sudo -i 切换到root权限 vim /etc/ssh/vim sshd_config 将PasswordAuthentication no设置 为yes 重启sshd.service服务 systemctl restart sshd.service

软件测试|详解 Pytest 参数化:简化测试用例的编写

简介 Pytest 是一个广泛使用的 Python 测试框架&#xff0c;它提供了丰富的功能来编写和执行测试用例。其中一个强大的特性是参数化&#xff0c;它允许我们通过一种简洁的方式运行多个输入参数的相似测试用例&#xff0c;从而减少冗余的代码。本文将详细介绍 Pytest 的参数化功…

MT36291 2.5A 高效的1.2MHz电流模式升压转换器 DCDC管理芯片 航天民芯

描述 MT36291是一个恒定频率、6引脚SOT23电流模式升压转换器&#xff0c;旨在用于小型、低功耗的应用。MT36291的开关频率为1.2MHz&#xff0c;并允许使用2mm或更低高度的微小、低成本的电容器和电感器。内部软启动导致注入电流小&#xff0c;延长电池寿命。MT36291的特点是在光…

二线厂商-线上测评-大数据开发

曾经投递过一些中级岗位&#xff0c;在面试之前&#xff0c;会通过邮件的方式把性格测试的题目发给你让你做一下。 一般分为单选题&#xff0c;多选题&#xff0c;性格测试题&#xff0c;认知理解题等等。 大概做了一个小时吧。 单选题&#xff1a; 感觉就是类似于以前高中时候…

golang实现加密解密文档

golang实现加密解密文档 package mainimport ("bytes""crypto/aes""crypto/cipher""crypto/rand""encoding/base64""flag""fmt""io""io/ioutil" )func main() {encodePtr : flag.…

中小企业实施了MES系统后,同样具备大企业的生产能力

工业4.0、智能制造是当前制造业最热门的话题。数字化工厂是实现智能制造的基础&#xff0c;在建设数字化工厂的过程中&#xff0c;MES系统是核心也是最重要的一环。万界星空MES系统是企业信息数据集成的纽带&#xff0c;可帮助企业实现监控与实际生产过程的同步化&#xff0c;全…

2024--Django平台开发-Django知识点(三)

day03 django知识点 项目相关路由相关 urls.py视图相关 views.py模版相关 templates资源相关 static/media 1.项目相关 新项目 开发时&#xff0c;可能遇到使用其他的版本。虚拟环境 老项目 打开项目虚拟环境 1.1 关于新项目 1.系统解释器命令行【学习】 C:/python38- p…

BUUCTF ---> Encrypto

转眼就一月十号了&#xff0c;本来今天不想更的&#xff0c;&#xff08;因为我懒&#xff09;是因为明天要考python&#xff0c;好像还不止 但是呢&#xff0c;发现BUUCTF的密码学模块刚好可以用到py的脚本&#xff0c;那就当时复习一下吧&#xff01;&#xff01; 这里就要介…

【Oracle】查看表空间使用率sql

10G进asm 直接su - oracle 然后asmcmd 11G进asm,需要su - grid 然后asmcmd 1.切换到相关oracle数据库实例下: echo $ORACLE_SID 查看当前数据库实例 或者进入sql下执行 select instance_name from V$instance; export ORACLE_SID=sohdb1 切换到sohdb1数据库实例下…

您的计算机已被.LIVE勒索病毒感染?恢复您的数据的方法在这里!

引言&#xff1a; 在数字时代&#xff0c;.LIVE勒索病毒如暗夜中的黑暗调&#xff0c;威胁着个人和企业的数字安全。本文将深入介绍.LIVE勒索病毒的特征&#xff0c;提供解密数据的方法&#xff0c;并讨论预防措施&#xff0c;让我们共同筑起数字世界的防护之墙。数据的重要性…

系列三十六、注解版Spring、SpringMVC配置文件

一、注解版Spring、SpringMVC配置文件 1.1、pom <dependencies><!-- SpringMVC --><dependency><groupId>org.springframework</groupId><artifactId>spring-webmvc</artifactId><version>5.1.5.RELEASE</version><…

C++学习笔记——返回对象

一、返回对象 当我们说一个函数返回对象时&#xff0c;意味着该函数的返回值是一个对象。这种情况下&#xff0c;函数可以通过创建对象的副本、返回对象的引用或者返回对象的指针来实现。 返回对象的副本&#xff1a; 当一个函数返回对象的副本时&#xff0c;函数内部会创建一…

Mac上修复Gitee报错 Oauth: Access token is expired

一. 背景&#xff1a; 最近在gitee上拉了两次项目&#xff0c;两次使用的邮箱密码不一致&#xff08;换绑邮箱&#xff09;&#xff0c;第一次在idea中拉取后端项目&#xff0c;第二次在webstorm中拉取前端项目&#xff0c;出现该异常&#xff0c;记录下解决方案 二. 错误回显…

简易机器学习笔记(九)LeNet实例 - 在眼疾识别数据集iChallenge-PM上的应用

前言 上一节大概讲了一下LeNet的内容&#xff0c;这一章就直接来用&#xff0c;实际上用一下LeNet来进行训练和分类试试。 调用的数据集&#xff1a; https://aistudio.baidu.com/datasetdetail/19065 说明&#xff1a; 如今近视已经成为困扰人们健康的一项全球性负担&…