如何在 two.js 中创建深度答案

【问题标题】：How to create depth in two.js如何在 two.js 中创建深度
【发布时间】：2019-01-03 08:59:45
【问题描述】：

我最近一直在学习如何使用 two.js，我想围绕另一个物体（如行星）绕一个圆轨道。由于它需要从环绕它的物体后面经过，我试图在它移动时动态改变圆的大小以产生深度错觉。我看到另一个关于使用矩阵在 two.js 中更改大小的溢出问题，并尝试在此处应用它，但我无法使大小更改与轨道运动同步。我将不胜感激。

JS bin（因为它需要两个.js 库，所以一开始不会产生任何东西，但我为了方便任何想要帮助的人而制作它）：https://jsbin.com/rugakojivu/edit?html,output

<html>
<head>
<script src = "two.js"></script>
</head>
<body>
<div id = "frame"></div>
<script>
var el = document.getElementById("frame");
var two = new Two({fullscreen:true}).appendTo(el);
var bigAngle = 0,
smallAngle  = 0,
distance   = 10,
radius     = 50,
orbit      = 200,
orbits     = two.makeGroup();
var  offset = 300;

function getPositions(angle, orbit) {
return {
    x: Math.cos(angle * Math.PI / 180) * orbit,
    y: Math.sin(angle * Math.PI / 180) * orbit
};
}

var pos = getPositions(bigAngle,orbit),
big = two.makeCircle(pos.x+offset,pos.y+offset,radius);

big.stroke="#123456";
big.linewidth=7;
big.fill="#194878";

big._matrix.manual=true;

two.bind("update",function(frameCount){
  var pos = getPositions(bigAngle++,orbit);
  big.translation.x=pos.x+offset;
  big.translation.y=pos.y+offset;
});

  two.bind("update",function(frameCount,timeDelta){
  var sx=Math.sin(frameCount/200);
  big._matrix
    .identity()
    .translate(big.translation.x, big.translation.y)
    .rotate(big.rotation)
    .scale(sx);

    });
    two.play();


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

【问题讨论】：

标签： javascript two.js

【解决方案1】：

您的圈子不会平滑地扩大和缩小，因为浏览器无法以您需要的速度呈现它。

这是来自Two.js.org：

two.play() 以 60fps 调用 two.update()。然而，这个比率将如果每帧要渲染的内容过多，则速度会变慢

无论您使用frameCount 还是timeDelta，都会发生这种情况。

Poor performance - SVG animations 中的答案回顾了一些提高 two.js 性能的策略。此外，您可以使用带有 @keystrokes 的 CSS 动画重新创建它以获得相同的动画。

我认为这与您所做的非常接近： https://jsfiddle.net/merhoo/skmz279w/1/

希望有帮助！

【讨论】：