webgl three.js 避水珠特效

waterfall with three.phenomenon

webgl, waterfall

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var _base = base(),
    renderer = _base.renderer,
    scene = _base.scene,
    camera = _base.camera,
    controls = _base.controls;
var _instance =
    instance(),
    mesh = _instance.mesh,
    uniforms = _instance.uniforms;

var sphere = new THREE.Mesh(
    new THREE.IcosahedronGeometry(1, 2),
    new THREE.MeshStandardMaterial({
        flatShading: false,
        roughness: 0.1,
        metalness: 0.7
    }));

scene.add(sphere);

var light = new THREE.PointLight("#EFEFEF", 10, 20, Math.PI * 0.25, 1, 2);
scene.add(light);

var progress = 0;

var colors = [];
for (var i = 0; i < 4; i += 1) {
    colors.push("#" +
        new THREE.Color().setHSL(0.75 + i / 3 * 0.25, 0.6, 0.7).getHexString());

}

document.querySelector(
    "a").
style.background = "linear-gradient(to right, " + colors.join(", ") + ")";

scene.add(mesh);

function render() {
    requestAnimationFrame(render);
    controls.update();

var p = uniforms.uProgress.value * 2 - 1;
    p = 1 - p * p;

var newColor = new THREE.Color().setHSL(0.75 + p * 0.25, 0.7, 0.4);
    sphere.material.emissive = newColor;
    light.color = newColor;

uniforms.uProgress.value += uniforms.uProgress.value >= 1 ? -1 : 1 / 180;
    renderer.render(scene, camera);
}

render();

// === INSTANCE ===

function instance() {
    var geometry = new THREE.OctahedronGeometry(1, 0);

var material = new THREE.MeshStandardMaterial({
        color: "#EFEFEF",
        emissive: "#212121",
        flatShading: true,
        roughness: 0.1,
        metalness: 0.7
    });

var castShadow = false;

var S = 80;

var positions = [];
    for (var x = -S; x < S; x += 1) {
        for (var z = -S; z < S; z += 1) {
            positions.push(x / (S / 20) + 1, z / (S / 20) + 1);
        }
    }

var multiplier = positions.length / 2;

var duration = 0.3;

var attributes = [{
            name: "aPositionStart",
            data: function data(i) {
                return [positions[i * 2], 20, positions[i * 2 + 1]];
            },

size: 3
        },

{
            name: "aPositionEnd",
            data: function data(i) {
                return [positions[i * 2], -20, positions[i * 2 + 1]];
            },

size: 3
        },

{
            name: "aOffset",
            data: function data(i, total) {
                return [
                    Math.random() * (total * ((1 - duration) / (multiplier - 1)))
                ];
            },

size: 1
        }
    ];

var uniforms = {
        uProgress: {
            value: 0
        },

uPosition: {
            value: [0, 0, 0]
        }
    };

var vertex = "\n    attribute vec3 aPositionStart;\n    attribute vec3 aPositionEnd;\n    attribute float aOffset;\n    \n    uniform vec3 uPosition;\n    uniform float uProgress;\n\n    vec4 quatFromAxisAngle(vec3 axis, float angle) {\n      float halfAngle = angle * 0.5;\n      return vec4(axis.xyz * sin(halfAngle), cos(halfAngle));\n    }\n\n    vec3 rotateVector(vec4 q, vec3 v) {\n      return v + 2.0 * cross(q.xyz, cross(q.xyz, v) + q.w * v);\n    }\n\n    float easeInOutSin(float t){\n      return (1.0 + sin(" +

Math.PI + " * t - " + Math.PI + " / 2.0)) / 2.0;\n    }\n\n    void main(){\n      float tProgress = easeInOutSin(min(1.0, max(0.0, (uProgress - aOffset)) / " +

duration + "));\n      vec3 newPosition = mix(aPositionStart, aPositionEnd, tProgress);\n\n      vec4 quatX = quatFromAxisAngle(vec3(1.0, 0.0, 0.0), " +

Math.PI / 2 + ");\n      vec3 basePosition = rotateVector(quatX, position);\n  \n      float scale = tProgress * 2.0 - 1.0;\n      scale = 1.0 - scale * scale;\n      basePosition *= scale;\n      basePosition *= min(1.0, max(0.0, -10.0 + distance(vec3(uPosition.x, uPosition.y, newPosition.z), newPosition)));\n      gl_Position = newPosition + basePosition;\n    }\n  ";

var instance = new THREE.Phenomenon({
        geometry: geometry,
        multiplier: multiplier,
        material: material,
        castShadow: castShadow,
        attributes: attributes,
        uniforms: uniforms,
        vertex: vertex
    });

return instance;
}

// === STRUCTURE ===

function base() {
    var renderer = new THREE.WebGLRenderer({
        antialias: true
    });

renderer.setClearColor(0x212121, 0);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(1);

document.querySelector("body").appendChild(renderer.domElement);

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(
        40,
        window.innerWidth / window.innerHeight,
        0.1,
        10000);

camera.position.set(0, 0, 80);
    camera.lookAt(scene.position);
    scene.add(camera);

var ambientLight = new THREE.AmbientLight("#ffffff", 0.1);
    scene.add(ambientLight);

var emissive = "#" + new THREE.Color().setHSL(0.5, 0.7, 0.4).getHexString();

var box = new THREE.Mesh(
        new THREE.BoxGeometry(440, 440, 440),
        new THREE.MeshPhongMaterial({
            emissive: "#212121",
            side: THREE.BackSide
        }));

scene.add(box);

var light = new THREE.SpotLight(0xffffff, 1, 80, Math.PI * 0.25, 1, 2);
    light.position.set(0, 30, 5);

scene.add(light);

window.addEventListener(
        "resize",
        function() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        },
        false);

var controls = new THREE.OrbitControls(camera);

return {
        renderer: renderer,
        scene: scene,
        camera: camera,
        controls: controls
    };
}

function getArrayWithNoise(array, noise) {
    return array.map(function(item) {
        return item + getRandomBetween(noise);
    });
}

function getRandomBetween(value) {
    var floor = -value;
    return floor + Math.random() * value * 2;
}

if (
    navigator.userAgent.match(/(iPod|iPhone|iPad)/) &&
    navigator.userAgent.match(/AppleWebKit/)) {
    document.body.insertAdjacentHTML("beforeend", "<span>Tap for 60FPS</span>");
    var span = document.querySelector("span");
    window.addEventListener("touchstart", function() {
        span.outerHTML = "";
    });
}

编译

CSS

HTML

waterfall with three.phenomenon

webgl, waterfall

编辑器支持Emmet

快捷键

waterfall with three.phenomenon

webgl, waterfall

webgl three.js颜色流水特效

如何使用three.js Phenomenon插件来创建基于webgl的页面滚动平滑过渡特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：