JSFiddle - React, Tailwind, and code Playground
by SQShu
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
margin: 0px;
background-color: #000000;
overflow: hidden;
}
</style>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body, #container {
overflow: hidden;
}
</style>
<script src = "https://mimicproject.com/libs/maximilian.js"></script>
</head>
<body>
<div id="container"></div>
<script id="vertexShader" type="x-shader/x-vertex">
void main() {
gl_Position = vec4(position,1.0) ;
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
//============================================================
//PUT YOUR GLSL CODE HERE
//============================================================
uniform float time;
uniform vec2 resolution;
uniform vec2 mouse;
uniform float myWave;
float iTime;
vec3 iResolution;
vec3 iMouse;
#define time stemu_time
#define resolution stemu_resolution
#define mouse stemu_mouse
#define FRACTAL_ITER 4 //🌟change 方块迭代次数
#define STEPS 150
#define EPSILON 0.004
// rotation
mat2 rot( in float a ) {
float c = cos(a);
float s = sin(a);
return mat2(c,s,-s,c);
}
// distance to a menger sponge of n = 1
float crossDist( in vec3 p ) {
vec3 absp = abs(p);
// get the distance to the closest axis
float maxyz = max(absp.y, absp.z);
float maxxz = max(absp.x, absp.z);
float maxxy = max(absp.x, absp.y);
float cr = 1.0 - (step(maxyz, absp.x)*maxyz+step(maxxz, absp.y)*maxxz+step(maxxy, absp.z)*maxxy);
// float cr = sin(iTime)*1.1 - cos(step(maxyz, absp.x)*maxyz+step(maxxz, absp.y)*m
// float cr = pow(0.2,iTime)*1.1 - cos(step(maxyz, absp.x)*maxyz+step(maxxz, absp.y)*m
// cube
float cu = max(maxxy, absp.z) - 3.0;
// remove the cross from the cube
return max(cr,...