webgl模拟逼真沙滩海水波动360度日出景色动画代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：webgl模拟逼真沙滩海水波动360度日出景色动画代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
  
  
<style>
:root {
	--breeze: 0.35;
}

body {
	height: 100vh;
	margin: 0;
	overflow: hidden;
	background: #000;
}

.editorD {
	position: absolute;
	top: 10px;
	left: 5px;
	z-index: 999;
}

.editorD input {
	cursor: pointer;
	background: rgba(100, 100, 180, 0.5);
	border: 1px solid gray;
	color: #111;
}
.editorD input:hover {
	background: rgba(120, 120, 200, 0.8);
}

#main,
#divShader {
	width: 100%;
	height: 100%;
}

#main {
	position: fixed; /* 🔥 MUITO IMPORTANTE */
	inset: 0;
	overflow: hidden;
}

#divShader {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.scrollControl {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	height: 220px;
	width: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999;

	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 20px;
}

.scrollControl input[type="range"] {
	writing-mode: vertical-rl;
	-webkit-appearance: slider-vertical;
	width: 100%;
	height: 200px;
	background: transparent;
	cursor: pointer;
}

/* Track */
.scrollControl input[type="range"]::-webkit-slider-runnable-track {
	width: 16px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 10px;
}

/* Thumb */
.scrollControl input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(180, 180, 255, 0.9);
	box-shadow: 0 0 10px rgba(120, 120, 255, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.3);
}
</style>


  
  
</head>

<body translate="no">
  <section id="main">
	<div class="editorD">
		<input type="button" value="EDITOR" onClick="ShaderPlayEditor.show();" />
	</div>
	<div class="scrollControl">
		<input id="vScroll" type="range" min="0" max="1" step="0.001" value="0.4">
	</div>

	<div id="divShader"></div>

	<script type="module">
		import {
			ShaderPlay
		} from "//repo.bfw.wiki/bfwrepo/js/shaderplay6.js";
		const shader = ShaderPlay.create();
		shaderPlayLoaded(shader);
	</script>
  
    <script >
//Update Day23 M06 Y26
//need fix lines on sand

let shader, resizing;
const divShader = document.getElementById("divShader");
const slider = document.getElementById("vScroll");
let scrollValue = 0;

slider.addEventListener("input", e => {
  scrollValue = 1.0 - parseFloat(e.target.value);
  if (shader) shader.uniform("timeOfDay", scrollValue);
});

async function shaderPlayLoaded(rcvshader) {
  shader = rcvshader;
  shader.setResolution(divShader.clientWidth, divShader.clientHeight);
  //shader.setResolution(600, 600);
  await shader.Shader("divShader", data().vertex, data().fragment, {
    alpha: false });

  shader.uniform("camDir", [1.0, -0.1, 1.2]);
  shader.uniform("camPos", [0.0, 6.0, 40.0]);
  shader.uniform("timeOfDay", 0.6);

  let yaw = 0.8;
  let pitch = -0.1;
  let sensitivity = 0.004;
  const MIN_PITCH = -0.5;
  const MAX_PITCH = -0.05;
  const MIN_YAW = -1.4;
  const MAX_YAW = 1.4;
  let dragging = false;
  let typing = false;
  shader.state.canvas.addEventListener("contextmenu", e => e.preventDefault());
  shader.state.canvas.addEventListener("mousedown", e => {
    if (e.button === 2) {
      // botão direito
      dragging = true;
    }
    if (e.button === 0) {
      typing = true;
    }
  });
  window.addEventListener("mouseup", e => {
    if (e.button === 2) {
      dragging = false;
    }
    if (e.button === 0) {
      typing = false;
    }
  });
  shader.state.canvas.addEventListener("mousemove", e => {
    if (!dragging) return;
    yaw += e.movementX * sensitivity;
    pitch -= e.movementY * sensitivity;
    pitch = Math.max(MIN_PITCH, Math.min(MAX_PITCH, pitch));
    yaw = Math.max(MIN_YAW, Math.min(MAX_YAW, yaw));
  });

  function getCamDir() {
    return [
    Math.sin(yaw) * Math.cos(pitch),
    Math.sin(pitch),
    Math.cos(yaw) * Math.cos(pitch)];

  }

  function updateCam() {
    const dir = getCamDir();
    shader..........完整代码请登录后点击上方下载按钮下载查看