threejs实现360度全景田间多个水滴上升动画效果代码-html代码-BFW代码库

threejs实现360度全景田间多个水滴上升动画效果代码

代码语言：html

所属分类：三维

代码描述：threejs实现360度全景田间多个水滴上升动画效果代码

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

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

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/aqua-1.5.5.css">
  
<style>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}
</style>



</head>

<body>
  <div class="relative w-screen h-screen">
  <div class="float-bubbles w-full h-full"></div>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.126.js"></script>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Stats-16.js"></script>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.133.js"></script>

  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/GLTFLoader.js"></script>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/FBXLoader.js"></script>
      <script type="module">
import ky from "//repo.bfw.wiki/bfwrepo/js/module/kyouka/kyouka.1.2.5.js";
const calcAspect = (el) => el.clientWidth / el.clientHeight;
const getNormalizedMousePos = (e) => {
    return {
        x: (e.clientX / window.innerWidth) * 2 - 1,
        y: -(e.clientY / window.innerHeight) * 2 + 1
    };
};
const floatBubblesNoiseVertexShader = `
#define GLSLIFY 1
//
// Description : Array and textureless GLSL 2D/3D/4D simplex
//               noise functions.
//      Author : Ian McEwan, Ashima Arts.
//  Maintainer : ijm
//     Lastmod : 20110822 (ijm)
//     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
//               Distributed under the MIT License. See LICENSE file.
//               https://github.com/ashima/webgl-noise
//

vec3 mod289(vec3 x) {
  return x - floor(x * (1.0 / 289.0)) * 289.0;
}

vec4 mod289(vec4 x) {
  return .........完整代码请登录后点击上方下载按钮下载查看