three.js实现3d海藻体物质

three.js random blob with simplex-noise.js and chroma.js

webgl, three, blob

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

let scene, camera, cameraCtrl, renderer;
let width, height, cx, cy;
let rndColor = chroma.random();

let conf = {
    nbObjects: 260,
    mainRadius: 20,
    objectRadius: 2.7,
    noiseCoef: 30,
    timeCoef: 40,
    mouseCoef: 30,
    scaleCoef: 3,
    minScale: 0,
    color1: '',
    color2: '',
    color3: ''
};

let objects;
const simplex = new SimplexNoise();
let gradient;

const mouse = new THREE.Vector2();
const mousePlane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
const mousePosition = new THREE.Vector3();
const raycaster = new THREE.Raycaster();

function init() {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 130;
    cameraCtrl = new THREE.OrbitControls(camera);
    cameraCtrl.autoRotate = true;
    cameraCtrl.autoRotateSpeed = 5;

renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

initRandomGradient();
    initScene();

const gui = new dat.GUI();
    gui.add(conf, 'noiseCoef', 0, 150, 1);
    gui.add(conf, 'timeCoef', 0, 100, 1);
    gui.add(conf, 'mouseCoef', 0, 100, 1);
    gui.add(conf, 'scaleCoef', 1, 5);
    gui.add(conf, 'minScale', 0, 1, 0.1);
    const updateGradient = v => {
        gradient = chroma.scale([conf.color1, conf.color2, conf.color3]);
    };
    gui.addColor(conf, 'color1').onChange(updateGradient).listen();
    gui.addColor(conf, 'color2').onChange(updateGradient).listen();
    gui.addColor(conf, 'color3').onChange(updateGradient).listen();
    gui.close();

onWindowResize();
    window.addEventListener('resize', onWindowResize, false);
    renderer.domElement.addEventListener('mousemove', updateMousePosition);
    renderer.domElement.addEventListener('mouseup', initRandomGradient);

animate();
};

function initRandomGradient() {
    const color = chroma.random();
    conf.color1 = color.set('hsl.l', rnd(0.5)).hex();
    conf.color2 = color.hex();
    conf.color3 = color.set('hsl.l', 0.7 + rnd(0.3)).hex();
    gradient = chroma.scale([conf.color1, conf.color2, conf.color3]);
}

function initScene() {
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xffffff);

this.initLights();

objects = [];
    const o3d = new THREE.Object3D(),
        o = new THREE.Vector3();
    let points = getFibonacciSpherePoints(conf.nbObjects, conf.mainRadius, false);
    let geometry = new THREE.SphereBufferGeometry(conf.objectRadius, 16, 16),
        material, mesh;
    for (let i = 0; i < conf.nbObjects; i++) {
        let p = points[i];
        material = new THREE.MeshLambertMaterial({
            color: 0x808080
        });
        mesh = new THREE.Mesh(geometry, material);
        mesh.position.z = -(conf.objectRadius - 0.2);

let group = new THREE.Object3D();
        group.mesh = mesh;
        group.add(mesh);
        group.position.set(p.x, p.y, p.z);
        group.lookAt(o);
        objects.push(group);
        o3d.add(group);
    }
    scene.add(o3d);
}

function initLights() {
    scene.add(new THREE.AmbientLight(0xaaaaaa));
    scene.add(new THREE.HemisphereLight(0x0000aa, 0xaa0000, 1));
}

function animate() {
    requestAnimationFrame(animate);

cameraCtrl.update();

let o, noise, scale;
    const time = Date.now() * conf.timeCoef / 200000;
    const coef = conf.noiseCoef / 2000,
        mcoef = conf.mouseCoef / 150;
    const mx = mouse.x * mcoef,
        my = mouse.y * mcoef;
    for (let i = 0; i < conf.nbObjects; i++) {
        o = objects[i];
        noise = simplex.noise3D(o.position.x * coef + mx + time, o.position.y * coef + my + time, o.position.z * coef + time);
        scale = conf.minScale + conf.scaleCoef * (1 + noise);
        o.scale.set(scale, scale, scale);
        o.mesh.material.color = new THREE.Color(gradient((1 + noise) / 2).hex());
    }

renderer.render(scene, camera);
};

function onWindowResize() {
    width = window.innerWidth;
    cx = width / 2;
    height = window.innerHeight;
    cy = height / 2;
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
    renderer.setSize(width, height);
}

function updateMousePosition(e) {
    const v = new THREE.Vector3();
    camera.getWorldDirection(v);
    v.normalize();
    mousePlane.normal = v;

mouse.x = e.clientX / width * 2 - 1;
    mouse.y = -(e.clientY / height) * 2 + 1;

raycaster.setFromCamera(mouse, camera);
    raycaster.ray.intersectPlane(mousePlane, mousePosition);
}

function getFibonacciSpherePoints(samples, radius, randomize) {
    samples = samples || 1;
    radius = radius || 1;
    randomize = randomize || true;
    let random = 1;
    if (randomize) {
        random = Math.random() * samples;
    }
    let points = [];
    let offset = 2 / samples;
    let increment = Math.PI * (3 - Math.sqrt(5));
    for (let i = 0; i < samples; i++) {
        let y = i * offset - 1 + offset / 2;
        let distance = Math.sqrt(1 - Math.pow(y, 2));
        let phi = (i + random) % samples * increment;
        let x = Math.cos(phi) * distance;
        let z = Math.sin(phi) * distance;
        x = x * radius;
        y = y * radius;
        z = z * radius;
        let point = {
            'x': x,
            'y': y,
            'z': z
        };

points.push(point);
    }
    return points;
}

function rnd(max, negative) {
    return negative ? Math.random() * 2 * max - max : Math.random() * max;
}

init();

编译

CSS

HTML

three.js random blob with simplex-noise.js and chroma.js

webgl, three, blob

编辑器支持Emmet

快捷键

three.js random blob with simplex-noise.js and chroma.js

webgl, three, blob

three.js使用三维查找表（3dlut）实现场景后处理特效

如何使用three.js实现物体爆炸动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：