three打造三维变色星空空间移动效果代码-html代码-BFW代码库

three打造三维变色星空空间移动效果代码

代码语言：html

所属分类：三维

代码描述：three打造三维变色星空空间移动效果代码

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

<html lang="en"><head>

  <meta charset="UTF-8">

  
  
  
  
<style>
* {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

body {
  background-color: black;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

iframe {
  width: calc(100% + 112px);
  height: 58px;
  opacity: 0.85;
  position: absolute;
  top: -6px;
  left: -110px;
}
</style>



</head>

<body>


<div id="canvas-wrapper" aria-label="3D Stars"></div>

<script id="vertex" type="x-shader/x-vertex">   
        void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }
</script>

<script id="fragment" type="x-shader/x-vertex">
#ifdef GL_ES
precision highp float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

void main() {
        vec2 uv = (gl_FragCoord.xy - u_resolution * .5) / u_resolution.yy + 0.5;
        
        float t = u_time*0.8;
        float n = 12.;
        float cAnim = sin(u_time*0.25); // Same anim as particles       
        
        vec3 c1 = vec3(0.0);
        vec3 c2 = vec3(0.29+cAnim, 0.50-cAnim, 0.68+cAnim); // Same color as particles  
        float wave = fract(sin(uv.x*n+t) + uv.y*n+sin(t*.5));
        
        vec3 color = vec3(wave, uv.y, 0.75);
        color *= mix(c1, c2, vec3(wave));
        
    gl_FragColor = vec4(color, 0.85);
}
</script>
  

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.123.js"></script>
      <script>
/*
 * THOUSAND STARS (to be precise, 8000)
 * Made with ThreeJS - Enjoy!
 *
 * Use cursor to rotate stars and typography in space.
 * On mobile touch + drag screen.
 *
 * You can enjoy some 90s' music by Tori Amos while you browse the sky via the SoundCloud Widget API.
 *
 * Some coding techniques are taken after Bruno Simon's course and a ThreeJS example:
 * https://threejs-journey.xyz/
 * https://threejs.org/examples/?q=particles#webgl_points_billboards
 *
 * #066 - #100DaysOfCode
 * By ilithya | 2021
 * https://www.ilithya.rocks/
 * https://twitter.com/ilithya_rocks
 */

// Canvas
const canvas = document.querySelector("#canvas-wrapper");

// Scene
const scene = new THREE.Scene();

// Settings 
const fov = 95;
const nearDist = 0.1;
const farDist = 30000;
const sizes = {
        w: window.innerWidth,
        h: window.innerHeight
};

// Camera
const camera.........完整代码请登录后点击上方下载按钮下载查看