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

---

theme: fancy

highlight: atelier-seaside-light

前言

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

请点赞关注加分享，上车出发

灵感图

效果图

技术栈

• three.js 0.157.0;
• nodejs v18.19.0
• vite 4.3.2

实现思路

背景图

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

加载背景图

```ts 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

一个