使用three svgloader实现svg图像和3D粘稠物混合特效

以svg图为背景，在图中加入3d模型（本例是口香糖状的多面体）和动画。

webgl, three, svg, mix

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

let container,
    camera,
    controls,
    scene,
    mesh,
    renderer,
    artwork;

let gum,
    gum2,
    gum3,
    gum4,
    gum5;

function init() {

container = document.querySelector('#scene-container');

scene = new THREE.Scene();
    scene.background = new THREE.Color(0x9b6252);

const currentURL = '/uploads/1910/no-gum-chewing-in-class.svg';

createCamera();
    createControls();
    createLights();
    createSVG(currentURL);
    createMaterials();
    createMeshes();
    createRenderer();

renderer.setAnimationLoop(() => {

// update();
        render();

});

}

function createCamera() {

camera = new THREE.PerspectiveCamera(
        35,
        container.clientWidth / container.clientHeight,
        0.1,
        100,
    );

camera.position.set(-2, 5, 16.5);

}

function createControls() {

controls = new THREE.OrbitControls(camera, container);

}

function createLights() {

const ambientLight = new THREE.HemisphereLight(
        0xddeeff,
        0x202020,
        6,
    );

const mainLight = new THREE.DirectionalLight(0xffffff, 5);
    mainLight.position.set(5, 20, 20);

scene.add(ambientLight, mainLight);

}

function createMaterials() {

const black = new THREE.MeshStandardMaterial({
        color: 0x000000,
        roughness: 0.3,
        metalness: 0.6,
        flatShading: true
    });
    black.color.convertSRGBToLinear();

const seagreen = new THREE.MeshStandardMaterial({
        color: 0x00B5CC,
        roughness: 0.1,
        metalness: 0.6,
        flatShading: true
    });
    seagreen.color.convertSRGBToLinear();

const brick = new THREE.MeshStandardMaterial({
        color: 0xc0392b,
        roughness: 0.1,
        metalness: 0.6,
        flatShading: true
    });
    brick.color.convertSRGBToLinear();

const lemon = new THREE.MeshStandardMaterial({
        color: 0xe87e04,
        roughness: 0.1,
        metalness: 0.6,
        flatShading: true
    });
    lemon.color.convertSRGBToLinear();

const green = new THREE.MeshStandardMaterial({
        color: 0xf7d63,
        roughness: 0.1,
        metalness: 0.6,
        flatShading: true
    });
    green.color.convertSRGBToLinear();

const bordeaux = new THREE.MeshStandardMaterial({
        color: 0x55091d,
        roughness: 0.2,
        metalness: 0.6,
        flatShading: true
    });
    bordeaux.color.convertSRGBToLinear();

const bubblegum = new THREE.MeshStandardMaterial({
        color: 0xe58484,
        roughness: 0.1,
        metalness: 0.4,
        flatShading: true
    });
    bubblegum.color.convertSRGBToLinear();

const textureLoader = new THREE.TextureLoader();
    const texture = textureLoader.load('https://s3-us-west-2.amazonaws.com/s.cdpn.io/911157/wine-texture-bigger.jpg');
    texture.encoding = THREE.sRGBEncoding;
    texture.anisotropy = 16;

const marbled = new THREE.MeshStandardMaterial({
        map: texture,
    });

return {

lemon,
        brick,
        marbled,
        bordeaux,
        seagreen,
        green,
        black,
        bubblegum,

};

}

function createGeometries() {

const box = new THREE.BoxBufferGeometry(2, 2, 2);
    const boxPlane = new THREE.BoxBufferGeometry(6, 4.25, 0.15);
    const torus = new THREE.TorusGeometry(0.5, 0.1, 16, 50);
    const torusSmall = new THREE.TorusGeometry(0.2, 0.05, 16, 50);
    const ball = new THREE.SphereBufferGeometry(0.5, 32, 32);
    const cone = new THREE.ConeBufferGeometry(1, 4, 64);
    const cylinder = new THREE.CylinderGeometry(0.08, 0.08, 6, 32);
    const cylinderBig = new THREE.CylinderGeometry(0.2, 0.2, 3, 8);
    const cylinderSmall = new THREE.CylinderGeometry(0.05, 0.05, 0.5, 32);
    const sphere = new THREE.SphereGeometry(2, 256, 256);

return {

box,
        boxPlane,
        torus,
        torusSmall,
        ball,
        cone,
        cylinder,
        cylinderBig,
        cylinderSmall,
        sphere

}
}

function createMeshes() {

artwork = new THREE.Group();
    scene.add(artwork);

const materials = createMaterials();
    const geometries = createGeometries();

// WINDOW LINES
    const line = new THREE.Mesh(geometries.cylinder, materials.black);
    line.position.x = -0.8;

const lineHorizontal = line.clone();
    lineHorizontal.position.set(2.75, 2.925, 0);
    lineHorizontal.rotation.z = Math.PI / 2;
    lineHorizontal.scale.y = 1.2;

const lineHorizontal2 = lineHorizontal.clone();
    lineHorizontal2.position.y = 2.1;

const lineHorizontal3 = lineHorizontal.clone();
    lineHorizontal3.position.y = -2.925;

const lineVertical = line.clone();
    lineVertical.position.x = 6.3;

// PENCIL
    const pencil1 = new THREE.Mesh(geometries.cylinderBig, materials.bordeaux);
    pencil1.position.set(5.5, 1, 0);
    pencil1.rotation.z = -Math.PI / 3;

// WINDOW SIGNS
    const torusSmall = new THREE.Mesh(geometries.torusSmall, materials.seagreen);
    torusSmall.position.y = 2.5;
    torusSmall.position.x = -0.2;

const cylinderSmall = new THREE.Mesh(geometries.cylinderSmall, materials.seagreen);
    cylinderSmall.position.set(1.2, 2.5, 0);
    cylinderSmall.rotation.z = Math.PI / 4;

const cylinderSmall2 = cylinderSmall.clone();
    cylinderSmall2.rotation.z = -Math.PI / 4;

const cylinderSmall3 = cylinderSmall.clone();
    cylinderSmall3.position.set(0.5, 2.35, 0);
    cylinderSmall3.rotation.z = Math.PI / 2;

// WINDOW WITH SIGNS
    const windowGroup = new THREE.Group();
    windowGroup.add(line, lineHorizontal, lineHorizontal2, lineHorizontal3, lineVertical, torusSmall, cylinderSmall, cylinderSmall2, cylinderSmall3);
    windowGroup.position.x = -2.5;

// CHEWING GUM
    gum = new THREE.Mesh(geometries.sphere, materials.bubblegum);
    gum.position.x = 3.5;
    gum.position.y = -0.25;

gum2 = gum.clone();
    gum2.position.set(-4.75, 1.6, 0);
    gum2.scale.set(0.4, 0.4, 0.4);

gum3 = gum2.clone();
    gum3.position.x = 7;

gum4 = gum2.clone();
    gum4.position.set(-3.85, 4.25, 0);

gum5 = gum2.clone();
    gum5.position.set(4.75, 4.15, 0);

const cone1 = new THREE.Mesh(geometries.cone, materials.black);
    cone1.position.set(6.5, -1, 1.5);
    cone1.rotation.y = Math.PI;

const cone2 = new THREE.Mesh(geometries.cone, materials.marbled);
    cone2.position.set(-7, 0, -2);
    cone2.rotation.y = Math.PI;

const ball1 = new THREE.Mesh(geometries.ball, materials.black);
    ball1.position.set(-5, 1, 0);
    ball1.scale.set(1.1, 1.1, 0.35);

const ball2 = new THREE.Mesh(geometries.ball, materials.green);
    ball2.position.set(-5.5, -0.1, 0);
    ball2.scale.set(1.5, 1.5, 1.5);

const ball3 = new THREE.Mesh(geometries.ball, materials.lemon);
    ball3.position.set(-4.4, 2.5, 0.5);
    ball3.scale.set(0.75, 0.75, 0.5);

const ballBig = new THREE.Mesh(geometries.ball, materials.green);
    ballBig.position.set(6.5, -1, 1.75);
    ballBig.scale.set(2.5, 2.5, 1);

const ballSmall = new THREE.Mesh(geometries.ball, materials.brick);
    ballSmall.position.set(4.25, -3.2, 0);
    ballSmall.scale.set(1.25, 1.25, 1.25);

const ballSmall2 = ballSmall.clone();
    ballSmall2.position.x = -8;

const box2 = new THREE.Mesh(geometries.box, materials.marbled);
    box2.position.set(-5.5, -2.5, 0);
    box2.scale.set(0.75, 0.75, 1);
    box2.rotation.y = Math.PI / 4;

const box3 = new THREE.Mesh(geometries.box, materials.black);
    box3.position.set(-5.5, -3.425, 0);
    box3.scale.set(0.75, 0.15, 1);
    box3.rotation.y = Math.PI / 4;

const box4 = box3.clone();
    box4.position.y = -1.6;

const box6 = new THREE.Mesh(geometries.box, materials.black);
    box6.position.set(0, -3.1, 2.5);
    box6.scale.y = 0.1;

const box7 = new THREE.Mesh(geometries.box, materials.seagreen);
    box7.position.set(-0.25, -2.85, 2.75);
    box7.rotation.z = -Math.PI / 20;
    box7.scale.y = 0.1;

const box8 = new THREE.Mesh(geometries.box, materials.green);
    box8.position.set(-0.5, -2.6, 2.75);
    box8.rotation.z = -Math.PI / 25;
    box8.scale.y = 0.1;

const box9 = new THREE.Mesh(geometries.box, materials.marbled);
    box9.position.set(-0.75, -2.35, 2.75);
    box9.rotation.z = -Math.PI / 30;
    box9.scale.y = 0.1;

const boxPlane = new THREE.Mesh(geometries.boxPlane, materials.bordeaux);
    boxPlane.position.y = -0.4;

const torus = new THREE.Mesh(geometries.torus, materials.seagreen);
    torus.position.set(-3.25, -2, -0.05);
    torus.rotation.set(Math.PI / 2, Math.PI / 6, 0);

const torus2 = torus.clone();
    torus2.position.y = -1;
    const torus3 = torus.clone();
    torus3.position.y = 0;
    const torus4 = torus.clone();
    torus4.position.y = 1;

const torusGroup = new THREE.Group();
    torusGroup.add(torus, torus2, torus3, torus4);

artwork.add(

gum, gum2, gum3, gum4, gum5,
        windowGroup,
        torusGroup,
        pencil1, ball1, ball2, ball3, ballBig, ballSmall, ballSmall2,
        cone1, cone2,
        boxPlane, box2, box3, box4, box6, box7, box8, box9

);

}

