three实现三维湍急的漩涡黑洞动画效果代码-html代码-BFW代码库

three实现三维湍急的漩涡黑洞动画效果代码

代码语言：html

所属分类：三维

代码描述：three实现三维湍急的漩涡黑洞动画效果代码

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

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

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

  
  
<style>
body{
  margin: 0;
}
</style>

  
  
</head>

<body translate="no">
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.139.js"></script>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.126.js"></script>
      <script type="module">


const canvasContainer = document.getElementById("container");

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000);

camera.position.set(0, -200, 0);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x080808);
document.body.appendChild(renderer.domElement);

new THREE.OrbitControls(camera, renderer.domElement);

window.addEventListener("resize", () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

const textureLoader = new THREE.TextureLoader();
textureLoader.load(
'https://images.unsplash.com/photo-1631519952398-5b1d76b946e8?q=80&w=3087&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
function (texture) {
  const vertexShader = `
      varying vec2 vUv;
      uniform float u_time;
      varying float vElevation;
      varying vec3 vNormal;

      float oscillate(float time, float minVal, float maxVal) {
          float sineWave = sin(time);
          float normalizedSine = (sineWave + 1.0) / 2.0;
          return mix(minVal, maxVal, normalizedSine);
      }
        
      void main() {
          vUv = uv;
          vNormal = normalize(normalMatrix * normal);
          vec3 newPosition = vec3(position.x, position.y * oscillate(u_time/4.0, 4.0,15.0), position.z);
          gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
      }
    `;

  const fragmentShader = `
      varying vec2 vUv;
      uniform sampler2D u_texture;
      uniform float u_time;
      varying vec3 vNormal;

      vec3 palette(float t) {
          vec3 a = vec3(0.5, 0.5, 0.5);
          vec3 b = vec3(0.9, 0.5, 0.5);
          vec3 c = vec3(1.0, 1.0, 1.0);
          vec3 d = vec3(0.25, 0.4, 0.55);

          return a + b * cos(6.28318 * (c * t + d));
      }
      
      void main().........完整代码请登录后点击上方下载按钮下载查看