canvas 3D空间

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

const engine = new BABYLON.Engine(elCanvas, true);
const scene = (() => {

const SZ = 30;
    const CAM_MINZ = 0.1;
    const CAM_RADIUS = 8;

const scene = new BABYLON.Scene(engine);
    scene.clearColor = new BABYLON.Color4(0, 0, 0, 1);

const camera0 = new BABYLON.ArcRotateCamera('camera0', BABYLON.Tools.ToRadians(-90), BABYLON.Tools.ToRadians(120), CAM_RADIUS, null, scene);
    camera0.wheelPrecision = 10;
    camera0.attachControl(elCanvas);
    camera0.minZ = CAM_MINZ;
    camera0.fov = BABYLON.Tools.ToRadians(90);
    camera0.lowerRadiusLimit = CAM_RADIUS - 2;
    camera0.upperRadiusLimit = CAM_RADIUS + 2;

const light1 = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene);
    light1.intensity = 1;

const light0 = new BABYLON.PointLight('light0', new BABYLON.Vector3(0, 0, 0), scene);
    light0.intensity = 5000;

const mat0 = new BABYLON.PBRMetallicRoughnessMaterial('', scene);
    mat0.baseColor = new BABYLON.Color3(1, 0.8, 0.2);

//// create solid particle sys.

const sps = new BABYLON.SolidParticleSystem('', scene);

sps.addShape(shape, sphereDatLen, {
        positionFunction(p, i) {
            const n = i;
            const pos = sphereDat.positions;
            const { x, y, z } = new BABYLON.Vector3(pos[n * 3], pos[n * 3 + 1], pos[n * 3 + 2]);
            const rx = rnd(-Math.PI, Math.PI);
            const ry = rnd(-Math.PI, Math.PI);
            const rz = rnd(-Math.PI, Math.PI);
            p.position.set(x, y, z);
            p.rotation.set(rx, ry, rz);
            const s = (1 - Math.abs(y) / (SZ / 2) * 0.9) ** 3; // zip it.
            p.scaling.set(s, s, s);
            const wx = rnd(-1, 1) * 4;
            const wy = rnd(-1, 1) * 4;
            const wz = rnd(-1, 1) * 4;
            dat[i] = { rx, ry, rz, wx, wy, wz };
        }
    });
    shape.dispose();
    const mesh = sps.buildMesh();
    mesh.material = mat0;

//// animate solid particle mesh

BABYLON.Animation.CreateAndStartAnimation('', mesh, 'rotation.x', 2, 60, 0, Math.PI * 2);
    BABYLON.Animation.CreateAndStartAnimation('', mesh, 'rotation.y', 2, 60, 0, Math.PI * 2);
    BABYLON.Animation.CreateAndStartAnimation('', mesh, 'rotation.z', 0.5, 60, 0, Math.PI * 2);

//// update solid particles

//// dust .. gpu particles

const ps = new BABYLON.ParticleSystem('', 10000, scene);
    const tex0 = new BABYLON.DynamicTexture('', { width: 128, height: 128 }, scene);
    tex0.hasAlpha = true;
    const ctx = tex0.getContext();
    const grad = ctx.createRadialGradient(64, 64, 0, 64, 64, 64);
    grad.addColorStop(0, 'hsla(60,50%,50%, 1)'); // in
    grad.addColorStop(1, 'hsla(60,50%,50%, 0)');
    ctx.fillStyle = grad;
    ctx.beginPath();
    ctx.ellipse(64, 64, 64, 32, 0, 0, Math.PI * 2, false);
    ctx.closePath();
    ctx.fill();
    tex0.update();
    //document.body.append(tex0._canvas);

ps.emitter = mesh.up.scale(SZ / 2);
    ps.particleTexture = tex0;
    ps.minLifeTime = 5;
    ps.maxLifeTime = 10;
    ps.addSizeGradient(0, 0, 0.01);
    ps.addSizeGradient(1, 0.05, 0.55);
    ps.emitRate = 1000;
    ps.start();
    scene.onBeforeRenderObservable.add(() => {
        ps.emitter = mesh.up.scale(SZ / 2);
        ps.direction1 = ps.emitter.scale(-0.5).add(new BABYLON.Vector3(-5, -5, -5));
        ps.direction2 = ps.emitter.scale(-0.5).add(new BABYLON.Vector3(5, 5, 5));
    });

//// fx

const pp = new BABYLON.DefaultRenderingPipeline('', true, scene, [camera0]);
    pp.bloomEnabled = true;
    pp.bloomKernel = 128;
    pp.bloomScale = 1;
    pp.bloomThreshold = 0.1;
    pp.bloomWeight = 0.5;
    pp.fxaaEnabled = true;
    pp.samples = 2;

return scene;
})();
engine.runRenderLoop(() => {
    scene.render();
});
addEventListener('resize', () => {
    engine.resize();
});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg