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 = new THREE.PerspectiveCamera(
	fov,
	sizes.w / sizes.h,
	nearDist,
	farDist
);
camera.position.set(0, 0, Math.round(farDist / 16));
scene.add(camera);

// Renderer
const renderer = new THREE.WebGLRenderer();
renderer.setClearColor("black");
renderer.setSize(sizes.w, sizes.h);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
canvas.appendChild(renderer.domElement);

// Custom shader
const uniforms = {
	u_time: { type: "f", value: 1.0 },
	u_resolution: { type: "v2", value: new THREE.Vector2() }
};
uniforms.u_resolution.value.x = renderer.domElement.width;
uniforms.u_resolution.value.y = renderer.domElement.height;
const vertexShader = document.querySelector("#vertex").textContent;
const fragmentShader = document.querySelector("#fragment").textContent;
const shaderMaterial = new THREE.ShaderMaterial({
	uniforms,
	vertexShader,
	fragmentShader,
	transparent: true
});


// Resizing
window.addEventListener("resize", () => {
	// Update sizes
	sizes.w = window.innerWidth;
	sizes.h = window.innerHeight;

	// Update camera
	camera.aspect = sizes.w / sizes.h;
	camera.updateProjectionMatrix();

	// Update renderer
	renderer.setSize(sizes.w, sizes.h);
.........完整代码请登录后点击上方下载按钮下载查看