three.js绘制网波浪

无图不欢，先上图
在这里插入图片描述
使用方法（以vue3为例）

<template><div class="net" ref="net"></div>
</template><script setup>
import { ref, onMounted } from 'vue'
import NetAnimation from '@/utils/netAnimation.js'let net = ref(null)
onMounted(() => {new NetAnimation({dom: net.value,pointLightsAttr: [{}],axesHelperAttr: {show: true,length: 100},controlAttr: {show: true}})
})</script><style scoped lang="scss">
.net{width: 100%;height: 100%;background-color: #02112e;
}
</style>

netAnimation.js源码

import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";class NetAnimation {constructor(opt) {this.dom = opt.domthis.w = nullthis.h = nullthis.netMaxY = opt.netMaxYthis.scene = nullthis.renderer = nullthis.camera = nullthis.cameraAttr = opt.cameraAttrthis.ambientLight = nullthis.ambientLightAttr = opt.ambientLightAttrthis.pointLights = []this.pointLightsAttr = opt.pointLightsAttrthis.axesHelper = nullthis.axesHelperAttr = opt.axesHelperAttrthis.control = nullthis.controlAttr = opt.controlAttrthis.plane = nullthis.planeAttr = opt.planeAttrthis.animationIndex = 0this.requestAnimationFrame = nullthis.init()}init = () => {if(!this.dom){return}this.w = this.dom.clientWidth * (window.devicePixelRatio || 1)this.h = this.dom.clientHeight * (window.devicePixelRatio || 1)// 创建场景this.scene = this.createScene()// 创建renderthis.renderer = this.createWebGLRenderer({dom: this.dom});// 创建相机const cameraAttr = {style: {fov: 45,aspect: this.w / this.h,near: 0.01,far: 10000},position: {x: this.w / 2,y: this.w / 2,z: this.h * 2}}if(this.cameraAttr){this.cameraAttr = Object.assign(cameraAttr, this.cameraAttr)}else{this.cameraAttr = cameraAttr}this.camera = this.createPerspectiveCamera(this.cameraAttr.style)this.camera.position.set(this.cameraAttr.position.x, this.cameraAttr.position.y, this.cameraAttr.position.z);this.camera.lookAt(this.scene.position);// 创建环境光const ambientLightAttr = {show: true,style: {color: "#fff",intensity: 0.1}}if(this.ambientLightAttr){this.ambientLightAttr = Object.assign(ambientLightAttr, this.ambientLightAttr)}else{this.ambientLightAttr = ambientLightAttr}if(this.ambientLightAttr.show){this.ambientLight = this.createAmbientLight(this.ambientLightAttr.style);this.scene.add(this.ambientLight);}// 创建点光源if(!this.netMaxY){this.netMaxY = 60}const pointLightAttr =  {style: {color: '#fff',intensity: 1,distance: this.w},position: {x: 0,y: this.netMaxY * 2,z: 0}}if(this.pointLightsAttr?.length){this.pointLightsAttr.forEach(pointLightItem => {pointLightItem = Object.assign(pointLightAttr, pointLightItem)const pointLight = this.createPointLight(pointLightItem.style);pointLight.position.set(pointLightItem.position.x, pointLightItem.position.y, pointLightItem.position.z);this.pointLights.push(pointLight)})this.scene.add(...this.pointLights);}// 创建辅助线const axesHelperAttr = {show: false,length: 100}if(this.axesHelperAttr){this.axesHelperAttr = Object.assign(axesHelperAttr, this.axesHelperAttr)}else{this.axesHelperAttr = axesHelperAttr}if(this.axesHelperAttr.show){this.axesHelper = this.createAxesHelper(this.axesHelperAttr.length)this.scene.add(this.axesHelper);}// 创建轨道控制const controlAttr = {show: false}if(this.controlAttr){this.controlAttr = Object.assign(controlAttr, this.controlAttr)}else{this.controlAttr = controlAttr}if(this.controlAttr.show){this.createControl(this.camera, this.dom);}let planeAttr = {width: this.w,height: this.h,widthSegments: Math.floor(this.w / 20),heightSegments: Math.floor(this.h / 60)}if(this.planeAttr){this.planeAttr = Object.assign(planeAttr, this.planeAttr)}else{this.planeAttr = planeAttr}const geometry = this.createPlaneGeometry(this.planeAttr)const material = this.createMeshPlaneMaterial({color: "#ffffff",wireframe: true,});this.plane = this.createMesh({geometry, materialBasic: material});this.plane.rotation.x = Math.PI * -0.5;// this.plane.rotation.z = 45 * (Math.PI / 180);// this.plane.position.z = 100;this.scene.add( this.plane )// 渲染this.render()}render = () => {//循环调用this.requestAnimationFrame = requestAnimationFrame(this.render);this.animation()this.renderer.render(this.scene, this.camera);}unmount = () => {cancelAnimationFrame(this.requestAnimationFrame)}animation = () => {let animationSpeed = 10let sinXNum = this.planeAttr.widthSegmentslet sinYNum = this.planeAttr.heightSegmentsconst geometry = this.plane.geometryconst att_p = geometry.getAttribute('position');let i = 0;let xi = 0let yi = 0while(i < att_p.count){let x = att_p.getX(i)let y = att_p.getY(i)xi = Math.floor(i / sinXNum)yi = i - xi * sinXNumlet z = (Math.sin(((xi + this.animationIndex / animationSpeed) % sinXNum / sinXNum * Math.PI * 2)) + Math.sin(((yi + xi + this.animationIndex / animationSpeed) % sinYNum / sinYNum * Math.PI * 2))) * (this.netMaxY / 2)att_p.setXYZ( i, x, y, z );i += 1;}att_p.needsUpdate = true;geometry.computeVertexNormals();this.animationIndex++this.animationIndex %= sinXNum * sinYNum * animationSpeed}// 以下皆为实体创建方法createScene = () => {return new THREE.Scene();}createPerspectiveCamera = ({ fov, aspect, near, far }) => {// fov — 摄像机视锥体垂直视野角度// aspect — 摄像机视锥体长宽比// near — 摄像机视锥体近端面// far — 摄像机视锥体远端面return new THREE.PerspectiveCamera(fov, aspect, near, far);}createWebGLRenderer = ({ dom, width, height }) => {// renderDom — dom// width — 渲染宽度 一般取domclientWidth// height — 渲染高度 一般取clientHeightif (width === undefined) {width = dom.clientWidth;}if (height === undefined) {height = dom.clientHeight;}const renderer = new THREE.WebGLRenderer();renderer.setPixelRatio(window.devicePixelRatio || 1);renderer.setClearColor('#fff', 0); //设置背景颜色和透明度renderer.setSize(width, height);dom.appendChild(renderer.domElement);return renderer;}createAmbientLight = ({ color, intensity }) => {// color - (可选参数)) 十六进制光照颜色。 缺省值 0xffffff (白色)。// intensity - (可选参数) 光照强度。 缺省值 1。return new THREE.AmbientLight(color, intensity);}createPointLight = ({ color, intensity, distance, decay }) => {// color - (可选参数)) 十六进制光照颜色。 缺省值 0xffffff (白色)。// intensity - (可选参数) 光照强度。 缺省值 1。// distance - 这个距离表示从光源到光照强度为0的位置。 当设置为0时，光永远不会消失(距离无穷大)。缺省值 0.// decay - 沿着光照距离的衰退量。缺省值 2。return new THREE.PointLight(color, intensity, distance, decay);}createPlaneGeometry = ({width, height, widthSegments, heightSegments}) => {return new THREE.PlaneGeometry(width, height, widthSegments, heightSegments);}createMeshPlaneMaterial = (data) => {return new THREE.MeshLambertMaterial(data);}createMesh = ({geometry, materialBasic}) => {return new THREE.Mesh(geometry, materialBasic);}createAxesHelper = (length) => {return new THREE.AxesHelper(length)}createControl = (camera, dom) => {return new OrbitControls(camera, dom);};
}export default NetAnimation

