three.js shader绘制黑白三角形模式

draw black and white triangles wall patterns in three.js

three, shader, pattern

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1169
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

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 = {
        u_time: {
            type: "f",
            value: 1.0
        },
        u_resolution: {
            type: "v2",
            value: new THREE.Vector2()
        },
        u_mouse: {
            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);

document.onmousemove = function(e) {
        uniforms.u_mouse.value.x = e.pageX
        uniforms.u_mouse.value.y = e.pageY
    }
}

function onWindowResize(event) {
    renderer.setSize(container.offsetWidth, container.offsetHeight);
    uniforms.u_resolution.value.x = renderer.domElement.width;
    uniforms.u_resolution.value.y = renderer.domElement.height;
}

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

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

编译

CSS

HTML

#define PI 3.14159265358979323846

uniform vec2 u_resolution;
uniform float u_time;

vec2 rotate2D (vec2 _st, float _angle) {
    _st -= 0.5;
    _st =  mat2(cos(_angle),-sin(_angle),
                sin(_angle),cos(_angle)) * _st;
    _st += 0.5;
    return _st;
}

vec2 tile (vec2 _st, float _zoom) {
    _st *= _zoom;
    return fract(_st);
}

vec2 rotateTilePattern(vec2 _st){

//  Scale the coordinate system by 2x2
    _st *= 2.0;

//  Give each cell an index number
    //  according to its position
    float index = 0.0;
    index += step(1., mod(_st.x,2.0));
    index += step(1., mod(_st.y,2.0))*2.0;

//      |
    //  2   |   3
    //      |
    //--------------
    //      |
    //  0   |   1
    //      |

// Make each cell between 0.0 - 1.0
    _st = fract(_st);

// Rotate each cell according to the index
    if(index == 1.0){
        //  Rotate cell 1 by 90 degrees
        _st = rotate2D(_st,PI*0.5);
    } else if(index == 2.0){
        //  Rotate cell 2 by -90 degrees
        _st = rotate2D(_st,PI*-0.5);
    } else if(index == 3.0){
        //  Rotate cell 3 by 180 degrees
        _st = rotate2D(_st,PI);
    }

return _st;
}

void main (void) {
    vec2 st = gl_FragCoord.xy/u_resolution.xy;

st = tile(st,3.0);
    st = rotateTilePattern(st);

// Make more interesting combinations
    // st = tile(st,2.0);
    // st = rotate2D(st,-PI*u_time*0.25);
    // st = rotateTilePattern(st*2.);
    // st = rotate2D(st,PI*u_time*0.25);

// step(st.x,st.y) just makes a b&w triangles
    // but you can use whatever design you want.
    gl_FragColor = vec4(vec3(step(st.x,st.y)),1.0);
}
</script>

draw black and white triangles wall patterns in three.js

three, shader, pattern

编辑器支持Emmet

快捷键

draw black and white triangles wall patterns in three.js

three, shader, pattern

three.js shader绘制黑白斜方格模式

three.js shader绘制泼墨（液体泼溅）模式

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：