问题标签 [two.js]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
228 浏览

javascript - 如何使用 two.js 创建圆形热点?

我正在尝试制作一个太阳系模型。到目前为止,我使用 two.js 完成了这一切。我想这样做,当鼠标在行星的轨道路径上时,它会突出显示该行星的轨道,并成为有关该行星的信息的链接。不过,我很难找到一种方法来做到这一点。

如果你没有,这里是Two.js

我的文件结构如下所示:

PS。这不会使用“运行代码片段”功能呈现。如果您想查看它,您必须保存此代码并将其放在与我相同的文件结构中。

0 投票
1 回答
341 浏览

two.js - 是否可以在一个方向上缩放两个.js 组

Two.js 似乎只支持比例的单个值,而不支持 x,y 组件。是否可以水平拉伸某些东西?

0 投票
1 回答
2382 浏览

javascript - 如何在 two.js 中捕获形状或组的点击事件?

我已经使用 two.js 绘制了一个形状,我想编写代码来处理该形状上的点击事件。不是画布,而是形状本身。

这段代码取自一个看起来应该可以工作的答案:

但它对我使用最新的 JQuery 和最新的 two.js 不起作用,并且在示例中似乎也不起作用,因为代码看起来好像点击圆圈应该使颜色发生变化但是我尝试过的任何浏览器或计算机上都没有任何反应。

那么,如何捕获并响应使用 two.js 绘制的形状/组的点击事件?

0 投票
0 回答
50 浏览

javascript - 弹跳球在 Firefox 中消失

我使用 Two.js 编写了一个简单的弹跳球动画。这只是一个从墙上弹起的球。它在 Chrome 中对我来说工作得很好,但在 Firefox 中,球消失并在几秒钟后重新出现在屏幕的另一部分,这意味着球正在移动,只是随机变得短暂不可见。

这是我的代码:

JSFiddle 示例

同样,同样的事情在 Chrome 中也能正常工作。

此外,如果我用画布替换 div 并改用它,它在 Chrome 和 Firefox 中都可以正常工作:

如果有人能解释这种奇怪的行为,那就太好了。

0 投票
1 回答
10005 浏览

performance - 性能不佳 - SVG 动画

所以我正在为一个客户端创建一些动画,我一直在玩 two.js,因为我喜欢它的 SVG 功能。不幸的是,我遇到了性能问题。

我正在屏幕上绘制 100 个圆圈。每个圆圈包含 6 个进一步的圆圈,总共 700 个圆圈在加载时被渲染。

圆圈对 x 轴上的鼠标移动做出反应,并在 y 轴上缓慢向下层叠。

目前在 Chrome 中,它仅以 32FPS 左右的速度运行。在 Firefox 中它几乎无法正常工作!

我还尝试了 two.js 的 webgl 渲染器,但虽然性能略有提高,但元素看起来不如 SVG。

来源在这里:https ://github.com/ashmore11/verifyle/tree/develop

文件路径:src/coffee/elements/dots

让我知道我是否可以提供更多信息。

0 投票
2 回答
778 浏览

javascript - Y轴反转

我在 javascript 中使用 two.js 库来制作系统坐标,并且我希望 Y 轴倒置。现在 0,0 在左上角,但我希望它在左下角

0 投票
1 回答
166 浏览

javascript - 将 two.js 与 dat.GUI 链接

我想将更改letter.linewidth = 10与 dat.GUI 中的控件链接。

这是完整letter变量的代码:

要向 dat.GUI 添加一个元素,它会在文档“ The property must be public, i.e. defined by this.prop = value”中说明,但是当我this.在它前面添加时letter.linewidth会破坏 two.js 的功能并且不会解释 SVG。

我对 JavaScript 有点陌生,很难弄清楚这一点。

任何帮助将不胜感激。

0 投票
1 回答
515 浏览

javascript - Add an HTML class to a DOM element controlled by two.js

I'm trying to add a class and ID to specific Two.js objects in this project: http://itpblog.evejweinberg.com/Homework/Open/ (click a few times to play) If I console.log the word 'background' I see that these are two.js objects but I can't seem to use css or jquery to add a class/ID to them.

Any help is appreciated!

I even tried adding it to the whole project but that did not work:

0 投票
1 回答
1164 浏览

javascript - 使用 js 动态添加 SVG 掩码

我正在使用 jquery 和 two.js 的组合来创建动画 svg。我遇到了一个奇怪的错误,即标记被错误地添加并且没有被浏览器呈现。

真正奇怪的部分是,如果我在 chrome 中打开检查器并在掩码元素上选择“编辑为 html”并向掩码添加任何额外的元素,整个事情就会按预期呈现。

我复制/粘贴了 html 并发现了这一点:

我正在使用 vanilla js 来设置样式:

但无济于事。

这是标记的重要部分:

0 投票
1 回答
270 浏览

javascript - 使用 Hammer.js 控制 Two.js SVG

我曾经解释过SVG Two.js,我想控制参数的变化,例如linewidth,和.scalerotationnoFill().strokeHammer.js

这是一个JSFiddle,显示了我目前使用它的位置。这是我当前的 Two.js 解释,其中包含来自 Hammer.js 团队的一些代码 @runspired 在他们的 Slack 频道上与我分享。它正在使用 TouchEmulator(); 为第二个指针添加移位功能。

正如您在小提琴中看到的那样,我正在尝试添加letter.scalevar liveScale并且我正在尝试添加letter.rotationvar currentRotation. 我希望这会链接起来,以便触摸运动的开始会触发上面 Two.js 中定义的这些变量的变化。我这么想是不是很傻?有没有人知道某种形式的可能修复?

我一直在使用 dat.GUI 来控制 Two.js 解释的 SVG 的参数,但是现在是时候为此添加触摸支持并摆脱滑块了。

任何想法/反馈将不胜感激。