three打造霓虹石星空旋转效果-html代码-BFW代码库

three打造霓虹石星空旋转效果

代码语言：html

所属分类：粒子

代码描述：three打造霓虹石星空旋转效果

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">


</head>
<body translate="no">

<script id="vertexShader" type="x-shader/x-vertex">
  attribute vec3 color;

  uniform float time;
  uniform float size;

  varying vec4 vMvPosition;
  varying vec3 vColor;
  
  float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) {
    return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin));
  }

  void main() {
      vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
      vMvPosition = mvPosition;
      vColor = color;

      gl_PointSize = (size + map(sin(time * 0.05), -1.0, 1.0, -100.0, 100.0)) * (100.0 / length(mvPosition.xyz));
      gl_Position = projectionMatrix * mvPosition;
  }
</script>

<script id="fragmentShader" type="x-shader/x-fragment">
  uniform sampler2D texture;
  uniform float time;

  varying vec4 vMvPosition;
  varying vec3 vColor;

  void main() {
      float opacity = 200.0 / length(vMvPosition.xyz);

      vec2 uv = gl_PointCoord.xy * 2.0 - 1.0;

      float orb = 0.1 / length(vec2(0.0) - uv) * step(0.5, 1.0 - length(uv));
      orb = smoothstep(0.0, 1.0, orb);

      vec3 color = vec3(orb) * vColor;

      gl_FragColor = vec4(color, 1.0);
  }
</script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.109.js"></script>
<script >
var vertexShader = document.getElementById('vertexShader').textContent;
var fragmentShader = document.getElementById('fragmentShader').textContent;

let clock = new THREE.Clock();
let scene = new THREE.Scene();

let colorsPerFace = [
"#3628EF", "#FF5DEF", "#8747FE", "#088FFE", "#03A6CE"];


// from https://stackoverflow.com/a/5624139
function hexToRgb(hex) {
  let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return {
    r: parseInt(result[1], 16) / 255,
    g: parseInt(result[2], 16) / 255,
    b: parseInt(result[3], 16) / 255 };

}

const vertices = [];
const colors =.........完整代码请登录后点击上方下载按钮下载查看