ThreeJs 学习之旅(十三)—Galaxy Generator(银河系建立)

颜色（Color）

表示一个颜色。

.lerp ( color : Color, alpha : Float ) : Color

color - 用于收敛的颜色。
alpha - 介于0到1的数字。

将该颜色的RGB值线性插值到传入参数的RGB值。alpha参数可以被认为是两种颜色之间的比例值，其中0是当前颜色和1.0是第一个参数的颜色。

银河系效果:

银河系代码:

import "./style.css";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import * as dat from "dat.gui";
import ky from "kyouka";

/**
 * Base
 */
// Debug
const gui = new dat.GUI();

// Canvas
const canvas = document.querySelector("canvas.webgl");

// Scene
const scene = new THREE.Scene();



/**
 * Sizes
 */
const sizes = {
  width: window.innerWidth,
  height: window.innerHeight,
};

window.addEventListener("resize", () => {
  // Update sizes
  sizes.width = window.innerWidth;
  sizes.height = window.innerHeight;

  // Update camera
  camera.aspect = sizes.width / sizes.height;
  camera.updateProjectionMatrix();

  // Update renderer
  renderer.setSize(sizes.width, sizes.height);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
});

/**
 * Camera
 */
// Base camera
const camera = new THREE.PerspectiveCamera(
  75,
  sizes.width / sizes.height,
  0.1,
  100
);
camera.position.x = 3;
camera.position.y = 3;
camera.position.z = 3;
scene.add(camera);

// Controls
const controls = new OrbitControls(camera, canvas);
controls.enableDamping = true;

/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
});
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

/**
 * Animate
 */
const clock = new THREE.Clock();

const tick = () => {
  const elapsedTime = clock.getElapsedTime();

  // Update controls
  controls.update();

  // Render
  renderer.render(scene, camera);

  // Call tick again on the next frame
  window.requestAnimationFrame(tick);
};

tick();
const params={
  count:50000,
  size:0.009,
  radius:5,
  branches:3,
  spin:3,
  randomness:0.69,
  randomPower:2,
  insideColor:"#ff6030",
  outsideColor:"#1b3984"
}
let geometry=null;
let points=null;
let pointsMaterial=null;
let positions=null;
let colors=null
let generateGalaxy=()=>{
  if(points!=null){
    geometry.dispose()
    pointsMaterial.dispose()
    scene.remove(points)
  }
  geometry=new THREE.BufferGeometry();
  positions=new Float32Array(params.count*3);
  colors=new Float32Array(params.count*3)
  const insideColor=new THREE.Color(params.insideColor)
  const outsideColor=new THREE.Color(params.outsideColor)
  for(let i=0;i