当前位置：首页 > JavaScript

js实现宇宙

2026-02-01 16:40:47JavaScript

在JavaScript中实现宇宙模拟或视觉效果，可以通过以下方法实现，涵盖基础粒子系统、物理模拟及3D渲染等技术：

js实现宇宙

粒子系统模拟宇宙星空

使用Canvas或WebGL创建随机分布的粒子（星星），通过动画循环实现动态效果：

js实现宇宙

const canvas = document.getElementById('universe');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

class Star {
  constructor() {
    this.x = Math.random() * canvas.width;
    this.y = Math.random() * canvas.height;
    this.size = Math.random() * 1.5;
    this.speed = Math.random() * 0.2;
  }
  update() {
    this.y += this.speed;
    if (this.y > canvas.height) {
      this.y = 0;
      this.x = Math.random() * canvas.width;
    }
  }
  draw() {
    ctx.fillStyle = 'white';
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fill();
  }
}

const stars = Array(200).fill().map(() => new Star());

function animate() {
  ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  stars.forEach(star => {
    star.update();
    star.draw();
  });
  requestAnimationFrame(animate);
}
animate();

使用Three.js创建3D宇宙

通过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 starGeometry = new THREE.SphereGeometry(1, 32, 32);
const starMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const star = new THREE.Mesh(starGeometry, starMaterial);
scene.add(star);

// 添加行星
const planetGeometry = new THREE.SphereGeometry(0.5, 32, 32);
const planetMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const planet = new THREE.Mesh(planetGeometry, planetMaterial);
planet.position.x = 3;
scene.add(planet);

camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);
  planet.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

物理引擎模拟天体运动

使用matter.js或cannon.js模拟引力与轨道：

const Engine = Matter.Engine,
      Render = Matter.Render,
      Bodies = Matter.Bodies,
      Composite = Matter.Composite;

const engine = Engine.create();
const render = Render.create({
  element: document.body,
  engine: engine,
  options: { width: 800, height: 600, wireframes: false }
});

// 创建恒星（中心静止）
const sun = Bodies.circle(400, 300, 50, { 
  isStatic: true,
  render: { fillStyle: 'yellow' }
});

// 创建行星（受引力影响）
const planet = Bodies.circle(600, 300, 20, {
  velocity: { x: 0, y: -5 },
  render: { fillStyle: 'blue' }
});

Composite.add(engine.world, [sun, planet]);
Engine.run(engine);
Render.run(render);