如果电脑性能不错，可以考虑使用以下netAnimation2.js源码

import * as THREE from "three";
import { MeshLine, MeshLineMaterial } from "three.meshline";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";class NetAnimation {constructor(opt) {this.dom = opt.domthis.w = nullthis.h = nullthis.netMaxY = opt.netMaxYthis.scene = nullthis.renderer = nullthis.camera = nullthis.cameraAttr = opt.cameraAttrthis.ambientLight = nullthis.ambientLightAttr = opt.ambientLightAttrthis.pointLights = []this.pointLightsAttr = opt.pointLightsAttrthis.axesHelper = nullthis.axesHelperAttr = opt.axesHelperAttrthis.control = nullthis.controlAttr = opt.controlAttrthis.points = []this.lines = []this.isSameNormalStyle = opt.isSameNormalStylethis.pointAttr = opt.pointAttrthis.lineAttr = opt.lineAttrthis.pointsAttr = []this.linesArrt = []this.animationIndex = 0this.requestAnimationFrame = nullthis.init()}init = () => {if(!this.dom){return}this.w = this.dom.clientWidth * (window.devicePixelRatio || 1)this.h = this.dom.clientHeight * (window.devicePixelRatio || 1)// 创建场景this.scene = this.createScene()// 创建renderthis.renderer = this.createWebGLRenderer({dom: this.dom});// 创建相机const cameraAttr = {style: {fov: 45,aspect: this.w / this.h,near: 0.01,far: 10000},position: {x: this.w / 2,y: this.w / 2,z: this.h * 2}}if(this.cameraAttr){this.cameraAttr = Object.assign(cameraAttr, this.cameraAttr)}else{this.cameraAttr = cameraAttr}this.camera = this.createPerspectiveCamera(this.cameraAttr.style)this.camera.position.set(this.cameraAttr.position.x, this.cameraAttr.position.y, this.cameraAttr.position.z);this.camera.lookAt(this.scene.position);// 创建环境光const ambientLightAttr = {show: true,style: {color: "#fff",intensity: 0.1}}if(this.ambientLightAttr){this.ambientLightAttr = Object.assign(ambientLightAttr, this.ambientLightAttr)}else{this.ambientLightAttr = ambientLightAttr}if(this.ambientLightAttr.show){this.ambientLight = this.createAmbientLight(this.ambientLightAttr.style);// this.scene.add(this.ambientLight);}// 创建点光源if(!this.netMaxY){this.netMaxY = 60}const pointLightAttr =  {style: {color: '#fff',intensity: 1,distance: this.w},position: {x: this.netMaxY * 5,y: this.netMaxY * 5,z: this.netMaxY * 5}}if(this.pointLightsAttr?.length){this.pointLightsAttr.forEach(pointLightItem => {pointLightItem = Object.assign(pointLightAttr, pointLightItem)const pointLight = this.createPointLight(pointLightItem.style);pointLight.position.set(pointLightItem.position.x, pointLightItem.position.y, pointLightItem.position.z);this.pointLights.push(pointLight)})this.scene.add(...this.pointLights);}// 创建辅助线const axesHelperAttr = {show: false,length: 100}if(this.axesHelperAttr){this.axesHelperAttr = Object.assign(axesHelperAttr, this.axesHelperAttr)}else{this.axesHelperAttr = axesHelperAttr}if(this.axesHelperAttr.show){this.axesHelper = this.createAxesHelper(this.axesHelperAttr.length)this.scene.add(this.axesHelper);}// 创建轨道控制const controlAttr = {show: false}if(this.controlAttr){this.controlAttr = Object.assign(controlAttr, this.controlAttr)}else{this.controlAttr = controlAttr}if(this.controlAttr.show){this.createControl(this.camera, this.dom);}// 创建点、线console.time('a')this.initPointLineData()if(this.pointsAttr?.length){// 点geometry、material// let pointGeometry = null// let pointMaterial = null// let pointmMesh = null// 线geometry、materiallet lineMaterial = nullif(this.isSameNormalStyle === undefined){this.isSameNormalStyle = true// pointGeometry = this.createSphereGeometry(this.pointAttr.style.normal.geometry);// pointMaterial = this.createMeshLambertMaterial(this.pointAttr.style.normal.material);// pointmMesh = this.createMesh({geometry: pointGeometry, materialBasic: pointMaterial});lineMaterial = this.createMeshLineMaterial(this.lineAttr.style.normal.material);}// this.pointsAttr.forEach(pointAttrItem => {//     // 创建点Mesh//     let mesh = null//     if(!this.isSameNormalStyle){//         pointGeometry = this.createSphereGeometry(pointAttrItem.style.normal.geometry);//         pointMaterial = this.createMeshLambertMaterial(pointAttrItem.style.normal.material);//         mesh = this.createMesh({geometry: pointGeometry, materialBasic: pointMaterial});//     }else{//         mesh = pointmMesh.clone();//     }//     mesh.position.set(pointAttrItem.position.x, pointAttrItem.position.y, pointAttrItem.position.z);//     this.points.push(mesh)// })this.linesArrt.forEach(lineAttrItem => {// 创建线Meshlet linePositions = []lineAttrItem.forEach(linePoint => {let i = (linePoint.row * this.pointAttr.col) + linePoint.collinePositions.push({...this.pointsAttr[i].position})})const lineGeometry = this.createLineGeometry(linePositions);// if(!this.isSameNormalStyle){//     lineMaterial = this.createMeshLineMaterial(lineAttrItem.style.normal.material);// }const lineMesh = this.createMesh({geometry: lineGeometry, materialBasic: lineMaterial});this.lines.push(lineMesh)})// this.scene.add(...this.points);this.scene.add(...this.lines);}console.timeEnd('a')// 渲染this.render()}initPointLineData() {const pointAttr = {width: this.w,height: Math.floor(this.w / 2),row: Math.floor(this.w / 40),col: Math.floor(this.w / 20),// width: this.w * 2,// height: this.w,// row: this.w / 20,// col: this.w / 10,// row: 10,// col: 10,style: {normal: {geometry: {radius: 3,widthSegments: 320,heightSegments: 160,},material: {color: "#ffffff",wireframe: false, //是否将几何体渲染为线框，默认值为false（即渲染为平面多边形）},},light: {geometry: {radius: 1,widthSegments: 320,heightSegments: 160,},material: {color: "#ffffff",wireframe: false,},}}}if(this.pointAttr){this.pointAttr = Object.assign(pointAttr, this.pointAttr)}else{this.pointAttr = pointAttr}const lineAttr = {style: {normal: {material: {color: "#fff",// color: "#3587C7",linewidth: 1,},},light: {material: {color: "#ffffff",linewidth: 1,},}}};if(this.lineAttr){this.lineAttr = Object.assign(lineAttr, this.lineAttr)}else{this.lineAttr = lineAttr}const startX = -this.pointAttr.width / 2const startZ = -this.pointAttr.height / 2const stepX = this.pointAttr.width / this.pointAttr.colconst stepZ = this.pointAttr.height / this.pointAttr.rowconst sinXNum = this.pointAttr.row / 4const sinZNum = this.pointAttr.col / 4for(let i = 0 ; i < this.pointAttr.row; i++){for(let j = 0 ; j < this.pointAttr.col; j++){const x = startX + j * stepXconst z = startZ + i * stepZconst y = (Math.sin((i % sinXNum / sinXNum * Math.PI * 2)) + Math.sin(((j + i) % sinZNum / sinZNum * Math.PI * 2))) * (this.netMaxY / 2)this.pointsAttr.push({row: i,col: j,position: {x, y, z},style: {...this.pointAttr.style}})if(!this.linesArrt[i]){this.linesArrt[i] = []}this.linesArrt[i][j] = {row: i,col: j}if(!this.linesArrt[this.pointAttr.row + j]){this.linesArrt[this.pointAttr.row + j] = []}this.linesArrt[this.pointAttr.row + j][i] = {row: i,col: j}}}}render = () => {//循环调用this.requestAnimationFrame = requestAnimationFrame(this.render);this.animation()this.renderer.render(this.scene, this.camera);}unmount = () => {cancelAnimationFrame(this.requestAnimationFrame)}animation = () => {const sinXNum = this.pointAttr.row / 4const sinZNum = this.pointAttr.col / 4const count = this.pointAttr.row * this.pointAttr.colconst animationSpeed = 10 //值越大越慢console.time('b')// if(this.animationIndex % 10 === 0){this.pointsAttr.forEach((pointAttrItem, pointAttrIndex) => {const i = pointAttrItem.rowconst j = pointAttrItem.colpointAttrItem.position.y = (Math.sin(((i + this.animationIndex / animationSpeed) % sinXNum / sinXNum * Math.PI * 2)) + Math.sin(((j + i + this.animationIndex / animationSpeed) % sinZNum / sinZNum * Math.PI * 2))) * 30})this.linesArrt.forEach((lineAttrItem, lineAttrIndex) => {let linePositions = []lineAttrItem.forEach(linePoint => {let i = (linePoint.row * this.pointAttr.col) + linePoint.collet point = this.pointsAttr[i]linePositions.push({...point.position})})const lineGeometry = this.createLineGeometry(linePositions);this.updateGeometry(this.lines[lineAttrIndex].geometry, lineGeometry)})// }console.timeEnd('b')this.animationIndex++this.animationIndex %= count * animationSpeed}updateGeometry = (geometry, geometry_source) => {const att_p = geometry.getAttribute('position');const att_ps = geometry_source.getAttribute('position');let i = 0;while(i < att_p.count){att_p.setXYZ( i, att_ps.getX(i), att_ps.getY(i),att_ps.getZ(i) );i += 1;}att_p.needsUpdate = true;geometry.computeVertexNormals();};rand = (n,m) => {var c = m - n + 1;return Math.floor(Math.random() * c + n);}    // 以下皆为实体创建方法createScene = () => {return new THREE.Scene();}createPerspectiveCamera = ({ fov, aspect, near, far }) => {// fov — 摄像机视锥体垂直视野角度// aspect — 摄像机视锥体长宽比// near — 摄像机视锥体近端面// far — 摄像机视锥体远端面return new THREE.PerspectiveCamera(fov, aspect, near, far);}createWebGLRenderer = ({ dom, width, height }) => {// renderDom — dom// width — 渲染宽度 一般取domclientWidth// height — 渲染高度 一般取clientHeightif (width === undefined) {width = dom.clientWidth;}if (height === undefined) {height = dom.clientHeight;}const renderer = new THREE.WebGLRenderer();renderer.setPixelRatio(window.devicePixelRatio || 1);renderer.setClearColor('#fff', 0); //设置背景颜色和透明度renderer.setSize(width, height);dom.appendChild(renderer.domElement);return renderer;}createAmbientLight = ({ color, intensity }) => {// color - (可选参数)) 十六进制光照颜色。 缺省值 0xffffff (白色)。// intensity - (可选参数) 光照强度。 缺省值 1。return new THREE.AmbientLight(color, intensity);}createPointLight = ({ color, intensity, distance, decay }) => {// color - (可选参数)) 十六进制光照颜色。 缺省值 0xffffff (白色)。// intensity - (可选参数) 光照强度。 缺省值 1。// distance - 这个距离表示从光源到光照强度为0的位置。 当设置为0时，光永远不会消失(距离无穷大)。缺省值 0.// decay - 沿着光照距离的衰退量。缺省值 2。return new THREE.PointLight(color, intensity, distance, decay);}createSphereGeometry = ({radius,widthSegments,heightSegments,phiStart,phiLength,thetaStart,thetaLength}) => {/*radius — 球体半径，默认为1。widthSegments — 水平分段数（沿着经线分段），最小值为3，默认值为32。heightSegments — 垂直分段数（沿着纬线分段），最小值为2，默认值为16。phiStart — 指定水平（经线）起始角度，默认值为0。。phiLength — 指定水平（经线）扫描角度的大小，默认值为 Math.PI * 2。thetaStart — 指定垂直（纬线）起始角度，默认值为0。thetaLength — 指定垂直（纬线）扫描角度大小，默认值为 Math.PI。*/return new THREE.SphereGeometry(radius,widthSegments,heightSegments,phiStart,phiLength,thetaStart,thetaLength);}createMeshLambertMaterial = (data) => {return new THREE.MeshLambertMaterial(data);}createLineGeometry = (points) => {// const pointsVector3 = [];// for (let i = 0; i < points.length; i++) {//     pointsVector3.push(new THREE.Vector3(points[i].x, points[i].y, points[i].z));// }// const geometry = new THREE.BufferGeometry().setFromPoints(pointsVector3);// const line = new MeshLine();// line.setGeometry(geometry);// return linelet pointsVector3 = []points.forEach(point => {pointsVector3.push(new THREE.Vector3(point.x, point.y, point.z))})let curve = new THREE.CatmullRomCurve3(pointsVector3);var CurvePath = new THREE.CurvePath();// 创建CurvePath对象// CurvePath.curves.push(line1, curve, line2);// 插入多段线条CurvePath.curves.push(curve);return new THREE.TubeGeometry(CurvePath, points.length * 10, 1, 25, false);}createMeshLineMaterial = (data) => {// return new MeshLineMaterial({//     lineWidth: data.linewidth,//     color: data.color || "white",//     dashArray: data.dashArray || 0,//     transparent: true,// })return new THREE.MeshLambertMaterial({color: data.color || "white"});}createMesh = ({geometry, materialBasic}) => {return new THREE.Mesh(geometry, materialBasic);}createAxesHelper = (length) => {return new THREE.AxesHelper(length)}createControl = (camera, dom) => {return new OrbitControls(camera, dom);};
}export default NetAnimation

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

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

