当前位置：首页 > JavaScript

js实现黑洞

2026-03-14 18:13:44JavaScript

实现黑洞效果的JavaScript方法

在JavaScript中模拟黑洞效果可以通过Canvas或WebGL实现。以下是两种常见的方法：

使用Canvas绘制黑洞

创建一个Canvas元素并绘制渐变圆形模拟黑洞引力效果：

const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');

function drawBlackHole() {
  // 设置画布尺寸
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 创建径向渐变模拟黑洞
  const gradient = ctx.createRadialGradient(
    canvas.width/2, canvas.height/2, 50,
    canvas.width/2, canvas.height/2, 300
  );
  gradient.addColorStop(0, 'black');
  gradient.addColorStop(0.7, '#222');
  gradient.addColorStop(1, 'transparent');

  // 绘制黑洞
  ctx.fillStyle = gradient;
  ctx.beginPath();
  ctx.arc(canvas.width/2, canvas.height/2, 300, 0, Math.PI*2);
  ctx.fill();

  requestAnimationFrame(drawBlackHole);
}

drawBlackHole();

使用Three.js创建3D黑洞

通过WebGL库Three.js实现更逼真的3D效果：

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建黑洞几何体
const geometry = new THREE.SphereGeometry(5, 64, 64);
const material = new THREE.MeshBasicMaterial({ 
  color: 0x000000,
  side: THREE.DoubleSide
});
const blackHole = new THREE.Mesh(geometry, material);
scene.add(blackHole);

// 添加吸积盘效果
const diskGeometry = new THREE.TorusGeometry(7, 2, 16, 100);
const diskMaterial = new THREE.MeshBasicMaterial({ 
  color: 0x5500ff,
  side: THREE.DoubleSide,
  transparent: true,
  opacity: 0.7
});
const accretionDisk = new THREE.Mesh(diskGeometry, diskMaterial);
accretionDisk.rotation.x = Math.PI / 2;
scene.add(accretionDisk);

camera.position.z = 15;

function animate() {
  requestAnimationFrame(animate);
  blackHole.rotation.y += 0.01;
  accretionDisk.rotation.y -= 0.02;
  renderer.render(scene, camera);
}
animate();

实现引力效果

为黑洞添加引力效果，使周围物体被吸引：

const particles = [];
const particleCount = 100;

// 创建粒子系统
for (let i = 0; i < particleCount; i++) {
  const particle = {
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height,
    vx: Math.random() * 2 - 1,
    vy: Math.random() * 2 - 1
  };
  particles.push(particle);
}

function updateParticles() {
  const centerX = canvas.width/2;
  const centerY = canvas.height/2;

  particles.forEach(p => {
    // 计算粒子到黑洞中心的距离
    const dx = centerX - p.x;
    const dy = centerY - p.y;
    const distance = Math.sqrt(dx*dx + dy*dy);

    // 应用引力
    if (distance > 10) {
      const force = 1000 / (distance * distance);
      p.vx += dx / distance * force;
      p.vy += dy / distance * force;
    }

    // 更新粒子位置
    p.x += p.vx;
    p.y += p.vy;

    // 绘制粒子
    ctx.fillStyle = 'white';
    ctx.fillRect(p.x, p.y, 2, 2);
  });
}