THREE.js绘制银河系

最新推荐文章于 2024-04-23 15:58:15 发布

废柴小z

最新推荐文章于 2024-04-23 15:58:15 发布

阅读量570

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_34568700/article/details/131973199

版权

该代码段展示了如何使用THREE.js库创建一个3D效果，背景为黑色，包含参数化的星系形状。它涉及到BufferGeometry、颜色混合、点材质以及纹理加载，最终生成具有动态旋转和光晕效果的3D点云。

摘要由CSDN通过智能技术生成

在这里插入图片描述

function createYinhexi(){
  scene.background = new THREE.Color("#000000");
  const scale = 2;
  const parameters = {
    count: 50000,
    size: .6,
    radius: 10,
    branches: 20,
    spin: -1.72,
    randomness: 0.3,
    randomnessPower: 3,
    insideColor: "#ff6030",
    outsideColor: "#1b3984",
  };
  
  let geometry = null;
  let material = null;
  let points = null;
  geometry = new THREE.BufferGeometry();
  const positionsArray = new Float32Array(parameters.count * 3);
  const colors = new Float32Array(parameters.count * 3);

  const colorInside = new THREE.Color(parameters.insideColor);
  const colorOutside = new THREE.Color(parameters.outsideColor);

  for (let i = 0; i < parameters.count; i++) {
    const i3 = i * 3;

    const radius = Math.random() * parameters.radius;
    const spinAngle = parameters.spin * radius;
    const branchAngle =
      ((i % parameters.branches) / parameters.branches) * Math.PI * 2;

    const randomX =
      Math.pow(Math.random(), parameters.randomnessPower) *
      (Math.random() < 0.5 ? 1 : -1) *
      parameters.randomness *
      radius;
    const randomY =
      Math.pow(Math.random(), parameters.randomnessPower) *
      (Math.random() < 0.5 ? 1 : -1) *
      parameters.randomness *
      radius;
    const randomZ =
      Math.pow(Math.random(), parameters.randomnessPower) *
      (Math.random() < 0.5 ? 1 : -1) *
      parameters.randomness *
      radius;

    positionsArray[i3] = Math.cos(branchAngle + spinAngle) * radius + randomX;
    positionsArray[i3 + 1] = randomY;
    positionsArray[i3 + 2] =
      Math.sin(branchAngle + spinAngle) * radius + randomZ;

    // Color
    const mixedColor = colorInside.clone();
    mixedColor.lerp(colorOutside, radius / parameters.radius);

    colors[i3] = mixedColor.r;
    colors[i3 + 1] = mixedColor.g;
    colors[i3 + 2] = mixedColor.b;
  }

  geometry.setAttribute(
    "position",
    new THREE.BufferAttribute(positionsArray, 3)
  );

  geometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));

  const tLoader = new THREE.TextureLoader();
  const map = tLoader.load('https://wall.alva.com.cn/baikeResource/yinhe_star.png');
  // const map = tLoader.load('https://wall.alva.com.cn/baikeResource/circle.png');
  material = new THREE.PointsMaterial({
    size: parameters.size,
    map: map,
    alphaMap: map,
    transparent: true,
    depthWrite: false,
    blending: THREE.AdditiveBlending,
    vertexColors: true,
    // sizeAttenuation: true,
  });

  points = new THREE.Points(geometry, material);
  points.position.y += 4;
  points.scale.set(scale, scale, scale);
  points.rotation.x += Math.PI / 5;
  scene.add(points);

  // setInterval(()=>{
  //   currModel.rotation.y += .003;
  // }, 100);
  composer = new EffectComposer(renderer);
  let r = new RenderPass(scene, camera);
  let u = new UnrealBloomPass(new THREE.Vector2(770, 700), 1.5, 0.4, 0.85);
  composer.addPass(r);
  composer.addPass(u);
}