相关文章

新能源汽车冷却系统的水道管口类型有哪些？格雷希尔针对这些管口密封的快速接头有哪些？

新能源汽车冷却系统的水道管口类型有哪些？格雷希尔针对这些管口密封的快速接头有哪些？

对于新能源汽车&#xff0c;不仅电池&#xff0c;还有电机、电控、充电单元部件&#xff0c;都需要处于适宜的工作温度&#xff0c;才能维持整车的正常运行。而这些部件在运行过程中会产生大量的热量&#xff0c;如果不及时散热会对汽车的性能、寿命产生影响&#xff0c;甚至可…
阅读更多...
兔子目标检测数据集VOC格式3900张

兔子目标检测数据集VOC格式3900张

兔子是一类可爱的哺乳动物&#xff0c;拥有圆润的脸庞和长长的耳朵&#xff0c;身体轻盈柔软。它们通常是以温和和友善的形象出现在人们的视野中&#xff0c;因此常常成为童话故事和卡通形象中的角色。 兔子是草食性动物&#xff0c;主要以各种草本植物为食&#xff0c;包括草…
阅读更多...
深算院与新数科技达成战略合作，共筑国产数据库新生态

深算院与新数科技达成战略合作，共筑国产数据库新生态

近日&#xff0c;深圳计算科学研究院&#xff08;以下简称“深算院”&#xff09;与北京新数科技有限公司&#xff08;以下简称“新数科技”&#xff09;达成战略合作。双方将融合发挥资源优势与技术优势&#xff0c;基于深算院自主研发设计的崖山数据库系统YashanDB&#xff0…
阅读更多...
VD6283TX环境光传感器(2)----移植闪烁频率代码

