PlayCanvas.js 炫酷的水晶体烟花

参考来源： https://playcanvas.com/

cube

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

// PARTICLE FUN!!!
// https://github.com/playcanvas/engine
var canvas = document.getElementById("application-canvas");
var app = new pc.fw.Application(canvas, {});
app.setCanvasFillMode(pc.fw.FillMode.FILL_WINDOW);
app.setCanvasResolution(pc.fw.ResolutionMode.AUTO);

var camera = new pc.fw.Entity();
app.context.systems.camera.addComponent(camera, {
    clearColor: new pc.Color(0, 0, 0)
});
camera.setPosition(0, 0, 20);
app.context.root.addChild(camera);

var cube = new pc.fw.Entity();
app.context.systems.model.addComponent(cube, {
    type: 'box'
});

// Set up some fancy curves to animate particle properties
var colorCurve = new pc.CurveSet([
    [0, 1, 0.5, 1, 0.75, 0.5, 1, 0],
    [0, 0, 0.25, 0.25, 0.5, 0.5, 0.75, 0.75, 1, 1],
    [0, 0, 0.5, 1, 1, 0]
]);

var velocityCurve = new pc.CurveSet([
    [0, -5, 1, 0],
    [0, -5, 1, 0],
    [0, -5, 1, 0]
]);
var velocityCurve2 = new pc.CurveSet([
    [0, 5, 1, 0],
    [0, 5, 1, 0],
    [0, 5, 1, 0]
]);

var rotationSpeedCurve = new pc.Curve([0, 0, 1, 45]);
var rotationSpeedCurve2 = new pc.Curve([0, 0, 1, -45]);

var scaleCurve = new pc.Curve([0, 0.1, 1, 1]);

var alphaCurve = new pc.Curve([0, 0, 0.1, 1, 0.8, 1, 1, 0]);
var alphaCurve2 = new pc.Curve([0, 0, 0.1, 0.6, 0.8, 0.6, 1, 0]);

var e;

var particles = new pc.fw.Entity();
app.context.systems.particlesystem.addComponent(particles, {
    numParticles: 200,
    lifetime: 1.5,
    rate: 0.01,
    colorGraph: colorCurve,
    scaleGraph: scaleCurve,
    alphaGraph: alphaCurve,
    alphaGraph2: alphaCurve2,
    velocityGraph: velocityCurve,
    velocityGraph2: velocityCurve2,
    rotationSpeedGraph: rotationSpeedCurve,
    rotationSpeedGraph2: rotationSpeedCurve,
    mesh: cube.model.model,
    spawnBounds: new pc.Vec3(0, 0, 0),
    blendType: pc.scene.BLEND_ADDITIVE,
    startAngle: -45,
    startAngle2: 45,
    preWarm: true
});
app.context.root.addChild(particles);

// Register an update event to rotate the camera
var timer = 0;
app.on("update", function(dt) {
    timer += dt;
    particles.setPosition(Math.sin(timer * 2) * 10, Math.sin(timer * 3) * 5, Math.cos(timer * 2) * 10);
});

window.addEventListener('resize', function() {
    app.resizeCanvas(canvas.width, canvas.height);
});

app.start();

编译

CSS

HTML

参考来源： https://playcanvas.com/

cube

编辑器支持Emmet

快捷键

参考来源： https://playcanvas.com/

cube

Three.js 立方体表面Canvas纹理绘制工具

webgl three.js实现孟杰海绵（menger sponge）立方体光线追踪（raymarching）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：