JS engine to make you a soul painter: zdog

Time:2020-2-13

JS engine to make you a soul painter: zdog

Author: Hello GitHub-kalifun

The sample code involved in this article has been synchronously updated to the hellogithub team warehouse

Today, I would like to recommend an open-source Web 3D model project, zdog, written in JavaScript language.

I. Introduction

1.1 Zdog

Zdog project address: https://github.com/metafizzy/

Tips:All the works in this paper are finished by zdog.

JS engine to make you a soul painter: zdog

Round, flat, designer friendly Pseudo 3D engine for canvas and SVG.

With zdog you can design and render simple 3D models on the web. Zdog is a Pseudo 3D engine. Its geometry exists in 3D space, but it takes on a flat shape, which makes zdog special.

1.2 zdog features

  • Small size: the entire library has only 2100 lines of code, with a minimum size of 28 KB.
  • Smooth shape: all circles are shown as round edges, without polygon serrations.
  • Use friendly: use API to complete modeling.

2、 Method introduction

The explanations are all displayed in the code in the form of notes. Please read them carefully.

2.1 initial static demonstration

Let’s go to a basic non animation demonstration.

The static demonstration only needs to render the image you want to paint on the canvas.

//Illustrationis a top-level class for working with < canvas > or < SVG > elements, saving all shapes in the scene, and displaying them in the elements.
    let illo = new Zdog.Illustration({
        //Using class selector to set canvas
        element: '.zdog-canvas',
    });

    // draw circle
    new Zdog.Ellipse({
        //Add shape to Illo
        addTo: illo,
        //Set the diameter of the circle
        diameter: 80,
        //Set brush width
        stroke: 20,
        //Set the color of the circle
        color: '#636',
    });

    //Update all display properties and render to the Illo canvas
    illo.updateRenderGraph();

2.2 animation

In order to realize the animation scene, we need to re render the figure on the canvas every frame.

let illo = new Zdog.Illustration({
        //Set canvas with ID selector
        element: '#zdog-canvas',
    });

    // draw circle
    new Zdog.Ellipse({
        addTo: illo,
        diameter: 80,
        //You can understand that the Z axis moves 40 pixels forward
        translate: { z: 40 },
        stroke: 20,
        color: '#636',
    });

    // draw rectangle
    new Zdog.Rect({
        addTo: newcanvas,
        width: 80,
        height: 80,
        //You can understand that the Z axis moves back 40 pixels
        translate: { z: -40 },
        stroke: 12,
        color: '#E62',
        fill: true,
    });

    function animate() {
        //Change the rotation of the scene by gradually increasing XXX. Rotate. Y. The higher the value, the faster.
        illo.rotate.y += 0.03;
        illo.updateRenderGraph();
        //Animation next frame continue function
        requestAnimationFrame( animate );
    }
    //Start animation, execute function
    animate();

2.3 zoom in

Zdog requires a large number of numbers to be set. Setting zoom scales the entire scene.

//Illustrationis a top-level class for working with < canvas > or < SVG > elements, saving all shapes in the scene, and displaying them in the elements.
    let illo2 = new Zdog.Illustration({
        //Using class selector to set canvas
        element: '.zdog-canvas2',
         //Zoom in 4 times
        zoom: 4,
    });
    // draw circle
    new Zdog.Ellipse({
        //Add shape to illo2
        addTo: illo2,
        //Set the diameter of the circle
        diameter: 80,
        //Set brush width
        stroke: 20,
        //Set the color of the circle
        color: '#636',
    });

    //Update all display properties and render to the Illo canvas
    illo2.updateRenderGraph();

2.4 drag rotation

By setting on the illustrationdragRotate:trueDrag to turn on rotation.

