three雷达波效果（水波）

 

 

import * as THREE from 'three';

// 创建场景和相机
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 20);

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 波纹数量和参数
const waveCount = 5; // 波纹数量
const maxRadius = 10; // 最大半径
const waveSpeed = 0.02; // 波纹扩展速度

// 创建波纹组
const waveGroup = new THREE.Group();
scene.add(waveGroup);

// 创建波纹材质和几何体
const waveMaterial = new THREE.MeshBasicMaterial({
  color: 0x00ff00,
  transparent: true,
  opacity: 0.5,
  side: THREE.DoubleSide,
});

for (let i = 0; i < waveCount; i++) {
  const waveGeometry = new THREE.RingGeometry(0.1, 0.2, 64); // 初始半径为 0.1 到 0.2
  const waveMesh = new THREE.Mesh(waveGeometry, waveMaterial);
  waveGroup.add(waveMesh);
}

// 动画循环
function animateWaves() {
  const time = performance.now() * waveSpeed * 0.001; // 基于时间的动态缩放

  waveGroup.children.forEach((wave, index) => {
    const delay = index * (maxRadius / waveCount); // 每个波纹的时间延迟
    const scale = ((time + delay) % maxRadius) / maxRadius; // 当前波纹的比例

    wave.scale.set(scale * maxRadius, scale * maxRadius, 1); // 动态调整波纹大小
    wave.material.opacity = 1 - scale; // 波纹逐渐透明
  });
}

// 渲染循环
function render() {
  requestAnimationFrame(render);
  animateWaves();
  renderer.render(scene, camera);
}

render(); // 启动渲染