VVVV.js 项目教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00771/article/details/142607342

VVVV.js 项目教程

vvvv.js 项目地址: https://gitcode.com/gh_mirrors/vv/vvvv.js

1. 项目介绍

VVVV.js 是一个将 VVVV 可视化编程语言引入到 Web 浏览器的开源项目。VVVV 是一个强大的可视化编程环境，主要用于实时图形和交互设计。通过 VVVV.js，开发者可以在网页中嵌入 VVVV 的强大功能，无需编写任何代码即可创建 2D Canvas 和 3D WebGL 图形。

VVVV.js 的主要特点包括：

无缝嵌入 VVVV 补丁到网页项目中。
实时补丁编辑，支持浏览器内补丁编辑器。
支持子补丁，便于结构化补丁设计。
内置 2D Canvas 和 3D WebGL 图形支持，并带有内置的着色器代码编辑器。
可以访问和操作网页的 DOM。
兼容 VVVV 的数据格式，便于与经典 VVVV 交换补丁片段。

2. 项目快速启动

2.1 环境准备

首先，确保你已经安装了 Node.js 6.x 版本。然后，下载或克隆 VVVV.js 项目到你的项目目录中。

git clone https://github.com/zauner/vvvv.js.git
cd vvvv.js
npm install

2.2 创建项目目录

在你的项目目录中创建一个空的 VVVV 补丁文件，例如 main.v4p。

touch main.v4p

2.3 配置前端 HTML

在你的项目目录中创建一个 index.html 文件，并添加以下代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>VVVV.js 示例</title>
    <script language="JavaScript" src="/vvvvjs/lib/require.js"></script>
    <script language="JavaScript" src="/vvvvjs/vvvv.js"></script>
    <link rel="VVVV" href="main.v4p"/>
    <script language="JavaScript">
        VVVVContext.init("/vvvv_js/", 'full', function() {
            console.log('VVVV.js 初始化完成');
        });
    </script>
</head>
<body>
    <div id="patch">你的浏览器不支持 VVVViewer</div>
</body>
</html>