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

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

代码语言：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 v.........完整代码请登录后点击上方下载按钮下载查看