VD6283TX环境光传感器(2)----移植闪烁频率代码

VD6283TX环境光传感器----2.移植闪烁频率代码 闪烁定义视频教学样品申请源码下载参考代码硬件准备开发板设置生成STM32CUBEMX串口配置IIC配置X-CUBE-ALSADC使用定时器触发采样KEIL配置FFT代码配置app_x-cube-als.c需要添加函数演示结果 闪烁定义 光学闪烁是指人造光源产生的光…
阅读更多...
conda环境下Could not build wheels for dlib解决方法

conda环境下Could not build wheels for dlib解决方法

1 问题描述 在安装模型运行的conda环境时&#xff0c;出现如下问题&#xff1a; Building wheels for collected packages: basicsr, face-alignment, dlib, ffmpy, filterpy, futureBuilding wheel for basicsr (setup.py) ... doneCreated wheel for basicsr: filenamebasi…
阅读更多...
【小程序】如何获取特定页面的小程序码

【小程序】如何获取特定页面的小程序码

一、进入到小程序管理后台&#xff0c;进入后点击上方的“工具”》“生成小程序码” 小程序管理后台 二、进入开发者工具&#xff0c;打开对应的小程序项目&#xff0c;复制底部小程序特定页面的路径 三、粘贴到对应位置的文本框&#xff0c;点击确定即可
阅读更多...
JMeter逻辑控制器之While控制器

