Javascript 如何使用在3D空间中设置动画的2D对象创建图形画布？

我偶然发现并爱上了背景动画，特别是相互连接的点，在3D空间中制作动画。（讨论的内容是：

）我对画布动画还不熟悉，从我到目前为止所做的研究来看，我不知道应该从哪条道路开始为我的项目实现类似的背景动画。到目前为止，我已经研究了Paper.js和plaincanvas及其JSAPI

以下是我的规格：

• 能够制作“画布”（不是字面上的
  ，而是图形画布。我不反对任何特定的图形包装）
• 能够使“画布”具有响应性
• 在三维空间中导航的圆点（二维圆）（能够在轴上旋转对象是一个加号，在轴上设置动画是一个额外的加号。）
• 这些圆点集的可实例化模
• 能够在特定事件（单击、悬停等）上设置这些模块的动画

很高兴拥有：

• 矢量图形

可以看到与我想要实现的目标类似的东西

我知道我要做的所有事情都需要一个整体（JS图形库，如Paper.JS、自定义JS类等），但我只想知道其他人在哪些方面取得了成功。

---

谢谢

当您在浏览器中无需任何插件即可获得高质量的3d图形时，它可能会很快变得复杂。有一些更高级别的库可以简化这一过程。其中最著名的是。

老实说，我只是一时兴起才这么做的。我通常尽量不去回答那些说“给我这个代码”的问题，但我想知道这样做需要多长时间。它肯定可以被清理，名字间隔，等等，它甚至可能根本不是你想要的，但不管怎样效果都很酷

注意本例中不包括鼠标事件。这个问题在细节上有点模糊，所以我只提供了一个非常简单的方法来开始使用3d和canvas 2d元素

这里有一些相当不错的代码，是示例代码和书籍练习，其中有一些关于使用Javascript和canvas的3d示例的精彩介绍。我建议你去看看

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.lineWidth = 4;

// Color stuff not real important just fluff
var cycle = 0,
    colors = {
        r: 0,
        g: 170,
        b: 0
    };

function colorCycle(inc) {
    cycle += inc;
    if (cycle > 100) {
        cycle = 0;
    }
    colors.r = ~~ (Math.sin(.3 * cycle + 0) * 127 + 128);
    colors.g = ~~ (Math.sin(.3 * cycle + 2) * 127 + 128);
    colors.b = ~~ (Math.sin(.3 * cycle + 4) * 127 + 128);
}

// Sections and points

function Point(x, y, z, size) {
    this.x = x;
    this.y = y;
    this.z = z;
    this.xpos = 0;
    this.ypos = 0;
    this.size = 5;

    rotateY(this,angle+=0.1);
}

function Section(x, y, z, width) {
    this.x = x;
    this.y = y;
    this.z = z;
    this.width = width;
    this.points = [];
    this.points.push(new Point(this.x - this.width / 2, this.y, this.z, 20));
    this.points.push(new Point(this.x + this.width / 2, this.y, this.z, 20));

    this.render = function (angleX, angleY) {
        ctx.beginPath();
        for (var p = 0; p < this.points.length; p++) {
            var point = this.points[p];

            rotateX(point, angleX);
            rotateY(point, angleY);
            doPerspective(point);

            ctx.arc(point.xpos, point.ypos, point.size, 0, Math.PI * 2, true);

            if (p == 0) {
                ctx.moveTo(this.points[0].xpos, this.points[0].ypos);
            } else {
                ctx.lineTo(point.xpos, point.ypos);
            }
        }

        ctx.closePath();
        ctx.stroke();
        ctx.fill();
    }
}

// 3d Functions for rotation and perspective
function rotateX(point, angleX) {
    var cosX = Math.cos(angleX),
        sinX = Math.sin(angleX),
        y1 = point.y * cosX - point.z * sinX,
        z1 = point.z * cosX + point.y * sinX;
    point.y = y1;
    point.z = z1;
}

function rotateY(point, angleY) {
    var cosY = Math.cos(angleY),
        sinY = Math.sin(angleY),
        x1 = point.x * cosY - point.z * sinY,
        z1 = point.z * cosY + point.x * sinY;
    point.x = x1;
    point.z = z1;
}

function doPerspective(point) {
    if (point.z > -fl) {
        var scale = fl / (fl + point.z);
        point.size = scale * 5;
        point.xpos = vpX + point.x * scale;
        point.ypos = vpY + point.y * scale;
    }
}

// Init code
var sections = [],
    numSections = 50,
    fl = 250,
    vpX,
    vpY,
    angle = 0;

vpX = canvas.width / 2;
vpY = canvas.height / 2;

