threejs——车辆雷达智能识别效果 点击关注公众号，“技术干货”及时达！ 前言随着智能电车越来越火，3d车辆的官网效果也越来越盛行，趁着空档，写一个车辆雷达识别概念效果， 话不多说，直接上源码 https://gitee.com/sunhuapeng/automotive-radar ?请点赞关注加分享，上车出发 ?灵感图效果图 技术栈three.js 0.157.0;nodejs v18.19.0vite 4.3.2实现思路背景图由于这是网上找的素材，所以背景图没有源文件，就自己画了一个差不多的，给大家推荐一个工具 在线psphotopea，快捷键、界面和photoshop没有什么区别，简单的画个图还可以。 加载背景图constcreateGround=()={ consttextureLoader=newTHREE.TextureLoader(); constmaterial=newTHREE.MeshPhongMaterial({ color:0xFFFFFF, transparent:true, opacity:1 }) ground=newTHREE.Mesh(newTHREE.BoxGeometry(18,0,640,1,1,1),material); textureLoader.load(`${import.meta.env.VITE_ASSETS_URL}/assets/images/背景图.png`,function(texture){ texture.wrapS=THREE.RepeatWrapping; texture.wrapT=THREE.RepeatWrapping; //背景图重复次数 texture.repeat.set(1,12); ground.material.map=texture; ground.material.needsUpdate=true; ground.rotation.copy(newTHREE.Euler(-Math.PI,-Math.PI*0.5,0)) scene.add(ground) } 背景图效果 这里需要对场景做一下修改，远处渐隐的效果使用的是scene.fog，这样看起来远处的道路不会很突兀。 .fog:Fog一个fog[1]实例定义了影响场景中的每个物体的雾的类型。默认值为null。 加载汽车模型constgltf=awaitloadGltf(`${import.meta.env.VITE_ASSETS_URL}/assets/models/car/scene.gltf`); constmodel=gltf.scene; constplayerScale=0.6 model.scale.set(playerScale,playerScale,playerScale) playerGroup.add(model) scene.add(playerGroup); 雷达波动从第一张效果图中可以看出来，雷达扩散的效果，其实就是一个扇形，有不同的半径，不同的弧度，半透明的扇形和外侧白色的线，由此我们就可以写一个方法，创建这个完整的扇形，利用到的api有CircleGeometry和Line2，方法接受两个参数，一个半径radius: number一个中心角thetaLength: number，首先创建出扇形，再通过扇形的定点，同步创建出lin2。Line2的所有顶点信息都从扇形获取，这样就能保证两个模型是同步的，再将线添加到扇形中。 constcreateRadar=(radius:number,thetaLength:number)={ //创建圆弧信息 constgeometry=newTHREE.CircleGeometry(radius,361,-thetaLength/2,thetaLength) constmaterial=newTHREE.MeshBasicMaterial({ color:0xffffff, side:THREE.DoubleSide, transparent:true, opacity:0.5, //创建扇形几何体 constcircle=newTHREE.Mesh(geometry,material); circle.rotation.set(Math.PI*0.5,0,0); //获取扇形几何体的顶点信息 constposition=geometry.getAttribute('position'); const{count}=position; constlinePoints=[] //循环几何体的顶点信息并加入到linePoints中。 for(leti=1;icount;i++){ constv3=newTHREE.Vector3().fromBufferAttribute(position, linePoints.push(...v3.toArray()) } //创建线 constline2Geometry=newLineGeometry(); //设置line2的顶点信息 line2Geometry.setPositions(linePoints); //线的材质 constmatLine=newLineMaterial({ linewidth:0.002,//可以调整线宽 dashed:true, opacity:1, color:0xffffff, vertexColors:false,//是否使用顶点颜色 letline2=newLine2(line2Geometry,matLine); circle.add(line2) scene.add(circle) } 有一点需要说明一下，扇形的顶点信息第一组0,0,0是中心点，而Line2是不需要的，所以在for循环的时候通过i=1来规避第一个点。createRadar(4, Math.PI*2)调用一下 Math.PI * 2和Math.PI * 0.4的效果。 下面是结合以上所有元素创建的一个静态效果： 在开发过程中遇到一个问题，扇形外侧的白色线调整是否受scene.fog影响时，ts报了个错，结果我以为不支持，看了源码才发现问题， 源码中constructor(parameters?: LineMaterialParameters);并没有这个属性，但是它继承了ShaderMaterial，这里是有fog属性的，虽然ts报错，但是效果是有的，当然也可以通过其他手段解决这个报错，还是要经常阅读源码，不然有一些奇奇怪怪的错误，都不晓得哪来的~ 3d内容的静态元素到此开发完毕，接下来是动态，给雷达添加扩散效果，并在道路上添加双向车辆，用于检测， 雷达扩散效果前文createRadar方法接受两个参数 一个是半径，一个是中心角，动态扩散效果，就是利用这两个属性值的变化做出动态扩散效果， 修改一下createRadar方法，添加一个更新方法，方法新增type动画类型，用于区别从那个属性做动画，可选值"radius" | "thetaLength" | undefined，创建雷达，初始化属性InitialThetaLength和InitialRadiue，作为最基础的创建图形，方法实参radius和thetaLength作为补间动画的数值变化。当type为undefined时，半径和中心角同时变化。 ** * *@paramradius半径 *@paramthetaLength中心角 *@paramindex索引，防止粘黏 *@paramtype动画类型 */ constcreateRadar=(radius:number,thetaLength:number,index?:number,type?:"radius"|"thetaLength")={ //初始化数据 constInitialThetaLength=Math.PI*0.01; constInitialRadiue=0.001; ... THREE.BufferGeometry和LineGeometry都可以通过设置顶点信息去更改图形，所以我们可以利用这个原理做一个半径和中心角的补间动画 //动态计算时间，让动画有点层次感 consttweenTime=(type==='radius'?2:thetaLength)*1000; //初始值为半径和中心角的初始化值 newTWEEN.Tween({radius:InitialRadiue,thetaLength:InitialThetaLength}) .to({radius,thetaLength},tweenTime)//目标值为方法的实参radius和thetaLength .delay(1000*5-tweenTime)//停滞几秒后执行 .start()//动画开始 .onUpdate(({radius:r,thetaLength:t})={ letnewGeometry:THREE.CircleGeometry if(type==='radius'){ //只对半径做修改 newGeometry=newTHREE.CircleGeometry(r,361,-thetaLength/2,thetaLength); }elseif(type==='thetaLength'){ //只对中心角做修改 newGeometry=newTHREE.CircleGeometry(radius,361,-t/2, }else{ //同时修改 newGeometry=newTHREE.CircleGeometry(r,361,-t/2, } //更新雷达扇形 circle.geometry.setAttribute('position',newGeometry.getAttribute('position')) //更新扇形外围弧线顶点信息 constlinePoints=geometryAttribute2Array(newGeometry) line2Geometry.setPositions(linePoints); }) .onComplete(()={ //补间动画停止后的回调 }) 通过修改值的不同，动态判断补间动画时长和停滞时长，让动画有一些层次。 接下来改一下调用方法 //同时修改 createRadar(42,Math.PI*0.04,1) //接近半圆的用中心角进行补间动画 createRadar(23,Math.PI*0.4,2,'thetaLength') //完整的圆对半径进行补间动画， createRadar(10,Math.PI*2,3,'radius') 为了方便演示，我在代码里加了一个按钮， 其他车辆主角的雷达写完了，接下来该添加其他车辆，添加到道路上，[0, -1.8, -3.8, 4.4, 6.3, 8.2]提前准备一下这个数组，这个数字是根据车道的具体位置计算的，目的是为了让所有的车辆都能够保持在车道的中央， letZP=[0,-1.8,-3.8,4.4,6.3,8.2] constsize=otherCarModel.userData.size //添加多个其他车辆 for(leti=0;i10;i++){ constOC=otherCarModel.clone(); constx=getRandomIntegerInRange(-10,0) constz=ZP[getRandomIntegerInRange(0,ZP.length-1)] if(z=0){ OC.rotation.set(0,-Math.PI*0.5,0) } constgroup=newTHREE.Group() group.add(OC) //随机分布 group.position.copy(newTHREE.Vector3(x-i*size.x,0,z)) yoyoTweene(OC) otherCarGroup.add(group) } 创建了10个其他车辆，随机分布在道路上，从代码中可以看到有一个yoyoTweene方法，这是一个让车辆做前后往复运动的补间动画，目的是为了模拟车辆运动的时候速度不均匀的效果，下面就该说让所有的车辆都开起来了 车辆运动constyoyoTweene=(mesh:THREE.Object3D)={ constx=getRandomIntegerInRange(-3,3) returnnewTWEEN.Tween({x}) .to({x:3},3000)//目标值为方法的实参radius和thetaLength .yoyo(true) .repeat(Infinity) .start() .onUpdate(({x})={ if(mesh){ mesh.position.setX(x) } }) } 从代码中可以看到，汽车模型只是在小距离的往复运动，其实就是原地运动，这时我们就需要一个概念相对运动，控制每一个车辆的向前运动，改变模型的位置矩阵，想想都麻烦，而且一直往前走，x值多少是个头儿，所以这里开动一下发财的小脑瓜，让道路运动，车不动，那就达到一种效果，好像镜头一直跟踪车辆模型向前观察，而道路和两边的人物一直是向后退的，想象一下自己在车里的感觉， 好，那么好，接下来改造一下ground。 //背景图重复次数 ... texture.repeat.set(1,2); //设置贴图偏移值 texture.offset.set(0,0.12);//这里的值可以根据你需要的偏移来调整 constmaterial=newTHREE.MeshLambertMaterial({ map:texture, }) ... 这个是之前加载道路贴图的代码，修改一下offset值，就会发现贴图位置被改变了，通过这个api我们就可以得出以下的结论，那么92号混凝土对意大利面的影响因子有哪些？ constloopGround=()={ newTWEEN.Tween({offsetX:0.12}) .to({offsetX:1.12},3000) .start() .repeat(Infinity) .onUpdate(({offsetX})={ ground.material.map.offset.set(0,offsetX);//这里的值可以根据你需要的偏移来调整 }) } 通过上面的改造，就有了下面的效果，请看vcr 发现一个问题没，哈哈哈对向车道的车一直在倒车~ 留个小坑，大家可以自己尝试解决。 历史文章three.js——商场楼宇室内导航系统 内附源码 three.js——可视化高级涡轮效果+警报效果 内附源码 高德地图巡航功能 内附源码 three.js——3d塔防游戏 内附源码 three.js+物理引擎——跨越障碍的汽车 可操作 可演示 百度地图——如何计算地球任意两点之间距离 内附源码 threejs——可视化地球可操作可定位 three.js 专栏 Reference[1]Fog: http://127.0.0.1:5502/docs/index.html#api/zh/scenes/Fog 点击关注公众号，“技术干货”及时达！ 阅读原文