Движок JS, который делает вас художником души: Zdog

GitHub JavaScript
Движок JS, который делает вас художником души: Zdog

Автор этой статьи: HelloGitHub-kalifun

Пример кода, задействованный в этой статье, был синхронно обновлен доРепозиторий HelloGitHub-Team

Сегодня я рекомендую проект веб-3D-модели с открытым исходным кодом, написанный на языке JavaScript — Zdog.

1. Введение

1.1 Zdog

Адрес проекта Zdog:GitHub.com/ он шипит/ в…

Tips:Вся работа, представленная в этой статье, была выполнена через Zdog.

Круглый, плоский, удобный для дизайнеров псевдо-3D-движок для холста и SVG.

С Zdog вы можете создавать и визуализировать простые 3D-модели в Интернете. Zdog — псевдо-3D-движок. Его геометрия существует в трехмерном пространстве, но представлена ​​в виде плоской формы, что делает Zdog особенным.

1.2 Особенности Zdog

  • Небольшой размер: вся библиотека составляет всего 2100 строк кода, а минимальный размер — 28 КБ.
  • Формы округлены: все круги визуализируются с закругленными краями, никакой язвистыми полигонами.
  • Удобный для пользователя: моделирование выполняется с использованием API.

2. Введение метода

Пояснения отображаются в виде комментариев в коде, читайте внимательно.

2.1 Начальная статическая демонстрация

Давайте введем базовую неанимированную презентацию.

Статическая презентация просто должна отображать изображение, которое вы хотите нарисовать на холсте.

// Illustration是顶级类，用于处理<canvas>或<svg>元素，保存场景中的所有形状，并在元素中显示这些形状。
    let illo = new Zdog.Illustration({
        // 用class选择器设置画布
        element: '.zdog-canvas',
    });

    // 画圆
    new Zdog.Ellipse({
        // 将形状添加到illo
        addTo: illo,
        // 设置圆的直径
        diameter: 80,
        // 设置画笔宽度
        stroke: 20,
        // 设置圆的颜色
        color: '#636',
    });

    // 更新所有显示属性并渲染到illo画布上
    illo.updateRenderGraph();

2.2 Анимация

Чтобы анимировать сцену, нам нужно перерисовывать графику на холсте в каждом кадре.

let illo = new Zdog.Illustration({
        // 用id选择器设置画布
        element: '#zdog-canvas',
    });

    // 画圆
    new Zdog.Ellipse({
        addTo: illo,
        diameter: 80,
        // 你可以理解z轴向前移动40个像素
        translate: { z: 40 },
        stroke: 20,
        color: '#636',
    });

    // 画矩形
    new Zdog.Rect({
        addTo: newcanvas,
        width: 80,
        height: 80,
        // 你可以理解z轴向后移动40个像素
        translate: { z: -40 },
        stroke: 12,
        color: '#E62',
        fill: true,
    });

    function animate() {
        // 通过逐步增加xxx.rotate.y来改变场景的旋转。值越大越快。
        illo.rotate.y += 0.03;
        illo.updateRenderGraph();
        // 动画下一帧继续执行函数
        requestAnimationFrame( animate );
    }
    // 开始动画，执行函数
    animate();

2.3 Увеличить

Zdog требует установки большого количества чисел. Настройка масштабирования пропорционально масштабирует всю сцену.

// Illustration是顶级类，用于处理<canvas>或<svg>元素，保存场景中的所有形状，并在元素中显示这些形状。
    let illo2 = new Zdog.Illustration({
        // 用class选择器设置画布
        element: '.zdog-canvas2',
         // 将图形放大4倍
        zoom: 4,
    });
    // 画圆
    new Zdog.Ellipse({
        // 将形状添加到illo2
        addTo: illo2,
        // 设置圆的直径
        diameter: 80,
        // 设置画笔宽度
        stroke: 20,
        // 设置圆的颜色
        color: '#636',
    });

    // 更新所有显示属性并渲染到illo画布上
    illo2.updateRenderGraph();

2.4 Перетащите, чтобы повернуть

установив на иллюстрацииdragRotate：trueперетащить, чтобы включить вращение.