// make some sections
for (var i = 0; i < numSections; i++) {
    sections.push(new Section(0, -250 + (i * 10), 0, 50));
}

function render() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    colorCycle(0.1);
    ctx.fillStyle = "rgb(" + colors.r + "," + colors.g + "," + colors.b + ")";
    ctx.strokeStyle = "rgb(" + colors.r + "," + colors.g + "," + colors.b + ")";
    for (var i = 0; i < sections.length; i++) {
        sections[i].render(0, 0.03);
    }
    requestAnimationFrame(render);
}
render();

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.lineWidth = 4;

// Color stuff not real important just fluff
var cycle = 0,
    colors = {
        r: 0,
        g: 170,
        b: 0
    };

function colorCycle(inc) {
    cycle += inc;
    if (cycle > 100) {
        cycle = 0;
    }
    colors.r = ~~ (Math.sin(.3 * cycle + 0) * 127 + 128);
    colors.g = ~~ (Math.sin(.3 * cycle + 2) * 127 + 128);
    colors.b = ~~ (Math.sin(.3 * cycle + 4) * 127 + 128);
}

// Sections and points

function Point(x, y, z, size) {
    this.x = x;
    this.y = y;
    this.z = z;
    this.xpos = 0;
    this.ypos = 0;
    this.size = 5;

    rotateY(this,angle+=0.1);
}

function Section(x, y, z, width) {
    this.x = x;
    this.y = y;
    this.z = z;
    this.width = width;
    this.points = [];
    this.points.push(new Point(this.x - this.width / 2, this.y, this.z, 20));
    this.points.push(new Point(this.x + this.width / 2, this.y, this.z, 20));

    this.render = function (angleX, angleY) {
        ctx.beginPath();
        for (var p = 0; p < this.points.length; p++) {
            var point = this.points[p];

            rotateX(point, angleX);
            rotateY(point, angleY);
            doPerspective(point);

            ctx.arc(point.xpos, point.ypos, point.size, 0, Math.PI * 2, true);

            if (p == 0) {
                ctx.moveTo(this.points[0].xpos, this.points[0].ypos);
            } else {
                ctx.lineTo(point.xpos, point.ypos);
            }
        }

        ctx.closePath();
        ctx.stroke();
        ctx.fill();
    }
}

// 3d Functions for rotation and perspective
function rotateX(point, angleX) {
    var cosX = Math.cos(angleX),
        sinX = Math.sin(angleX),
        y1 = point.y * cosX - point.z * sinX,
        z1 = point.z * cosX + point.y * sinX;
    point.y = y1;
    point.z = z1;
}

function rotateY(point, angleY) {
    var cosY = Math.cos(angleY),
        sinY = Math.sin(angleY),
        x1 = point.x * cosY - point.z * sinY,
        z1 = point.z * cosY + point.x * sinY;
    point.x = x1;
    point.z = z1;
}

function doPerspective(point) {
    if (point.z > -fl) {
        var scale = fl / (fl + point.z);
        point.size = scale * 5;
        point.xpos = vpX + point.x * scale;
        point.ypos = vpY + point.y * scale;
    }
}

// Init code
var sections = [],
    numSections = 50,
    fl = 250,
    vpX,
    vpY,
    angle = 0;

vpX = canvas.width / 2;
vpY = canvas.height / 2;

// make some sections
for (var i = 0; i < numSections; i++) {
    sections.push(new Section(0, -250 + (i * 10), 0, 50));
}

function render() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    colorCycle(0.1);
    ctx.fillStyle = "rgb(" + colors.r + "," + colors.g + "," + colors.b + ")";
    ctx.strokeStyle = "rgb(" + colors.r + "," + colors.g + "," + colors.b + ")";
    for (var i = 0; i < sections.length; i++) {
        sections[i].render(0, 0.03);
    }
    requestAnimationFrame(render);
}
render();

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.lineWidth = 4;

// Color stuff not real important just fluff
var cycle = 0,
    colors = {
        r: 0,
        g: 170,
        b: 0
    };

function colorCycle(inc) {
    cycle += inc;
    if (cycle > 100) {
        cycle = 0;
    }
    colors.r = ~~ (Math.sin(.3 * cycle + 0) * 127 + 128);
    colors.g = ~~ (Math.sin(.3 * cycle + 2) * 127 + 128);
    colors.b = ~~ (Math.sin(.3 * cycle + 4) * 127 + 128);
}

// Sections and points

function Point(x, y, z, size) {
    this.x = x;
    this.y = y;
    this.z = z;
    this.xpos = 0;
    this.ypos = 0;
    this.size = 5;

    rotateY(this,angle+=0.1);
}

