three+webgl实现三维无限沙丘沙漠动画代码

代码语言:html

所属分类:三维

代码描述:three+webgl实现三维无限沙丘沙漠动画代码

代码标签: three webgl 三维 无限 沙丘 沙漠 动画 代码

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

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

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

  
  
<style>
body {
	margin: 0;
	overflow: hidden;
	background: #000;
}
canvas {
	display: block;
	width: 100vw;
	height: 100vh;
}
.lil-gui {
	--background-color: rgba(20, 20, 20, 0.9);
}
</style>


</head>

<body translate="no">
  <script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three@0.160.0/build/three.module.js",
				"lil-gui": "https://unpkg.com/lil-gui@0.19.1/dist/lil-gui.esm.min.js"
		}
	}
</script>
  
    <script  type="module">
import * as THREE from "three";
import GUI from "lil-gui";

const vertexShader = `
          void main() {
            gl_Position = vec4(position.xy, 0.0, 1.0);
          }
        `;

const fragmentShader = `
        uniform vec3 iResolution;
        uniform float iTime;
        uniform vec4 iMouse;
        uniform vec2 uCameraDir;
        uniform float uCameraSpeed;
        uniform float uCameraZ;
        uniform float uCameraHeight;
        uniform vec3 uSunDir;
        uniform vec3 uSandColor;
        uniform vec3 uSkyColor;
        uniform float uExposure;
        uniform float uSunIntensity;

        #define RAY_MAX_STEPS 150
        #define RAY_MAX_DISTANCE 200.0
        #define OBJECT_MIN_SURFACE_DISTANCE 0.01
        #define RAY_MAX_STEPS_SHADOW RAY_MAX_STEPS
        #define OBJECT_MIN_SURFACE_DISTANCE_SHADOW 0.04
        #define OBJECT_MIN_SURFACE_DISTANCE_SHADOW_OFFSET (OBJECT_MIN_SURFACE_DISTANCE_SHADOW*1.1)

        #define PI	3.1415926535897932384626433832795

        #define DEBUG_RAY_DITHER
        #define DEBUG_GRAIN_VIGNETTE
        #define DEBUG_DYNAMIC_EXPOSURE
        #define DEBUG_SAND_RIPPLES
        #define DEBUG_SAND_SHADING
        #define DEBUG_SAND_3POINT_NORMAL
        #define DEBUG_CAMERA_FLY
        #define DEBUG_SPECULAR
        #define DEBUG_SUN_RAYS_RENDER
        #define DEBUG_FOG_RENDER
        #define DEBUG_DUST_RENDER
        #define DEBUG_SAND_RENDER
        #define DEBUG_CLOUD_RENDER
        #define DEBUG_MOUNTAIN_RENDER

        #define MAT_SKY 0
        #define MAT_GROUND 1
        #define MAT_SPHERE_1 2
        #define MAT_SPHERE_2 3

        #define LIGHT_SUN 0
        #define LIGHT_SKY 1

        #define SAND_COLOUR uSandColor

        struct camera {
            vec3 origin, forward, right, up;
            mat3 rotationMatrix;
            float roll, pitch, yaw;
            float zoom;
        };

        struct ray {
            vec3 origin, direction;
        };

        struct rayMarchHit {
            vec3 origin, surfaceNormal;
            float distance, dust;
            int materialId;
            int iteration;
        };

        struct sphere {
            vec3 origin;
            float radius;
        };

        struct light {
            vec3 origin, colour;
         .........完整代码请登录后点击上方下载按钮下载查看

网友评论0