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