three+webgl实现可调节参数的三维宇宙粒子星球场景效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three+webgl实现可调节参数的三维宇宙粒子星球场景效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
html, body, canvas {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  position: fixed;
  background: black;
}
</style>



</head>

<body >
  <canvas id="canvas"></canvas>
   

  
      <script type="module">
import { AdditiveBlending, BufferAttribute, BufferGeometry, CanvasTexture, Color, PerspectiveCamera, Points, RawShaderMaterial, Scene, WebGLRenderer } from "//repo.bfw.wiki/bfwrepo/js/module/three/build/three.module.js";

import { OrbitControls } from "//repo.bfw.wiki/bfwrepo/js/module/three/examples/jsm/controls/OrbitControls.js";
import GUI from "//repo.bfw.wiki/bfwrepo/js/lil-gui.esm.js";
import { TWEEN } from "//repo.bfw.wiki/bfwrepo/js/module/tween/tween.module.min.js";



console.clear();
// ------------------------ //
// SETUP

const count = 128 ** 2;

const scene = new Scene();

const camera = new PerspectiveCamera(
60, innerWidth / innerHeight, 0.1, 100);

camera.position.set(0, 2, 3);

const renderer = new WebGLRenderer({ canvas });
renderer.setSize(innerWidth, innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

const orbit = new OrbitControls(camera, canvas);



// ------------------------ //
// STAR ALPHA TEXTURE

const ctx = document.createElement("canvas").getContext("2d");
ctx.canvas.width = ctx.canvas.height = 32;

ctx.fillStyle = "#000";
ctx.fillRect(0, 0, 32, 32);

let grd = ctx.createRadialGradient(16, 16, 0, 16, 16, 16);
grd.addColorStop(0.0, "#fff");
grd.addColorStop(1.0, "#000");
ctx.fillStyle = grd;
ctx.beginPath();
ctx.rect(15, 0, 2, 32);
ctx.fill();
ctx.beginPath();
ctx.rect(0, 15, 32, 2);
ctx.fill();

grd = ctx.createRadialGradient(16, 16, 0, 16, 16, 16);
grd.addColorStop(0.1, "#ffff");
grd.addColorStop(0.6, "#0000");
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 32, 32);

const alphaMap = new CanvasTexture(ctx.canvas);



// ------------------------ //
// GALAXY

const galaxyGeometry = new BufferGeometry();

const galaxyPosition = new Float32Array(count * 3);
const galaxySeed = new Float32Array(count * 3);
const galaxySize = new Float32Array(count);

for (let i = 0; i < count; i++) {
  galaxyPosition[i * 3] = i / count;
  galaxySeed[i * 3 + 0] = Math.random();
  galaxySeed[i * 3 + 1] = Math.random();
  galaxySeed[i * 3 + 2] = Math.random();
  galaxySize[i] = Math.random() * 2 + 0.5;
}

galaxyGeometry.setAttribute(
"position", new BufferAttribute(galaxyPosition, 3));

galaxyGeometry.setAttribute(
"size", new BufferAttribute(galaxySize, 1));

galaxyGeometry.setAttribute(
"seed", new BufferAttribute(galaxySeed, 3));




const innColor = new Color("#f40");
const outColor = new Color("#a7f");

const galaxyMaterial = new RawShaderMaterial({

  uniforms: {
    uTime: { value: 0 },
    uSize: { value: renderer.getPixelRatio() },
    uBranches: { value: 2 },
    uRadius: { value: 0 },
    uSpin: { value: Math.PI * 0.25 },
    uRandomness: { value: 0 },
    uAlphaMap: { value: alphaMap },
    uColorInn: { value: innColor },
    uColorOut: { value: outColor } },


  vertexShader:
  `
precision highp float;

attribute vec3 position;
attribute float size;
attribute vec3 seed;
uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;

uniform float uTime;
uniform float uSize;
uniform float uBranches;
uniform float uRadius;
uniform float uSpin;
uniform float uRandomness;

varying float vDistance;

#define PI  3.14159265359
#define PI2 6.28318530718

#include <random, scatter>



void main() {

  vec3 p = position;
  float st = sqrt(p.x);
  float qt = p.x * p.x;
  float mt = mix(st, qt, p.x);

  // Offset positions by spin (farther wider) and branch num
  float angle = qt * uSpin * (2.0 - sqrt(1.0 - qt));
  float branchOffset = (PI2 / uBranches) * floor(seed.x * uBranches);
  p.x = position.x * cos(angle + branchOffset) * uRadius;
  p.z = position.x * sin(angle + branchOffset) * uRadius;

  // Scatter positions & scale down by Y-axis
  p += scatter(seed) * random(seed.zx) * uRandomness * mt;
  p.y *= 0.5 + qt * 0.5;

  // Rotate (center faster)
  vec3 temp = p;
  float ac = cos(-uTime * (2.0 - st) * 0.5);
  float as = sin(-uTime * (2.0 - st) * 0.5);
  p.x = temp.x * ac - temp.z * as;
  p.z = temp.x * as + temp.z * ac;



  vDistance = mt;

  vec4 mvp = modelViewMatrix * vec4(p, 1.0);
  gl_Position = projectionMatrix * mvp;
  gl_PointSize = (10.0 * size * uSize) / -mvp.z;
}
`,

  fragmentShader:
  `
precision highp float;

uniform vec3 uColorInn;
uniform vec3 uColorOut;
uniform sampler2D uAlphaMap;

varying float vDistance;

#define PI  3.14159265359



void main() {
  vec2 uv = vec2(gl_PointCoord.x, 1.0 - gl_PointCoord.y);
  float a = texture2D(uAlphaMap, uv).g;
  if (a < 0.1) discard;

  vec3 color = mix(uColorInn, uColorOut, vDistance);
  float c = step(0.99, (sin(gl_PointCoord.x * PI) + sin(gl_PointCoord.y * PI)) * 0.5);
  color = max(color, vec3(c));

  gl_FragColor = vec4(color, a);
}
`,

  transparent: true,
  depthTest: false,
  depthWrite: false,
  blending: AdditiveBlending });




const galaxy = new Points(galaxyGeometry, galaxyMaterial);
galaxy.material.onBeforeCompile = shader => {
  shader.vertexShader = shader.vertexShader.
  replace("#include <.........完整代码请登录后点击上方下载按钮下载查看