function Section(x, y, z, width) {
    this.x = x;
    this.y = y;
    this.z = z;
    this.width = width;
    this.points = [];
    this.points.push(new Point(this.x - this.width / 2, this.y, this.z, 20));
    this.points.push(new Point(this.x + this.width / 2, this.y, this.z, 20));

    this.render = function (angleX, angleY) {
        ctx.beginPath();
        for (var p = 0; p < this.points.length; p++) {
            var point = this.points[p];

            rotateX(point, angleX);
            rotateY(point, angleY);
            doPerspective(point);

            ctx.arc(point.xpos, point.ypos, point.size, 0, Math.PI * 2, true);

            if (p == 0) {
                ctx.moveTo(this.points[0].xpos, this.points[0].ypos);
            } else {
                ctx.lineTo(point.xpos, point.ypos);
            }
        }

        ctx.closePath();
        ctx.stroke();
        ctx.fill();
    }
}

// 3d Functions for rotation and perspective
function rotateX(point, angleX) {
    var cosX = Math.cos(angleX),
        sinX = Math.sin(angleX),
        y1 = point.y * cosX - point.z * sinX,
        z1 = point.z * cosX + point.y * sinX;
    point.y = y1;
    point.z = z1;
}

function rotateY(point, angleY) {
    var cosY = Math.cos(angleY),
        sinY = Math.sin(angleY),
        x1 = point.x * cosY - point.z * sinY,
        z1 = point.z * cosY + point.x * sinY;
    point.x = x1;
    point.z = z1;
}

function doPerspective(point) {
    if (point.z > -fl) {
        var scale = fl / (fl + point.z);
        point.size = scale * 5;
        point.xpos = vpX + point.x * scale;
        point.ypos = vpY + point.y * scale;
    }
}

// Init code
var sections = [],
    numSections = 50,
    fl = 250,
    vpX,
    vpY,
    angle = 0;

vpX = canvas.width / 2;
vpY = canvas.height / 2;

// make some sections
for (var i = 0; i < numSections; i++) {
    sections.push(new Section(0, -250 + (i * 10), 0, 50));
}

function render() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    colorCycle(0.1);
    ctx.fillStyle = "rgb(" + colors.r + "," + colors.g + "," + colors.b + ")";
    ctx.strokeStyle = "rgb(" + colors.r + "," + colors.g + "," + colors.b + ")";
    for (var i = 0; i < sections.length; i++) {
        sections[i].render(0, 0.03);
    }
    requestAnimationFrame(render);
}
render();

var canvas=document.getElementById（“canvas”），
ctx=canvas.getContext（“2d”）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
ctx.lineWidth=4；
//颜色不是很重要，只是绒毛
var循环=0，
颜色={
r:0，
g:170，
b:0
};
功能彩色循环（inc）{
循环+=公司；
如果（循环>100）{
周期=0；
}
colors.r=~（Math.sin（.3*循环+0）*127+128）；
colors.g=~（Math.sin（.3*循环+2）*127+128）；
colors.b=~~（Math.sin（.3*循环+4）*127+128）；
}
//章节和要点
功能点（x、y、z、大小）{
这个.x=x；
这个。y=y；
这个。z=z；
这个.xpos=0；
这1.ypos=0；
这个尺寸=5；
rotateY（该角度+=0.1）；
}
功能部分（x、y、z、宽度）{
这个.x=x；
这个。y=y；
这个。z=z；
这个。宽度=宽度；
此参数为.points=[]；
this.points.push（新点（this.x-this.width/2，this.y，this.z，20））；
this.points.push（新点（this.x+this.width/2，this.y，this.z，20））；
this.render=函数（angleX，angleY）{
ctx.beginPath（）；
对于（var p=0；p-fl）{
var标度=fl/（fl+点z）；
点尺寸=刻度*5；
point.xpos=vpX+point.x*比例；
point.ypos=vpY+point.y*刻度；
}
}
//初始化代码
var节=[]，
numSections=50，
fl=250，
vpX，
vpY，
角度=0；
vpX=画布宽度/2；
vpY=画布高度/2；
//做一些部分
对于（变量i=0；i

大部分是图像。或者你是说要点？这种效果不需要实际的3D画布。对不起，应该更具体一些。我指的是背景点。更新了问题。我最近也看了three.js，但我想做的是在3D空间中设置2D对象的动画，而不是设置3D对象的动画。我会更新这个问题。这是非常棒的东西！如果我的问题听起来有点像‘嘿，给我代码’，我道歉；那不是我的本意。我只是在寻找一个“嘿，你可以用X+Y来达到效果”。