function createSVG(url) {

let loader = new THREE.SVGLoader();
        console.log(loader);

loader.load(
            url,
            function(data) {

let paths = data.paths;
                let SVGgroup = new THREE.Group();
                SVGgroup.scale.multiplyScalar(0.011);
                SVGgroup.position.set(-5.5, 4.95, 0.25);
                SVGgroup.rotation.x = Math.PI;

for (let i = 0; i < paths.length; i++) {

let path = paths[i];

let material = new THREE.MeshBasicMaterial({
                        color: path.color,
                        side: THREE.DoubleSide,
                        depthWrite: false
                    });

let shapes = path.toShapes(true);

for (let j = 0; j < shapes.length; j++) {

let shape = shapes[j];
                        let geometry = new THREE.ShapeBufferGeometry(shape);
                        let mesh = new THREE.Mesh(geometry, material);
                        SVGgroup.add(mesh);

}

artwork.add(SVGgroup);

function(xhr) {
                console.log((xhr.loaded / xhr.total * 100) + '% loaded');
            },

function(error) {
                console.log('An error happened');
            }

);

} // END OF createSVG

function createRenderer() {

renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setSize(container.clientWidth, container.clientHeight);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.gammaFactor = 2.4;
    renderer.gammaOutput = true;
    renderer.physicallyCorrectLights = true;

container.appendChild(renderer.domElement);

}

function update() {

let time = performance.now() * 0.001;

var k = 1.7;
    for (var i = 0; i < gum.geometry.vertices.length; i++) {
        var p = gum.geometry.vertices[i];
        p.normalize().multiplyScalar(1.4 + 0.4 * noise.perlin3(p.x * k + time, p.y * k, p.z * k));
    }
    gum.geometry.computeVertexNormals();
    gum.geometry.normalsNeedUpdate = true;
    gum.geometry.verticesNeedUpdate = true;

}

function render() {

renderer.render(scene, camera);

}

function animate() {

update();
    requestAnimationFrame(animate);

}

function onWindowResize() {

camera.aspect = container.clientWidth / container.clientHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(container.clientWidth, container.clientHeight);

}

window.addEventListener('resize', onWindowResize);

requestAnimationFrame(animate);
init();

编译

CSS

HTML

<div id="scene-container" aria-label="Whimsical 3d scene consisting of boxes, spheres, cones, school supplies and bubblegum." role="img">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/107/three.js"></script>
<script src=""></script>
<script src="/uploads/1907/OrbitControls.js"></script>
<script>
    /*
     * A speed-improved perlin and simplex noise algorithms for 2D.
     *
     * Based on example code by Stefan Gustavson (stegu@itn.liu.se).
     * Optimisations by Peter Eastman (peastman@drizzle.stanford.edu).
     * Better rank ordering method by Stefan Gustavson in 2012.
     * Converted to Javascript by Joseph Gentle.
     *
     * Version 2012-03-09
     *
     * This code was placed in the public domain by its original author,
     * Stefan Gustavson. You may use it as you see fit, but
     * attribution is appreciated.
     *
     */

(function(global) {
        var module = global.noise = {};

function Grad(x, y, z) {
            this.x = x;
            this.y = y;
            this.z = z;
        }

Grad.prototype.dot2 = function(x, y) {
            return this.x * x + this.y * y;
        };

Grad.prototype.dot3 = function(x, y, z) {
            return this.x * x + this.y * y + this.z * z;
        };

var grad3 = [new Grad(1, 1, 0), new Grad(-1, 1, 0), new Grad(1, -1, 0), new Grad(-1, -1, 0),
            new Grad(1, 0, 1), new Grad(-1, 0, 1), new Grad(1, 0, -1), new Grad(-1, 0, -1),
            new Grad(0, 1, 1), new Grad(0, -1, 1), new Grad(0, 1, -1), new Grad(0, -1, -1)
        ];

var p = [151, 160, 137, 91, 90, 15,
            131, 13, 201, 95, 96, 53, 194, 233, 7, 225, 140, 36, 103, 30, 69, 142, 8, 99, 37, 240, 21, 10, 23,
            190, 6, 148, 247, 120, 234, 75, 0, 26, 197, 62, 94, 252, 219, 203, 117, 35, 11, 32, 57, 177, 33,
            88, 237, 149, 56, 87, 174, 20, 125, 136, 171, 168, 68, 175, 74, 165, 71, 134, 139, 48, 27, 166,
            77, 146, 158, 231, 83, 111, 229, 122, 60, 211, 133, 230, 220, 105, 92, 41, 55, 46, 245, 40, 244,
            102, 143, 54, 65, 25, 63, 161, 1, 216, 80, 73, 209, 76, 132, 187, 208, 89, 18, 169, 200, 196,
            135, 130, 116, 188, 159, 86, 164, 100, 109, 198, 173, 186, 3, 64, 52, 217, 226, 250, 124, 123,
            5, 202, 38, 147, 118, 126, 255, 82, 85, 212, 207, 206, 59, 227, 47, 16, 58, 17, 182, 189, 28, 42,
            223, 183, 170, 213, 119, 248, 152, 2, 44, 154, 163, 70, 221, 153, 101, 155, 167, 43, 172, 9,
            129, 22, 39, 253, 19, 98, 108, 110, 79, 113, 224, 232, 178, 185, 112, 104, 218, 246, 97, 228,
            251, 34, 242, 193, 238, 210, 144, 12, 191, 179, 162, 241, 81, 51, 145, 235, 249, 14, 239, 107,
            49, 192, 214, 31, 181, 199, 106, 157, 184, 84, 204, 176, 115, 121, 50, 45, 127, 4, 150, 254,
            138, 236, 205, 93, 222, 114, 67, 29, 24, 72, 243, 141, 128, 195, 78, 66, 215, 61, 156, 180
        ];
        // To remove the need for index wrapping, double the permutation table length
        var perm = new Array(512);
        var gradP = new Array(512);

// This isn't a very good seeding function, but it works ok. It supports 2^16
        // different seed values. Write something better if you need more seeds.
        module.seed = function(seed) {
            if (seed > 0 && seed < 1) {
                // Scale the seed out
                seed *= 65536;
            }

seed = Math.floor(seed);
            if (seed < 256) {
                seed |= seed << 8;
            }

for (var i = 0; i < 256; i++) {
                var v;
                if (i & 1) {
                    v = p[i] ^ (seed & 255);
                } else {
                    v = p[i] ^ ((seed >> 8) & 255);
                }

perm[i] = perm[i + 256] = v;
                gradP[i] = gradP[i + 256] = grad3[v % 12];
            }
        };

module.seed(0);

/*
        for(var i=0; i<256; i++) {
          perm[i] = perm[i + 256] = p[i];
          gradP[i] = gradP[i + 256] = grad3[perm[i] % 12];
        }*/

// Skewing and unskewing factors for 2, 3, and 4 dimensions
        var F2 = 0.5 * (Math.sqrt(3) - 1);
        var G2 = (3 - Math.sqrt(3)) / 6;

var F3 = 1 / 3;
        var G3 = 1 / 6;

// 2D simplex noise
        module.simplex2 = function(xin, yin) {
            var n0, n1, n2; // Noise contributions from the three corners
            // Skew the input space to determine which simplex cell we're in
            var s = (xin + yin) * F2; // Hairy factor for 2D
            var i = Math.floor(xin + s);
            var j = Math.floor(yin + s);
            var t = (i + j) * G2;
            var x0 = xin - i + t; // The x,y distances from the cell origin, unskewed.
            var y0 = yin - j + t;
            // For the 2D case, the simplex shape is an equilateral triangle.
            // Determine which simplex we are in.
            var i1, j1; // Offsets for second (middle) corner of simplex in (i,j) coords
            if (x0 > y0) { // lower triangle, XY order: (0,0)->(1,0)->(1,1)
                i1 = 1;
                j1 = 0;
            } else { // upper triangle, YX order: (0,0)->(0,1)->(1,1)
                i1 = 0;
                j1 = 1;
            }
            // A step of (1,0) in (i,j) means a step of (1-c,-c) in (x,y), and
            // a step of (0,1) in (i,j) means a step of (-c,1-c) in (x,y), where
            // c = (3-sqrt(3))/6
            var x1 = x0 - i1 + G2; // Offsets for middle corner in (x,y) unskewed coords
            var y1 = y0 - j1 + G2;
            var x2 = x0 - 1 + 2 * G2; // Offsets for last corner in (x,y) unskewed coords
            var y2 = y0 - 1 + 2 * G2;
            // Work out the hashed gradient indices of the three simplex corners
            i &= 255;
            j &= 255;
            var gi0 = gradP[i + perm[j]];
            var gi1 = gradP[i + i1 + perm[j + j1]];
            var gi2 = gradP[i + 1 + perm[j + 1]];
            // Calculate the contribution from the three corners
            var t0 = 0.5 - x0 * x0 - y0 * y0;
            if (t0 < 0) {
                n0 = 0;
            } else {
                t0 *= t0;
                n0 = t0 * t0 * gi0.dot2(x0, y0); // (x,y) of grad3 used for 2D gradient
            }
            var t1 = 0.5 - x1 * x1 - y1 * y1;
            if (t1 < 0) {
                n1 = 0;
            } else {
                t1 *= t1;
                n1 = t1 * t1 * gi1.dot2(x1, y1);
            }
            var t2 = 0.5 - x2 * x2 - y2 * y2;
            if (t2 < 0) {
                n2 = 0;
            } else {
                t2 *= t2;
                n2 = t2 * t2 * gi2.dot2(x2, y2);
            }
            // Add contributions from each corner to get the final noise value.
            // The result is scaled to return values in the interval [-1,1].
            return 70 * (n0 + n1 + n2);
        };

// 3D simplex noise
        module.simplex3 = function(xin, yin, zin) {
            var n0, n1, n2, n3; // Noise contributions from the four corners

// Skew the input space to determine which simplex cell we're in
            var s = (xin + yin + zin) * F3; // Hairy factor for 2D
            var i = Math.floor(xin + s);
            var j = Math.floor(yin + s);
            var k = Math.floor(zin + s);

var t = (i + j + k) * G3;
            var x0 = xin - i + t; // The x,y distances from the cell origin, unskewed.
            var y0 = yin - j + t;
            var z0 = zin - k + t;

// For the 3D case, the simplex shape is a slightly irregular tetrahedron.
            // Determine which simplex we are in.
            var i1, j1, k1; // Offsets for second corner of simplex in (i,j,k) coords
            var i2, j2, k2; // Offsets for third corner of simplex in (i,j,k) coords
            if (x0 >= y0) {
                if (y0 >= z0) {
                    i1 = 1;
                    j1 = 0;
                    k1 = 0;
                    i2 = 1;
                    j2 = 1;
                    k2 = 0;
                } else if (x0 >= z0) {
                    i1 = 1;
                    j1 = 0;
                    k1 = 0;
                    i2 = 1;
                    j2 = 0;
                    k2 = 1;
                } else {
                    i1 = 0;
                    j1 = 0;
                    k1 = 1;
                    i2 = 1;
                    j2 = 0;
                    k2 = 1;
                }
            } else {
                if (y0 < z0) {
                    i1 = 0;
                    j1 = 0;
                    k1 = 1;
                    i2 = 0;
                    j2 = 1;
                    k2 = 1;
                } else if (x0 < z0) {
                    i1 = 0;
                    j1 = 1;
                    k1 = 0;
                    i2 = 0;
                    j2 = 1;
                    k2 = 1;
                } else {
                    i1 = 0;
                    j1 = 1;
                    k1 = 0;
                    i2 = 1;
                    j2 = 1;
                    k2 = 0;
                }
            }
            // A step of (1,0,0) in (i,j,k) means a step of (1-c,-c,-c) in (x,y,z),
            // a step of (0,1,0) in (i,j,k) means a step of (-c,1-c,-c) in (x,y,z), and
            // a step of (0,0,1) in (i,j,k) means a step of (-c,-c,1-c) in (x,y,z), where
            // c = 1/6.
            var x1 = x0 - i1 + G3; // Offsets for second corner
            var y1 = y0 - j1 + G3;
            var z1 = z0 - k1 + G3;

var x2 = x0 - i2 + 2 * G3; // Offsets for third corner
            var y2 = y0 - j2 + 2 * G3;
            var z2 = z0 - k2 + 2 * G3;

var x3 = x0 - 1 + 3 * G3; // Offsets for fourth corner
            var y3 = y0 - 1 + 3 * G3;
            var z3 = z0 - 1 + 3 * G3;

// Work out the hashed gradient indices of the four simplex corners
            i &= 255;
            j &= 255;
            k &= 255;
            var gi0 = gradP[i + perm[j + perm[k]]];
            var gi1 = gradP[i + i1 + perm[j + j1 + perm[k + k1]]];
            var gi2 = gradP[i + i2 + perm[j + j2 + perm[k + k2]]];
            var gi3 = gradP[i + 1 + perm[j + 1 + perm[k + 1]]];

// Calculate the contribution from the four corners
            var t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0;
            if (t0 < 0) {
                n0 = 0;
            } else {
                t0 *= t0;
                n0 = t0 * t0 * gi0.dot3(x0, y0, z0); // (x,y) of grad3 used for 2D gradient
            }
            var t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1;
            if (t1 < 0) {
                n1 = 0;
            } else {
                t1 *= t1;
                n1 = t1 * t1 * gi1.dot3(x1, y1, z1);
            }
            var t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2;
            if (t2 < 0) {
                n2 = 0;
            } else {
                t2 *= t2;
                n2 = t2 * t2 * gi2.dot3(x2, y2, z2);
            }
            var t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3;
            if (t3 < 0) {
                n3 = 0;
            } else {
                t3 *= t3;
                n3 = t3 * t3 * gi3.dot3(x3, y3, z3);
            }
            // Add contributions from each corner to get the final noise value.
            // The result is scaled to return values in the interval [-1,1].
            return 32 * (n0 + n1 + n2 + n3);

};

// ##### Perlin noise stuff

function fade(t) {
            return t * t * t * (t * (t * 6 - 15) + 10);
        }

function lerp(a, b, t) {
            return (1 - t) * a + t * b;
        }

// 2D Perlin Noise
        module.perlin2 = function(x, y) {
            // Find unit grid cell containing point
            var X = Math.floor(x),
                Y = Math.floor(y);
            // Get relative xy coordinates of point within that cell
            x = x - X;
            y = y - Y;
            // Wrap the integer cells at 255 (smaller integer period can be introduced here)
            X = X & 255;
            Y = Y & 255;

// Calculate noise contributions from each of the four corners
            var n00 = gradP[X + perm[Y]].dot2(x, y);
            var n01 = gradP[X + perm[Y + 1]].dot2(x, y - 1);
            var n10 = gradP[X + 1 + perm[Y]].dot2(x - 1, y);
            var n11 = gradP[X + 1 + perm[Y + 1]].dot2(x - 1, y - 1);

// Compute the fade curve value for x
            var u = fade(x);

// Interpolate the four results
            return lerp(
                lerp(n00, n10, u),
                lerp(n01, n11, u),
                fade(y));
        };

// 3D Perlin Noise
        module.perlin3 = function(x, y, z) {
            // Find unit grid cell containing point
            var X = Math.floor(x),
                Y = Math.floor(y),
                Z = Math.floor(z);
            // Get relative xyz coordinates of point within that cell
            x = x - X;
            y = y - Y;
            z = z - Z;
            // Wrap the integer cells at 255 (smaller integer period can be introduced here)
            X = X & 255;
            Y = Y & 255;
            Z = Z & 255;

// Calculate noise contributions from each of the eight corners
            var n000 = gradP[X + perm[Y + perm[Z]]].dot3(x, y, z);
            var n001 = gradP[X + perm[Y + perm[Z + 1]]].dot3(x, y, z - 1);
            var n010 = gradP[X + perm[Y + 1 + perm[Z]]].dot3(x, y - 1, z);
            var n011 = gradP[X + perm[Y + 1 + perm[Z + 1]]].dot3(x, y - 1, z - 1);
            var n100 = gradP[X + 1 + perm[Y + perm[Z]]].dot3(x - 1, y, z);
            var n101 = gradP[X + 1 + perm[Y + perm[Z + 1]]].dot3(x - 1, y, z - 1);
            var n110 = gradP[X + 1 + perm[Y + 1 + perm[Z]]].dot3(x - 1, y - 1, z);
            var n111 = gradP[X + 1 + perm[Y + 1 + perm[Z + 1]]].dot3(x - 1, y - 1, z - 1);

// Compute the fade curve value for x, y, z
            var u = fade(x);
            var v = fade(y);
            var w = fade(z);

// Interpolate
            return lerp(
                lerp(
                    lerp(n000, n100, u),
                    lerp(n001, n101, u), w),
                lerp(
                    lerp(n010, n110, u),
                    lerp(n011, n111, u), w),
                v);
        };

})(this);
</script>
<script src="/uploads/1910/three.svgloader.js"></script>

以svg图为背景，在图中加入3d模型（本例是口香糖状的多面体）和动画。

webgl, three, svg, mix

编辑器支持Emmet

快捷键

以svg图为背景，在图中加入3d模型（本例是口香糖状的多面体）和动画。

webgl, three, svg, mix

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

梦幻！webgl three.js使用shader实现月亮特效生成器

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：