JMeter逻辑控制器之While控制器

JMeter逻辑控制器之While控制器 1. 背景2.目的3. 介绍4.While示例4.1 添加While控制器4.2 While控制器面板4.3 While控制器添加请求4.3 While控制器应用场景 1. 背景 存在一些使用场景&#xff0c;比如&#xff1a;某个请求必须等待上一个请求正确响应后才能开始执行。或者&…
阅读更多...
C语言——指针题目“指针探测器“

C语言——指针题目“指针探测器“

如果你觉得你指针学的自我感觉良好&#xff0c;甚至已经到达了炉火纯青的地步&#xff0c;不妨来试试这道题目&#xff1f; #include<stdio.h> int main() {char* c[] { "ENTER","NEW","POINT","FIRST" };char** cp[] { c 3…
阅读更多...
docker 安装可视化工具 Protainer 以及 汉化

docker 安装可视化工具 Protainer 以及 汉化

一、创建保存数据的卷 安装网址&#xff1a;Install Portainer BE with Docker on Linux - Portainer Documentation docker pull portainer/portainer二、根据portainer镜像创建容器 docker run -d -p 8000:8000 -p 9000:9000\ --name portainer --restartalways \ -v /var/r…
阅读更多...
缺失的第一个正数（LeetCode 41）

