canvas模拟布拖动

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

// Compute anchor xy
function getClothAnchorPoint({ faceId, subdivisions }) {
    const col = (faceId % (subdivisions * 2) / 2 | 0)
    const row = faceId / (subdivisions * 2) | 0;
    const o = 0.5 / subdivisions;  // offset half grid
    const s = 1 - 1 / subdivisions; // scale
    const x = o + (col / (subdivisions - 1)) * s;
    const y = o + (1 - row / (subdivisions - 1)) * s;
    return [x, y];
}

function createMeshGround({ scene, width = 1e3, depth = 1e3, height = 1e1 }) {
    const mesh = BABYLON.MeshBuilder.CreateBox('', { width, depth, height });

mesh.position.y = -0.5 * height;

mesh.physicsImpostor = new BABYLON.PhysicsImpostor(mesh,
        BABYLON.PhysicsImpostor.BoxImpostor, {
        mass: 0,
        friction: 0.1
    });

const mat = new BABYLON.PBRMaterial('', scene);
    mat.roughness = 1;
    mat.specularIntensity = 0.2;
    mat.albedoColor = new BABYLON.Color3(1, 1, 1);
    
    mesh.material = mat;

return mesh;
}

const mat = new BABYLON.PBRMaterial('', scene);
    mat.albedoTexture = new BABYLON.Texture('__stub__', scene);
    mat.specularIntensity = 0.8;
    mat.roughness = 0.8;
    mat.backFaceCulling = false;
    mat.twoSidedLighting = true;

mesh.material = mat;

return mesh;
}

function createMeshClothAnchor({ scene }) {
    const mesh = BABYLON.MeshBuilder.CreateBox('meshClothAnchor', { size: 0.1 });

mesh.physicsImpostor = new BABYLON.PhysicsImpostor(mesh,
        BABYLON.PhysicsImpostor.BoxImpostor, {
        mass: 0
    });

const mat = new BABYLON.PBRMaterial('', scene);
    mat.albedoColor = new BABYLON.Color3(0, 1, 0);
    mat.roughness = 1;

mesh.material = mat;

return mesh;
}

// Remove clothImpostor anchors
function removeAllClothAnchors({ meshCloth }) {
    meshCloth.physicsImpostor.physicsBody.get_m_anchors().clear();
}

// Re-create cloth anchor impostor
function recreateClothAnchorImpostor({ scene, meshClothAnchor }) {
    scene.getPhysicsEngine().removeImpostor(meshClothAnchor.physicsImpostor);
    meshClothAnchor.physicsImpostor = new BABYLON.PhysicsImpostor(meshClothAnchor,
        BABYLON.PhysicsImpostor.BoxImpostor, {
        mass: 0
    });
}

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

const camera0 = new BABYLON.ArcRotateCamera('',
        BABYLON.Tools.ToRadians(-50), BABYLON.Tools.ToRadians(65), 15,
        null, scene
    );

//camera0.attachControl(elCanvas);
    camera0.wheelPrecision = 100;

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

const light1 = new BABYLON.SpotLight('', new BABYLON.Vector3(0, 10, 0),
        new BABYLON.Vector3(0, -1, 0), Math.PI / 180 * 120, 10, scene);
    light1.intensity = 1000;

const gravity = new BABYLON.Vector3(0, -10, 0);
    scene.enablePhysics(gravity, new BABYLON.AmmoJSPlugin());

const meshGround = createMeshGround({ scene });

const subdivisions = 40;
    const meshCloth = createMeshCloth({ scene, subdivisions });
    const meshClothAnchor = createMeshClothAnchor({ scene });

// shadow
    const sg = new BABYLON.ShadowGenerator(2048, light1);
    sg.addShadowCaster(meshCloth);
    sg.useCloseExponentialShadowMap = true;
    light1.shadowMinZ = 8;
    light1.shadowMaxZ = 11;
    meshGround.receiveShadows = true;
    meshCloth.receiveShadows = true;

// postprocess
    const rp = new BABYLON.DefaultRenderingPipeline('', true, scene, [camera0]);
    rp.bloomEnabled = true;
    rp.bloomWeight = 0.2;
    rp.bloomThreshold = 0.9;
    rp.bloomKernel = 32;
    rp.bloomScale = 1;
    rp.samples = 4;
    rp.fxaaEnabled = true;

return { scene, meshCloth, meshClothAnchor, subdivisions };
}

function onPointerUp({ scene, meshCloth }) {
    return (ev, info) => {
        scene.metadata.pickedMesh = null;
        removeAllClothAnchors({ meshCloth });
    };
}

function onPointerMove({ scene, meshCloth, meshClothAnchor }) {
    return (ev, info) => {
        if (scene.metadata.pickedMesh === meshCloth) {
            const { hit, pickedPoint } = scene.pick(scene.pointerX, scene.pointerY);
            if (hit) {
                meshClothAnchor.position = pickedPoint;
            }
        }
    }
}

function init() {
    const engine = new BABYLON.Engine(elCanvas, true);
    const { scene, meshCloth, meshClothAnchor, subdivisions } = createScene(engine);

engine.runRenderLoop(() => {
        scene.render();
    });

addEventListener('resize', () => {
        engine.resize();
    });

scene.metadata = { pickedMesh: null };
    scene.onPointerDown = onPointerDown({ scene, meshCloth, meshClothAnchor, subdivisions });
    scene.onPointerUp = onPointerUp({ scene, meshCloth });
    scene.onPointerMove = onPointerMove({ scene, meshCloth, meshClothAnchor });
}

init();

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