let newcanvas2 = new Zdog.Illustration({
        //Set canvas with ID selector
        element: '#zdog-canvas2',
        dragRotate: true,
    });

    // draw circle
    new Zdog.Ellipse({
        addTo: newcanvas2,
        diameter: 80,
        //You can understand that the Z axis moves 40 pixels forward
        translate: { z: 40 },
        stroke: 20,
        color: '#636',
    });

    // draw rectangle
    new Zdog.Rect({
        addTo: newcanvas2,
        width: 80,
        height: 80,
        //You can understand that the Z axis moves back 40 pixels
        translate: { z: -40 },
        stroke: 12,
        color: '#E62',
        fill: true,
    });

    function animate2() {
        //Change the rotation of the scene by gradually increasing XXX. Rotate. Y. The higher the value, the faster.
        newcanvas2.rotate.y += 0.03;
        newcanvas2.updateRenderGraph();
        //Animation next frame continue function
        requestAnimationFrame( animate2 );
    }
    //Start animation, execute function
    animate2();

3、 Get started quickly

Next, we will explain step by step how to use the zdog library. We use the simplest CDN reference method, so that you can quickly check its charm (copy the code to see the effect).

Tips:The explanations are all displayed in the code in the form of notes. Please read them carefully.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zdog</title>
    <style type="text/css">
        .zdog-canvas {
            /*Add a background to the canvas of class = "zdog canvas"*/
            background: #FDB;
        }
    </style>
</head>
<body>
<! -- zdog is presented on the < canvas > or < SVG > elements. >
<! -- set canvas 1, length and width -- >
<canvas class="zdog-canvas" width="240" height="240"></canvas>
<! -- set canvas 2, length and width -- >
<canvas id="zdog-canvas" width="240" height="240"></canvas>
<! -- import zdog file -- >
<script></script>
<script>
    //Illustrationis a top-level class for working with < canvas > or < SVG > elements, saving all shapes in the scene, and displaying them in the elements.
    let illo = new Zdog.Illustration({
        //Using class selector to set canvas
        element: '.zdog-canvas',
    });

    // draw circle
    new Zdog.Ellipse({
        //Add shape to Illo
        addTo: illo,
        //Set the diameter of the circle
        diameter: 80,
        //Set brush width
        stroke: 20,
        //Set the color of the circle
        color: '#636',
    });

    //Update all display properties and render to the Illo canvas
    illo.updateRenderGraph();


    let newcanvas = new Zdog.Illustration({
        //Set canvas with ID selector
        element: '#zdog-canvas',
    });

    // draw circle
    new Zdog.Ellipse({
        addTo: newcanvas,
        diameter: 80,
        //You can understand that the Z axis moves 40 pixels forward
        translate: { z: 40 },
        stroke: 20,
        color: '#636',
    });

    // draw rectangle
    new Zdog.Rect({
        addTo: newcanvas,
        width: 80,
        height: 80,
        //You can understand that the Z axis moves back 40 pixels
        translate: { z: -40 },
        stroke: 12,
        color: '#E62',
        fill: true,
    });

    function animate() {
        //Change the rotation of the scene by gradually increasing XXX. Rotate. Y. The higher the value, the faster.
        newcanvas.rotate.y += 0.03;
        newcanvas.updateRenderGraph();
        //Animation next frame continue function
        requestAnimationFrame( animate );
    }
    //Start animation, execute function
    animate();

</script>
</body>
</html>

JS engine to make you a soul painter: zdog

The first canvas isInitial static demonstration, the second canvas isanimation, the third canvas is composed of the first canvasenlarge, the fourth canvas is throughdragIrregular implementationrotate

Four, summary

Zdog can design and display simple 3D models without much overhead. This makes it a lot easier for us to be a soul painter. If you want to add color to your website, try zdog. If you are interested, I will lead you to become a soul painter in the next issue!

5、 References

Official documents of zdog

“Explain open source project series”——Let the people who are interested in open source project no longer fear, let the initiator of open source project no longer alone. Following our article, you will find programming fun, easy to use, and easy to participate in open source projects. Welcome to contact us, join us, let more people love open source, contribute open source ~

Recommended Today

[reading notes] calculation advertising (Part 3)

By logm This article was originally published at https://segmentfault.com/u/logm/articles and is not allowed to be reproduced~ If the mathematical formula in the article cannot be displayed correctly, please refer to: Tips for displaying the mathematical formula correctly This article isComputing advertising (Second Edition)Reading notes. This part introduces the key technology of online advertising, which is […]