three.js shader生成泰森多边形模式（基于Voronoi噪音算法）

Simple Voronoi noise shader codes in three.js，和Perlin Noise不同的是，这是基于随机点距离生成的蜂窝状图形。

three, shader, pattern

《使用js把svg图形转成png图像》申请公开！

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

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

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

vec2 random2( vec2 p ) {
    return fract(sin(vec2(dot(p,vec2(127.1,311.7)),dot(p,vec2(269.5,183.3))))*43758.5453);
}

void main() {
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    st.x *= u_resolution.x/u_resolution.y;
    vec3 color = vec3(.0);

// Scale
    st *= 5.;

// Tile the space
    vec2 i_st = floor(st);
    vec2 f_st = fract(st);

float m_dist = 10.;  // minimun distance
    vec2 m_point;        // minimum point

for (int j=-1; j<=1; j++ ) {
        for (int i=-1; i<=1; i++ ) {
            vec2 neighbor = vec2(float(i),float(j));
            vec2 point = random2(i_st + neighbor);
            point = 0.5 + 0.5*sin(u_time + 6.2831*point);
            vec2 diff = neighbor + point - f_st;
            float dist = length(diff);

if( dist < m_dist ) {
                m_dist = dist;
                m_point = point;
            }
        }
    }

// Assign a color using the closest point position
    color += dot(m_point,vec2(.3,.6));

// Add distance field to closest point center
    // color.g = m_dist;

// Show isolines
    color -= abs(sin(40.0*m_dist))*0.07;

// Draw cell center
    color += 1.-step(.05, m_dist);

// Draw grid
    color.r += step(.98, f_st.x) + step(.98, f_st.y);

gl_FragColor = vec4(color,1.0);
}
</script>

Simple Voronoi noise shader codes in three.js，和Perlin Noise不同的是，这是基于随机点距离生成的蜂窝状图形。

three, shader, pattern

编辑器支持Emmet

快捷键

Simple Voronoi noise shader codes in three.js，和Perlin Noise不同的是，这是基于随机点距离生成的蜂窝状图形。

three, shader, pattern

three.js gltf扩展（draco压缩，pbr，binary）模型加载代码示例

three.js透明阴影（transparency shadow）代码示例

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：