Author: HelloGitHub- Kalifun

The sample code covered in this article has been synchronously updated to the HelloGithub-Team repository

Today I recommend Zdog, an open source Web 3D model project written in JavaScript.

Introduce a,

1.1 Zdog

Zdog Project address: github.com/metafizzy/z…

Tips: All of the works featured in this article were done through Zdog.

Round, flat, designer-friendly pseudo-3D engine for Canvas and SVG.

Using 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 appears flat, which makes the Zdog special.

1.2 Zdog characteristics

  • Small size: The entire library has only 2100 lines of code, with a minimum size of 28 KB.
  • Smooth graphics: All circles appear as rounded edges, with no polygonal jagged edges.
  • User-friendly: Modeling is done using apis.

2. Method introduction

The explanation is shown in the code with comments, please pay attention to read.

2.1 Initial static demonstration

Let’s move on to a basic non-animated demonstration.

A static demo simply renders the image you want to draw on the canvas.

// Illustration is a top-level class that works with a 
      
        or < SVG > element, saves all shapes in the scene, and displays those shapes in the element.
      
    let illo = new Zdog.Illustration({
        // Set the canvas with the class selector
        element: '.zdog-canvas'});/ / draw circles
    new Zdog.Ellipse({
        // Add shape to illo
        addTo: illo,
        // Set the diameter of the circle
        diameter: 80.// Set the brush width
        stroke: 20.// Set the color of the circle
        color: '# 636'});// Update all display attributes and render to illo canvas
    illo.updateRenderGraph();
Copy the code

2.2 the animation

To animate the scene, we need to re-render the graphics on the canvas every frame.

let illo = new Zdog.Illustration({
        // Set the canvas with the ID selector
        element: '#zdog-canvas'});/ / draw circles
    new Zdog.Ellipse({
        addTo: illo,
        diameter: 80.// You can understand the z-axis moving forward by 40 pixels
        translate: { z: 40 },
        stroke: 20.color: '# 636'});/ / draw a rectangle
    new Zdog.Rect({
        addTo: newcanvas,
        width: 80.height: 80.// You can understand the z-axis moving back 40 pixels
        translate: { z: - 40 },
        stroke: 12.color: '#E62'.fill: true});function animate() {
        // Change the rotation of the scene by incrementing xxx.searchable. y. The higher the value, the faster.
        illo.rotate.y += 0.03;
        illo.updateRenderGraph();
        // The animation continues on the next frame
        requestAnimationFrame( animate );
    }
    // Start animation, execute function
    animate();
Copy the code

2.3 enlarge

Zdog requires a lot of numbers. Setting zoom will scale the entire scene.

// Illustration is a top-level class that works with a 
      
        or < SVG > element, saves all shapes in the scene, and displays those shapes in the element.
      
    let illo2 = new Zdog.Illustration({
        // Set the canvas with the class selector
        element: '.zdog-canvas2'.// Enlarge the graph 4 times
        zoom: 4});/ / draw circles
    new Zdog.Ellipse({
        // Add the shape to illo2
        addTo: illo2,
        // Set the diameter of the circle
        diameter: 80.// Set the brush width
        stroke: 20.// Set the color of the circle
        color: '# 636'});// Update all display attributes and render to illo canvas
    illo2.updateRenderGraph();
Copy the code

2.4 Drag and rotate

Enable rotation by dragging with dragRotate: true set on the illustration.

let newcanvas2 = new Zdog.Illustration({
        // Set the canvas with the ID selector
        element: '#zdog-canvas2'.dragRotate: true});/ / draw circles
    new Zdog.Ellipse({
        addTo: newcanvas2,
        diameter: 80.// You can understand the z-axis moving forward by 40 pixels
        translate: { z: 40 },
        stroke: 20.color: '# 636'});/ / draw a rectangle
    new Zdog.Rect({
        addTo: newcanvas2,
        width: 80.height: 80.// You can understand the z-axis moving back 40 pixels
        translate: { z: - 40 },
        stroke: 12.color: '#E62'.fill: true});function animate2() {
        // Change the rotation of the scene by incrementing xxx.searchable. y. The higher the value, the faster.
        newcanvas2.rotate.y += 0.03;
        newcanvas2.updateRenderGraph();
        // The animation continues on the next frame
        requestAnimationFrame( animate2 );
    }
    // Start animation, execute function
    animate2();
Copy the code

Three, start fast

Here’s a step-by-step guide to using the Zdog library. We use the simplest CDN reference method, so that people can quickly check its charm (copy the code to see the effect).

Tips: Explanations are presented in the code in the form of comments, please pay attention to read.


      
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zdog</title>
    <style type="text/css">
        .zdog-canvas {
            /* Add a background to the class="zdog-canvas" canvas */
            background: #FDB;
        }
    </style>
</head>
<body>
<! --Zdog is rendered on a <canvas> or < SVG > element. -->
<! -- Set canvas 1 and width -->
<canvas class="zdog-canvas" width="240" height="240"></canvas>
<! -- Set canvas 2 and width -->
<canvas id="zdog-canvas" width="240" height="240"></canvas>
<! Zdog -->
<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
<script>
    // Illustration is a top-level class that works with a 
       
         or < SVG > element, saves all shapes in the scene, and displays those shapes in the element.
       
    let illo = new Zdog.Illustration({
        // Set the canvas with the class selector
        element: '.zdog-canvas'});/ / draw circles
    new Zdog.Ellipse({
        // Add shape to illo
        addTo: illo,
        // Set the diameter of the circle
        diameter: 80.// Set the brush width
        stroke: 20.// Set the color of the circle
        color: '# 636'});// Update all display attributes and render to illo canvas
    illo.updateRenderGraph();


    let newcanvas = new Zdog.Illustration({
        // Set the canvas with the ID selector
        element: '#zdog-canvas'});/ / draw circles
    new Zdog.Ellipse({
        addTo: newcanvas,
        diameter: 80.// You can understand the z-axis moving forward by 40 pixels
        translate: { z: 40 },
        stroke: 20.color: '# 636'});/ / draw a rectangle
    new Zdog.Rect({
        addTo: newcanvas,
        width: 80.height: 80.// You can understand the z-axis moving back 40 pixels
        translate: { z: - 40 },
        stroke: 12.color: '#E62'.fill: true});function animate() {
        // Change the rotation of the scene by incrementing xxx.searchable. y. The higher the value, the faster.
        newcanvas.rotate.y += 0.03;
        newcanvas.updateRenderGraph();
        // The animation continues on the next frame
        requestAnimationFrame( animate );
    }
    // Start animation, execute function
    animate();

</script>
</body>
</html>
Copy the code

The first canvas is an initial static demo, the second is an animation, the third is enlarged by the first canvas, and the fourth is rotated irregularly by dragging.

Four,

Zdog can design and display simple 3D models without much overhead. This makes it a lot easier to be a soul artist. If you want to add color to your website, try Zdog. If you are interested, next time I will lead you to become a code soul artist!

5. Reference materials

Zdog official documentation

“Explain Open Source Project series” — let the people who are interested in open source projects not be afraid, let the initiator of open source projects not be alone. Follow along as you discover the joys of programming, use, and how easy it is to get involved in open source projects. Welcome to leave a message to contact us, join us, let more people fall in love with open source, contribute to open source ~