如何在two.js中创建深度
我最近一直在学习如何使用two.js，我想围绕另一个物体做一个圆的轨道，比如行星。由于它需要经过它环绕的物体的后面，我尝试在它移动时动态地改变圆的大小，以创造深度的错觉。我看到了另一个关于使用矩阵在two.js中更改大小的溢出问题，并尝试将其应用于此，但我无法获得与轨道运动同步的大小更改。如果有任何帮助，我将不胜感激。
JS (因为它需要two.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>回答 1
Stack Overflow用户
发布于 2019-01-03 05:01:48
你的圆圈不会平滑地扩大和缩小，因为浏览器不能像你需要的那样快速地渲染它。
这是来自Two.js.org的
two.play()以60fps的速度调用two.update()。然而，如果每帧有太多的内容要渲染，那么这个速度就会变慢
无论你使用的是frameCount还是timeDelta，这种情况都会发生。
Poor performance - SVG animations中的答案回顾了一些提高two.js性能的策略。此外，您可以使用带有@keystrokes的CSS动画重新创建此动画，以获得相同的动画。
我认为这与您所做的非常接近：https://jsfiddle.net/merhoo/skmz279w/1/
希望这能有所帮助！
https://stackoverflow.com/questions/41389816
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号