缺失的第一个正数（LeetCode 41）

文章目录 1.问题描述2.难度等级3.热门指数4.解题思路4.1 暴力4.2 排序4.3 哈希表4.4 空间复杂度为 O(1) 的哈希表4.5 置换 参考文献 1.问题描述 给你一个未排序的整数数组 nums &#xff0c;请你找出其中没有出现的最小的正整数。 请你实现时间复杂度为 O(n) 并且只使用常数级…
阅读更多...
网络MAC

网络MAC

网口框架 关键字 MAC&#xff1a; media access controller RMI: reduced media interface SMI&#xff1a;serial media interface N/A: Not applicable 全双工 & 半双工 3.1、在全双工模式下&#xff0c;8网根线都要分别接到水晶头相应的线序位置上&#xff1b; 3.2在…
阅读更多...
数据之光：乡镇企业的发展利器——数据可视化

数据之光：乡镇企业的发展利器——数据可视化

数据可视化是一项强大的工具&#xff0c;它不仅在大型企业中发挥关键作用&#xff0c;而且在乡镇企业中也能作出显著贡献。那么&#xff0c;数据可视化究竟能为乡镇企业做出什么样的贡献呢&#xff1f; 首先&#xff0c;数据可视化为乡镇企业提供了更清晰的业务洞察。通过将庞大…
阅读更多...
Linux性能优化全景指南

