three.js实现雷达扫描效果(纹理贴图)

three.js实现雷达扫描效果(纹理贴图)

图例

在这里插入图片描述

步骤

  1. 创建两个平面,分别纹理贴图,底图模型.add(光波模型)
  2. 关闭材质的深度测试
  3. 光波旋转

代码

<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;
init();
render();
function init() {// 场景scene = new THREE.Scene();// 相机camera = new THREE.PerspectiveCamera(45,canvasWidth / canvasHeight,1,10000);camera.position.set(300, 300, 300);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(50, 50);const texture = new THREE.TextureLoader().load("../src/assets/img/雷达扫描-底图.png");const m = new THREE.MeshBasicMaterial({map: texture,side: THREE.DoubleSide,color: 0x00ffff,transparent: true,opacity: 0.6,depthTest: false, //是否在渲染此材质时启用深度测试});const baseMesh = new THREE.Mesh(g, m);baseMesh.rotateX(-Math.PI / 2);scene.add(baseMesh);// 光const texture2 = new THREE.TextureLoader().load("../src/assets/img/雷达扫描-光波.png");const m2 = new THREE.MeshBasicMaterial({map: texture2,side: THREE.DoubleSide,color: 0x00ffff,transparent: true,opacity: 0.6,depthTest: false,});mesh = new THREE.Mesh(g, m2);// mesh.position.set(0, 10, 0);baseMesh.add(mesh);
}function render() {renderer.render(scene, camera);mesh.rotateZ(0.02);requestAnimationFrame(render);
}
onMounted(() => {canvesRef.value.appendChild(renderer.domElement);
});
</script><style lang="scss" scoped>
.app {position: relative;
}
</style>

图片(透明的)

在这里插入图片描述
在这里插入图片描述

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

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

相关文章

RT-Thread:SPI万能驱动 SFUD 驱动Flash W25Q64,通过 STM32CubeMX 配置 STM32 SPI 驱动

关键词&#xff1a;SFUD,FLASH,W25Q64&#xff0c;W25Q128&#xff0c;STM32F407 说明&#xff1a;RT-Thread 系统 使用 SPI万能驱动 SFUD 驱动 Flash W25Q64&#xff0c;通过 STM32CubeMX 配置 STM32 SPI 驱动。 提示&#xff1a;SFUD添加后的存储位置 1.打开RT-Thread Sett…

Python 日志模块 logging 的最佳实践,内容干练简洁

文章目录 1. 引言2. 定义日志类3. 引用日志4. 参考 1. 引言 每次写 python 代码&#xff0c;想找一个日志模块 logging 的最佳实践&#xff0c;都要找一大圈&#xff0c;确不一定可以找到合适的最佳实践。 痛定思痛&#xff0c;我决定下笔记录目前觉得合适的 python 日志的用…

206. 反转链表(Java)

题目描述&#xff1a; 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 输入&#xff1a; head [1,2,3,4,5] 输出&#xff1a; [5,4,3,2,1] 代码实现&#xff1a; 1.根据题意创建一个结点类&#xff1a; public class ListNode {int val…

【AI】CycleGan对抗生成网络遥感影像生成地图效果测试

今天看到一个有趣的项目&#xff0c;CycleGan对抗生成网络把马生成成斑马&#xff0c;还有一个测试用例是用遥感影像生成平面地图的效果&#xff0c;效果如下图所示&#xff0c;我大学是遥感专业&#xff0c;看到遥感影像就触动了我的原神&#xff0c;于是原神启动&#xff0c;…

centos下系统全局检测工具dstat使用

目录 一&#xff1a;没有需要安装 二&#xff1a;dstat命令参数 三、监测界面各参数含义&#xff08;部分&#xff09; 四、dstat的高级用法 一&#xff1a;没有需要安装 yum install dstat 二&#xff1a;dstat命令参数 有默认选项&#xff0c;执行dstat命令不加任何参数…

springCould中的Bus-从小白开始【11】

目录 &#x1f9c2;1.Bus是什么❤️❤️❤️ &#x1f32d;2.什么是总线❤️❤️❤️ &#x1f953;3.rabbitmq❤️❤️❤️ &#x1f95e;4.新建模块3366❤️❤️❤️ &#x1f373;5.设计思想 ❤️❤️❤️ &#x1f37f;6.添加消息总线的支持❤️❤️❤️ &#x1f9…

springboot医院信管系统源码和论文

随着信息技术和网络技术的飞速发展&#xff0c;人类已进入全新信息化时代&#xff0c;传统管理技术已无法高效&#xff0c;便捷地管理信息。为了迎合时代需求&#xff0c;优化管理效率&#xff0c;各种各样的管理系统应运而生&#xff0c;各行各业相继进入信息管理时代&#xf…

CentOS本地部署SQL Server数据库无公网ip环境实现远程访问

文章目录 前言1.安装GeoServer2. windows 安装 cpolar3. 创建公网访问地址4. 公网访问Geo Servcer服务5. 固定公网HTTP地址 前言 GeoServer是OGC Web服务器规范的J2EE实现&#xff0c;利用GeoServer可以方便地发布地图数据&#xff0c;允许用户对要素数据进行更新、删除、插入…

算法刷题常用方法

&#x1f4d1;前言 本文主要是【java】——算法刷题常用方法的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是听风与他&#x1f947; ☁️博客首页&#xff1a;CSDN主页听风与他 &#x1f304;每日一句&…

开发超爽的nodejs命令行程序

开发nodejs命令行程序以一般会到什么库&#xff1f; 首选commander提供一套标化化的命令行解析&#xff0c;非常好用。其次是prompts、inquirer,enquirer等库来提供交互输入提示&#xff0c;可以提供更加友好的用户体验还有一个是ansicolor、chalk来进行命令行输出的颜色控制&…

DNS解析原理和k8s DNS 实践

1. 问题背景 1.1 域名解析异常 近期开发的一个功能&#xff0c;需要在k8s集群容器环境中调用公司内部api&#xff0c;api提供了内网域名&#xff0c;解析内网域名异常导致请求超时&#xff0c;因此梳理了下DNS的知识点。 可以先看到下面&#x1f447;这段配置&#xff0c;修…

ubuntu20.04安装cuda11.4以及cudnn

系统&#xff1a;ubuntu20.04硬件配置&#xff1a;GPU3080、CPU未知通过《软件和更新》在附加驱动选项中添加了驱动&#xff1a; 1.检查自己电脑支持的cuda nvidia-smi4. 下载cuda11.4.2 wget https://developer.download.nvidia.com/compute/cuda/11.4.2/local_installers/c…