let newcanvas2 = new Zdog.Illustration({
        // 用id选择器设置画布
        element: '#zdog-canvas2',
        dragRotate: true,
    });

    // 画圆
    new Zdog.Ellipse({
        addTo: newcanvas2,
        diameter: 80,
        // 你可以理解z轴向前移动40个像素
        translate: { z: 40 },
        stroke: 20,
        color: '#636',
    });

    // 画矩形
    new Zdog.Rect({
        addTo: newcanvas2,
        width: 80,
        height: 80,
        // 你可以理解z轴向后移动40个像素
        translate: { z: -40 },
        stroke: 12,
        color: '#E62',
        fill: true,
    });

    function animate2() {
        // 通过逐步增加xxx.rotate.y来改变场景的旋转。值越大越快。
        newcanvas2.rotate.y += 0.03;
        newcanvas2.updateRenderGraph();
        // 动画下一帧继续执行函数
        requestAnimationFrame( animate2 );
    }
    // 开始动画，执行函数
    animate2();

3. Быстрый старт

Ниже мы шаг за шагом объясним, как использовать библиотеку Zdog. Мы используем простейший референсный метод CDN, чтобы каждый мог быстро проверить его прелесть (скопируйте код, чтобы увидеть эффект).

Советы:Пояснения отображаются в виде комментариев в коде, читайте внимательно.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zdog</title>
    <style type="text/css">
        .zdog-canvas {
            /*给class="zdog-canvas"的画布添加背景*/
            background: #FDB;
        }
    </style>
</head>
<body>
<!--Zdog在<canvas>或<svg>元素上呈现。-->
<!--设置画布1，及长宽-->
<canvas class="zdog-canvas" width="240" height="240"></canvas>
<!--设置画布2，及长宽-->
<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是顶级类，用于处理<canvas>或<svg>元素，保存场景中的所有形状，并在元素中显示这些形状。
    let illo = new Zdog.Illustration({
        // 用class选择器设置画布
        element: '.zdog-canvas',
    });

    // 画圆
    new Zdog.Ellipse({
        // 将形状添加到illo
        addTo: illo,
        // 设置圆的直径
        diameter: 80,
        // 设置画笔宽度
        stroke: 20,
        // 设置圆的颜色
        color: '#636',
    });

    // 更新所有显示属性并渲染到illo画布上
    illo.updateRenderGraph();


    let newcanvas = new Zdog.Illustration({
        // 用id选择器设置画布
        element: '#zdog-canvas',
    });

    // 画圆
    new Zdog.Ellipse({
        addTo: newcanvas,
        diameter: 80,
        // 你可以理解z轴向前移动40个像素
        translate: { z: 40 },
        stroke: 20,
        color: '#636',
    });

    // 画矩形
    new Zdog.Rect({
        addTo: newcanvas,
        width: 80,
        height: 80,
        // 你可以理解z轴向后移动40个像素
        translate: { z: -40 },
        stroke: 12,
        color: '#E62',
        fill: true,
    });

    function animate() {
        // 通过逐步增加xxx.rotate.y来改变场景的旋转。值越大越快。
        newcanvas.rotate.y += 0.03;
        newcanvas.updateRenderGraph();
        // 动画下一帧继续执行函数
        requestAnimationFrame( animate );
    }
    // 开始动画，执行函数
    animate();

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

Первое полотно этоНачальная статическая демонстрация, второе полотноанимацияТретье полотно полотно по первомуувеличить, четвертое полотно пропущено черезтянутьРеализовать нарушениявращать.

4. Резюме

Zdog может проектировать и отображать простые 3D-модели без особых затрат. Это значительно облегчает нам задачу художника души, и если вы хотите оживить свой веб-сайт, попробуйте Zdog. Если вам интересно, в следующем выпуске я поведу вас к тому, чтобы стать художником-соулом по коду!

5. Ссылки

Официальная документация Zdog

«Объяснение серии проектов с открытым исходным кодом»——让对开源项目感兴趣的人不再畏惧、让开源项目的发起者不再孤单。 Следите за нашими статьями, и вы откроете для себя радости программирования, насколько легко им пользоваться, и узнаете, как легко участвовать в проектах с открытым исходным кодом. Добро пожаловать, чтобы оставить сообщение, чтобы связаться с нами, присоединиться к нам, позволить большему количеству людей влюбиться в открытый исходный код и внести свой вклад в открытый исходный код~

Категории