Linux性能优化全景指南

Part1 Linux性能优化 1、性能优化性能指标 高并发和响应快对应着性能优化的两个核心指标&#xff1a;吞吐和延时 应用负载角度&#xff1a;直接影响了产品终端的用户体验系统资源角度&#xff1a;资源使用率、饱和度等 性能问题的本质就是系统资源已经到达瓶颈&#xff0c;但…
阅读更多...
swing快速入门（三十一）文件选择器

swing快速入门（三十一）文件选择器

注释很详细&#xff0c;直接上代码 上一篇 新增内容 1.菜单项按键响应 2. 文件选择器对话框用法 3.绘画板用法 package swing21_30;import javax.imageio.ImageIO; import javax.swing.*; import java.awt.*; import java.awt.event.ActionEvent; import java.awt.image.B…
阅读更多...
vue2 echarts饼图，双柱图

vue2 echarts饼图，双柱图

<template><div><div class"toQ"><el-row><el-col :span"12"><div class"toW"><el-card><div class"data-title"><div class"toE">周杰伦</div></div>&…
阅读更多...
Vscode新手安装与使用

Vscode新手安装与使用

安装与版本选择 VS Code 有两个不同的发布渠道&#xff1a;一个是我们经常使用的稳定版&#xff08;Stable&#xff09;&#xff0c;每个月发布一个主版本&#xff1b;另外一个发布渠道叫做 Insiders&#xff0c;每周一到周五 UTC 时间早上6点从最新的代码发布一个版本&#x…
阅读更多...
java设计模式学习之【模板方法模式】

