three+webgl实现可调节参数的三维宇宙粒子星球场景效果代码
代码语言:html
所属分类:三维
代码描述:three+webgl实现可调节参数的三维宇宙粒子星球场景效果代码
代码标签: 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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0