专栏名称: 前端大全

分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

threejs ——车辆雷达智能识别效果

前端大全 · 公众号 · 前端 · 2024-10-21 11:50

正文

前言

随着智能电车越来越火，3d车辆的官网效果也越来越盛行，趁着空档，写一个车辆雷达识别概念效果，话不多说，直接上源码 https://gitee.com/sunhuapeng/automotive-radar

❞

灵感图

效果图

技术栈

three.js 0.157.0;
nodejs v18.19.0
vite 4.3.2

实现思路

背景图

由于这是网上找的素材，所以背景图没有源文件，就自己画了一个差不多的，给大家推荐一个工具在线psphotopea，快捷键、界面和photoshop没有什么区别，简单的画个图还可以。

加载背景图

const createGround = () => {

    const textureLoader = new THREE.TextureLoader();

    const material = new THREE.MeshPhongMaterial({
        color: 0xFFFFFF,
        transparent: true,
        opacity: 1
    })
    ground = new THREE.Mesh(new THREE.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(new THREE.Euler(-Math.PI, -Math.PI * 0.5, 0))
        scene.add(ground)
    });

}

背景图效果

这里需要对场景做一下修改，远处渐隐的效果使用的是scene.fog，这样看起来远处的道路不会很突兀。

.fog : Fog

一个fog^[1]实例定义了影响场景中的每个物体的雾的类型。默认值为null。

加载汽车模型

const gltf = await loadGltf(`${import.meta.env.VITE_ASSETS_URL}/assets/models/car/scene.gltf`);
const model = gltf.scene;
const playerScale = 0.6

model.scale.set(playerScale, playerScale, playerScale)
playerGroup.add(model)
scene.add(playerGroup);

雷达波动

从第一张效果图中可以看出来，雷达扩散的效果，其实就是一个扇形，有不同的半径，不同的弧度，半透明的扇形和外侧白色的线，由此我们就可以写一个方法，创建这个完整的扇形，利用到的api有CircleGeometry和Line2，方法接受两个参数，一个半径radius: number一个中心角thetaLength: number，首先创建出扇形，再通过扇形的定点，同步创建出lin2。Line2的所有顶点信息都从扇形获取，这样就能保证两个模型是同步的，再将线添加到扇形中。

