我最近一直在学习如何使用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>
最佳答案
您的圈子无法平滑地扩大和缩小，因为浏览器无法按照您需要的速度呈现它。
这是来自 Two.js.org :
two.play()callstwo.update()at 60fps. This rate, however, will slowdown if there's too much content to render per frame
无论您使用frameCount还是timeDelta都会发生这种情况。
答案在 Poor performance - SVG animations回顾一些提高 Two.js 性能的策略。 此外，您可以使用 CSS 动画和 @keylines 重新创建此动画，以获得相同的动画。
我认为这与您所做的非常接近: https://jsfiddle.net/merhoo/skmz279w/1/
希望有帮助!
关于javascript - 如何在 Two.js 中创建深度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41389816/