java设计模式学习之【模板方法模式】

文章目录 引言模板方法模式简介定义与用途实现方式 使用场景优势与劣势在Spring框架中的应用游戏设计示例代码地址 引言 设想你正在准备一顿晚餐&#xff0c;无论你想做意大利面、披萨还是沙拉&#xff0c;制作过程中都有一些共同的步骤&#xff1a;准备原料、加工食物、摆盘。…
阅读更多...
一文搞懂Go GC演进史，讲的太细致了！

一文搞懂Go GC演进史，讲的太细致了！

最近在和 Go就业训练营 的朋友讨论Go GC的问题&#xff0c;发现了刘丹冰老师总结的内容&#xff0c;写的太好了&#xff0c;和大家分享一下。 我们的讨论和思考也整理到这篇文章中了&#xff0c;希望对你有启发。 垃圾回收(Garbage Collection&#xff0c;简称GC)是编程语言中…
阅读更多...
【Vue2+3入门到实战】（13）插槽＜slot＞详细示例及自定义组件的创建与使用代码示例 详解

【Vue2+3入门到实战】（13）插槽＜slot＞详细示例及自定义组件的创建与使用代码示例 详解

目录 一、学习目标1.插槽2.综合案例&#xff1a;商品列表 一、插槽-默认插槽1.作用2.需求3.问题4.插槽的基本语法5.代码示例6.总结 二、插槽-后备内容&#xff08;默认值&#xff09;1.问题2.插槽的后备内容3.语法4.效果5.代码示例 三、插槽-具名插槽1.需求2.具名插槽语法3.v-s…
阅读更多...
Hadoop安装笔记2单机/伪分布式配置_Hadoop3.1.3——备赛笔记——2024全国职业院校技能大赛“大数据应用开发”赛项——任务2：离线数据处理

Hadoop安装笔记2单机/伪分布式配置_Hadoop3.1.3——备赛笔记——2024全国职业院校技能大赛“大数据应用开发”赛项——任务2：离线数据处理

紧接着上一篇博客&#xff1a;Hadoop安装笔记1&#xff1a; Hadoop安装笔记1单机/伪分布式配置_Hadoop3.1.3——备赛笔记——2024全国职业院校技能大赛“大数据应用开发”赛项——任务2&#xff1a;离线数据处理-CSDN博客https://blog.csdn.net/Zhiyilang/article/details/135…
阅读更多...
最新文章

Copyright @ 2022~2023