three.js万花筒

下载代码

html

css

分享到微信朋友圈

html

#define TWO_PI 6.2831853072
    	#define PI 3.14159265359

precision highp float;
    	uniform vec2 resolution;
    	uniform float time;

const float displace = 1.;
    	const float gridSize = 6.;
    	const int layers = 1;
    	const float detail = 1.0;
    	const float wave = 5.0;

vec2 rotate(vec2 v, float angle) {
    		float c = cos(angle);
    		float s = sin(angle);
    		return v * mat2(c, -s, s, c);
    	}

vec3 coordToHex(vec2 coord, float scale, float angle) {
    		vec2 c = rotate(coord, angle);
    		float q = (1.0 / 3.0 * sqrt(3.0) * c.x - 1.0 / 3.0 * c.y) * scale;
    		float r = 2.0 / 3.0 * c.y * scale;
    		return vec3(q, r, -q - r);
    	}

vec3 hexToCell(vec3 hex, float m) {
    		return sin(hex / m) * 2.0 - 1.0;
    	}

float absMax(vec3 v) {
    		return max(max(abs(v.x), abs(v.y)), abs(v.z));
    	}

float nsin(float value) {
    		return sin(value * TWO_PI) * 0.5 + 0.5;
    	}

float hexToFloat(vec3 hex, float amt) {
    		return mix(absMax(hex), 1.0 - length(hex) / sqrt(3.0), amt);
    	}

float calc(vec3 hex, float time, float len) {
    		float value = 0.0;
    		for (int i = 0; i < layers; i++) {
    			vec3 cell = hexToCell(hex, 1.0);
    			value += nsin(
    				hexToFloat(
    					cell,
    					nsin(len * wave + time + float(i) / float(layers))
    				) * detail + nsin(time * 0.5)
    			);
    		}

return value / float(layers);
    	}

void main(void) {
    		vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y);
    		float t = time *0.02;

float rgb[3];
    		float len = 1.0 - length(uv)*0.03;

float zoom = nsin(t*0.1) + len *10.0;
    		float angle = TWO_PI * nsin(t * 0.05);
    		vec3 hex = coordToHex(uv, gridSize*zoom, angle);

for (int i = 0; i < 3; i++) {
    			float t2 = t + float(i) * displace;
          hex[i] += 0.2;
    			//rgb[i] = pow(calc(hex, t2, len), float(i)*0.5) * (0.2 + 0.8 * sin(PI * len * 0.5));
          rgb[i] = pow(calc(hex, t * displace, len),5.0) * (0.2 + 0.8 * sin(PI * len * 0.5)) * 2. - 1.0;
    		}

gl_FragColor = vec4(
    			rgb[0],
    			rgb[1],
    			rgb[2],
    			1.0
    		);
    	}

</script>

css

JavaScript

var container;
var camera, scene, renderer;
var uniforms;

init();
animate();

function init() {
    container = document.getElementById('container');

camera = new THREE.Camera();
    camera.position.z = 1;

scene = new THREE.Scene();

var geometry = new THREE.PlaneBufferGeometry(2, 2);

uniforms = {
        time: {
            type: "f",
            value: 1.0
        },
        resolution: {
            type: "v2",
            value: new THREE.Vector2()
        }
    };

var material = new THREE.ShaderMaterial({
        uniforms: uniforms,
        vertexShader: document.getElementById('vertexShader').textContent,
        fragmentShader: document.getElementById('fragmentShader').textContent
    });

var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio(window.devicePixelRatio);

container.appendChild(renderer.domElement);

onWindowResize();
    window.addEventListener('resize', onWindowResize, false);

}

function onWindowResize(event) {
    renderer.setSize(window.innerWidth, window.innerHeight);
    uniforms.resolution.value.x = renderer.domElement.width;
    uniforms.resolution.value.y = renderer.domElement.height;
}

function animate() {
    requestAnimationFrame(animate);
    render();
}

function render() {
    uniforms.time.value += 0.05;
    renderer.render(scene, camera);
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg