webgl three.js 云团物质模拟着色器代码

webgl blob shader codes，可在线调整的3D团状物。

webgl, cloud, blob, shader

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

// Three JS
window.addEventListener('load', init, false);

function init() {
    createWorld();
    createGUI();
    createPrimitive();
    animation();
}

var Theme = {
    primary: 0xFFFFFF,
    secundary: 0x292733,
    danger: 0xFF0000,
    darker: 0x000000
};

//--------------------------------------------------------------------
var scene, camera, renderer, container;
var _width, _height;
var _primitive;
var shapeGroup = new THREE.Group();
var start = Date.now();

function createWorld() {
    _width = window.innerWidth;
    _height = window.innerHeight;
    //---
    scene = new THREE.Scene();
    scene.background = new THREE.Color(Theme.secundary);
    //---
    camera = new THREE.PerspectiveCamera(35, _width / _height, 1, 1000);
    camera.position.set(0, 0, 16);
    //---
    renderer = new THREE.WebGLRenderer({
        antialias: false,
        alpha: false
    });
    renderer.setSize(_width, _height);
    renderer.shadowMap.enabled = true;
    //---
    document.body.appendChild(renderer.domElement);
    //---
    window.addEventListener('resize', onWindowResize, false);
}

scene.add(shapeGroup);
}

function createPrimitive() {
    _primitive = new primitiveElement();
}

TweenMax.to(this.perlin, 1, {
            size: 0.7,
            waves: 0.6,
            complex: 1.0,
            displace: 0.3,
            eqcolor: 9.0,
            rcolor: 0.85,
            gcolor: 0.05,
            bcolor: 0.32,
            ease: Quart.easeInOut
        });
    },
    cloud: function() {
        this.perlin.redhell = true; // 10 1 0.1 1.2
        //this.perlin.speed = 0.1;

TweenMax.to(this.perlin, 1, {
            size: 1.0,
            waves: 20.0,
            complex: 0.1,
            displace: 0.1,
            eqcolor: 4.0,
            rcolor: 1.5,
            gcolor: 0.7,
            bcolor: 1.5,
            ease: Quart.easeInOut
        });
    },
    tornasol: function() {
        this.perlin.redhell = true; // 10 1 0.1 1.2
        //this.perlin.speed = 0.25;

TweenMax.to(this.perlin, 1, {
            size: 1.0,
            waves: 3.0,
            complex: 0.65,
            displace: 0.5,
            eqcolor: 9.5,
            rcolor: 1.5,
            gcolor: 1.5,
            bcolor: 1.5,
            ease: Quart.easeInOut
        });
    }
}

function createGUI() {
        var gui = new dat.GUI();

var perlinGUI = gui.addFolder('Shape Setup');
        perlinGUI.add(options, 'perlinRandom').name('• Random Shape');
        perlinGUI.add(options.perlin, 'speed', 0.1, 1.0).name('Speed').listen();
        perlinGUI.add(options.perlin, 'size', 0.0, 3.0).name('Size').listen();
        //perlinGUI.add(options.perlin, 'decay', 0.0, 1.0).name('Decay').listen();
        perlinGUI.add(options.perlin, 'waves', 0.0, 20.0).name('Waves').listen();
        perlinGUI.add(options.perlin, 'complex', 0.1, 1.0).name('Complex').listen();
        perlinGUI.add(options.perlin, 'displace', 0.1, 2.5).name('Displacement').listen();
        //perlinGUI.open();

var colorGUI = gui.addFolder('Color');
        colorGUI.add(options, 'random').name('• Random colors');
        colorGUI.add(options, 'normal').name('• Normal colors');
        colorGUI.add(options, 'darker').name('• Dark colors');
        colorGUI.add(options.perlin, 'eqcolor', 0.0, 30.0).name('Hue').listen();
        colorGUI.add(options.perlin, 'rcolor', 0.0, 2.5).name('R').listen();
        colorGUI.add(options.perlin, 'gcolor', 0.0, 2.5).name('G').listen();
        colorGUI.add(options.perlin, 'bcolor', 0.0, 2.5).name('B').listen();
        colorGUI.add(options.perlin, 'redhell', true).name('Electroflow');

//colorGUI.open();

gui.add(options, 'volcano').name('• Volcano');
        gui.add(options, 'tornasol').name('• Tornasol');
        gui.add(options, 'cloud').name('• Cotton Candy');
        gui.add(options.perlin, 'points', true).name('Points');
    }
    //--------------------------------------------------------------------
function animation() {
    var performance = Date.now() * 0.003;
    //---
    //_primitive.shape.visible = !options.perlin.points;
    _primitive.point.visible = options.perlin.points;
    //---
    mat.uniforms['time'].value = (options.perlin.speed / 1000) * (Date.now() - start);

mat.uniforms['pointscale'].value = options.perlin.perlins;
    mat.uniforms['decay'].value = options.perlin.decay;
    mat.uniforms['size'].value = options.perlin.size;
    mat.uniforms['displace'].value = options.perlin.displace;
    mat.uniforms['complex'].value = options.perlin.complex;
    mat.uniforms['waves'].value = options.perlin.waves;
    mat.uniforms['fragment'].value = options.perlin.fragment;

mat.uniforms['redhell'].value = options.perlin.redhell;
    mat.uniforms['eqcolor'].value = options.perlin.eqcolor;
    mat.uniforms['rcolor'].value = options.perlin.rcolor;
    mat.uniforms['gcolor'].value = options.perlin.gcolor;
    mat.uniforms['bcolor'].value = options.perlin.bcolor;
    //---
    requestAnimationFrame(animation);
    renderer.render(scene, camera);
}

编译

CSS

HTML

webgl blob shader codes，可在线调整的3D团状物。

webgl, cloud, blob, shader

编辑器支持Emmet

快捷键

webgl blob shader codes，可在线调整的3D团状物。

webgl, cloud, blob, shader

WebGL Three.js 彩虹液态物质（液体）动画特效的着色器代码

学习使用webgl shader（glsl代码）来实现3D团状类星云物质特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：