vue实现3d宇宙

实现3D宇宙的基础方法

使用Vue结合Three.js库可以高效创建3D宇宙场景。Three.js是基于WebGL的JavaScript 3D库，能简化3D渲染的复杂度。

安装依赖：

npm install three @types/three

基础场景搭建

创建Vue组件并初始化Three.js基础结构：

<template>
  <div ref="container" class="canvas-container"></div>
</template>

<script>
import * as THREE from 'three';

export default {
  mounted() {
    this.initScene();
  },
  methods: {
    initScene() {
      const container = this.$refs.container;
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(75, container.clientWidth/container.clientHeight, 0.1, 1000);
      const renderer = new THREE.WebGLRenderer({ antialias: true });

      renderer.setSize(container.clientWidth, container.clientHeight);
      container.appendChild(renderer.domElement);

      // 添加星空背景
      const starGeometry = new THREE.BufferGeometry();
      const starMaterial = new THREE.PointsMaterial({ color: 0xFFFFFF });
      const stars = new THREE.Points(starGeometry, starMaterial);
      scene.add(stars);

      // 动画循环
      const animate = () => {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
      };
      animate();
    }
  }
};
</script>

<style>
.canvas-container {
  width: 100%;
  height: 100vh;
}
</style>

生成星空效果

创建随机分布的星星：

createStars() {
  const starVertices = [];
  for (let i = 0; i < 10000; i++) {
    const x = (Math.random() - 0.5) * 2000;
    const y = (Math.random() - 0.5) * 2000;
    const z = (Math.random() - 0.5) * 2000;
    starVertices.push(x, y, z);
  }

  const geometry = new THREE.BufferGeometry();
  geometry.setAttribute('position', new THREE.Float32BufferAttribute(starVertices, 3));

  const material = new THREE.PointsMaterial({
    size: 2,
    color: 0xFFFFFF,
    transparent: true,
    opacity: 0.8
  });

  return new THREE.Points(geometry, material);
}

添加行星系统

创建带纹理的行星和轨道：

createPlanet() {
  const geometry = new THREE.SphereGeometry(5, 32, 32);
  const textureLoader = new THREE.TextureLoader();
  const material = new THREE.MeshStandardMaterial({
    map: textureLoader.load('/path/to/texture.jpg'),
    roughness: 1,
    metalness: 0
  });

  const planet = new THREE.Mesh(geometry, material);
  planet.position.set(20, 0, 0);

  // 添加轨道
  const orbitGeometry = new THREE.RingGeometry(20, 20.1, 64);
  const orbitMaterial = new THREE.MeshBasicMaterial({ 
    color: 0x444444, 
    side: THREE.DoubleSide,
    transparent: true,
    opacity: 0.5
  });
  const orbit = new THREE.Mesh(orbitGeometry, orbitMaterial);
  orbit.rotation.x = Math.PI / 2;

  scene.add(planet, orbit);
  return planet;
}

实现动态效果

添加自动旋转和交互控制：

animate() {
  requestAnimationFrame(this.animate);

  // 行星自转
  if (this.planet) {
    this.planet.rotation.y += 0.01;
  }

  // 相机环绕
  if (this.controls) {
    this.controls.update();
  }

  this.renderer.render(this.scene, this.camera);
}

addControls() {
  const OrbitControls = require('three/examples/jsm/controls/OrbitControls').default;
  this.controls = new OrbitControls(this.camera, this.renderer.domElement);
  this.controls.enableDamping = true;
  this.controls.dampingFactor = 0.05;
}

性能优化技巧

使用实例化渲染处理大量星体：

createStarCluster() {
  const geometry = new THREE.InstancedBufferGeometry();
  const baseGeometry = new THREE.SphereGeometry(0.5, 8, 8);

  geometry.index = baseGeometry.index;
  geometry.attributes = baseGeometry.attributes;

  const count = 1000;
  const positions = new THREE.InstancedBufferAttribute(new Float32Array(count * 3), 3);
  const colors = new THREE.InstancedBufferAttribute(new Float32Array(count * 3), 3);

  for (let i = 0; i < count; i++) {
    positions.setXYZ(i, 
      Math.random() * 100 - 50,
      Math.random() * 100 - 50,
      Math.random() * 100 - 50
    );
    colors.setXYZ(i,
      Math.random(),
      Math.random(),
      Math.random()
    );
  }

  geometry.setAttribute('instancePosition', positions);
  geometry.setAttribute('instanceColor', colors);

  const material = new THREE.ShaderMaterial({
    vertexShader: `
      attribute vec3 instancePosition;
      attribute vec3 instanceColor;
      varying vec3 vColor;
      void main() {
        vColor = instanceColor;
        vec3 pos = position * 0.2 + instancePosition;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
      }
    `,
    fragmentShader: `
      varying vec3 vColor;
      void main() {
        gl_FragColor = vec4(vColor, 1.0);
      }
    `
  });

  return new THREE.Mesh(geometry, material);
}