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();
.........完整代码请登录后点击上方下载按钮下载查看