const createRadar = (radius: number, thetaLength: number) => {
    // 创建圆弧信息
    const geometry = new THREE.CircleGeometry(radius, 361, -thetaLength / 2, thetaLength)
    
    const material = new THREE.MeshBasicMaterial({
        color: 0xffffff,
        side: THREE.DoubleSide,
        transparent: true,
        opacity: 0.5,
    });
    // 创建扇形几何体
    const circle = new THREE.Mesh(geometry, material);
    circle.rotation.set(Math.PI * 0.5, 0, 0);

    // 获取扇形几何体的顶点信息
    const position = geometry.getAttribute('position');
    const { count } = position;

    const linePoints = []
    // 循环几何体的顶点信息并加入到linePoints中。
    for (let i = 1; i < count; i++) {
        const v3 = new THREE.Vector3().fromBufferAttribute(position, i);
        linePoints.push(...v3.toArray())
    }
    // 创建线
    const line2Geometry = new LineGeometry();

    // 设置line2的顶点信息
    line2Geometry.setPositions(linePoints);
    
    // 线的材质
    const matLine = new LineMaterial({
        linewidth: 0.002, // 可以调整线宽
        dashed: true,
        opacity: 1,
        color: 0xffffff,
        vertexColors: false, // 是否使用顶点颜色
    });

    let line2 = new Line2(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时，半径和中心角同时变化。

**
 * 
 * @param radius 半径
 * @param thetaLength 中心角
 * @param index 索引，防止粘黏
 * @param type 动画类型
 */
const createRadar = (radius: number, thetaLength: number, index?: number, type?: "radius" | "thetaLength") => {
    // 初始化数据
    const InitialThetaLength = Math.PI * 0.01;
    const InitialRadiue = 0.001;
...

THREE.BufferGeometry和LineGeometry都可以通过设置顶点信息去更改图形，所以我们可以利用这个原理做一个半径和中心角的补间动画

// 动态计算时间，让动画有点层次感
const tweenTime = (type === 'radius' ? 2 : thetaLength) * 1000;

// 初始值为半径和中心角的初始化值
new TWEEN.Tween({ radius: InitialRadiue, thetaLength: InitialThetaLength })
    .to({ radius, thetaLength }, tweenTime) // 目标值为方法的实参radius和thetaLength
    .delay(1000 * 5 - tweenTime) // 停滞几秒后执行
    .start() // 动画开始
    .onUpdate(({ radius: r, thetaLength: t }) => {
        let newGeometry: THREE.CircleGeometry
        if (type === 'radius') {
            // 只对半径做修改
            newGeometry = new THREE.CircleGeometry(r, 361, -thetaLength / 2, thetaLength);
        } else if (type === 'thetaLength') {
            // 只对中心角做修改
            newGeometry = new THREE.CircleGeometry(radius, 361, -t / 2, t);
        } else {
            // 同时修改
             newGeometry = new THREE.CircleGeometry(r, 361, -t / 2, t);
        }

        // 更新雷达扇形
        circle.geometry.setAttribute('position', newGeometry.getAttribute('position'))

        // 更新扇形外围弧线顶点信息
        const linePoints = 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]提前准备一下这个数组，这个数字是根据车道的具体位置计算的，目的是为了让所有的车辆都能够保持在车道的中央，

let ZP = [0, -1.8, -3.8, 4.4, 6.3, 8.2]

const size = otherCarModel.userData.size

// 添加多个其他车辆
for (let i = 0; i < 10; i++) {
    const OC = otherCarModel.clone();

    const x = getRandomIntegerInRange(-10, 0)
    const z = ZP[getRandomIntegerInRange(0, ZP.length - 1)]
    if (z <= 0) {
        OC.rotation.set(0, -Math.PI * 0.5, 0)
    }
    const group = new THREE.Group()
    group.add(OC)
    // 随机分布
    group.position.copy(new THREE.Vector3(x - i * size.x, 0, z))
    yoyoTweene(OC)
    otherCarGroup.add(group)
}

创建了10个其他车辆，随机分布在道路上，从代码中可以看到有一个yoyoTweene方法，这是一个让车辆做前后往复运动的补间动画，目的是为了模拟车辆运动的时候速度不均匀的效果，下面就该说让所有的车辆都开起来了

车辆运动

const yoyoTweene = (mesh: THREE.Object3D) => {
const x = getRandomIntegerInRange(-3, 3)
return new TWEEN.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); // 这里的值可以根据你需要的偏移来调整

        const material = new THREE.MeshLambertMaterial({
            map: texture,
        })
...

这个是之前加载道路贴图的代码，修改一下offset值，就会发现贴图位置被改变了，通过这个api我们就可以得出以下的结论，那么92号混凝土对意大利面的影响因子有哪些？

const loopGround = () => {
    new TWEEN.Tween({ offsetX: 0.12 })
        .to({ offsetX: 1.12 }, 3000) 
        .start()
        .repeat(Infinity)
        .onUpdate(({ offsetX }) => {
            ground.material.map.offset.set(0, offsetX); // 这里的值可以根据你需要的偏移来调整
        })
}

通过上面的改造，就有了下面的效果，请看vcr

发现一个问题没，哈哈哈对向车道的车一直在倒车~

留个小坑，大家可以自己尝试解决。

Reference

[1]

Fog: http://127.0.0.1:5502/docs/index.html#api/zh/scenes/Fog

推荐阅读点击标题可跳转

1、不止WebSocket可以实现长连接，它也可以

2、Three.js + Echarts 实现大屏系统经验总结

3、Vue3 + Three.js + antvG2 实战智慧城市