将HTML类添加到由two.js控制的DOM元素

Question

我正在尝试向这个项目中的特定背景对象添加一个类和ID：http://itpblog.evejweinberg.com/Homework/Open/ (单击几次可以播放)如果我console.log单词'background‘，我看到这些是Two.js对象，但我似乎不能使用css或jquery向它们添加类/ID。

如有任何帮助，我们不胜感激！

我甚至尝试将它添加到整个项目中，但这并不起作用：

$(document.body).addClass("dropshadow");

Answer 1

two.js实体本身不是DOM元素，但每个场景、组或多边形至少包含一个对更改实体时绘制的DOM元素的引用。要引用各种DOM元素，请使用以下语法：

// Initialize two.js and attach to a dom element referenced by `canvas`
var two = new Two(params).appendTo(canvas);

// Two.Scene
var my_scene = two.renderer.domElement;

// Two.Group
var my_group = document.getElementById(two.scene.id);

// Two.Polygon — requires knowing the ID by means of your custom app logic.
var my_poly  = document.getElementById(my_poly_html_id);
my_poly.classList.add('my-class');

这是一个屏幕截图，显示了实际应用程序中的所有三个命令以及每个命令的结果，还有一个额外的命令将一个类添加到目标形状。最后一个命令的语法有所不同，但我省略了var语句，以便控制台显示结果，而不是输出undefined。

​

​

如果要为各个形状创建自定义HTML，请在初始渲染形状之前使用.id设置器。因为这段代码的大部分只是设置，所以I offer a practical example on one of my own projects。在该代码片段中，shape变量保存Two.Polygon的一个新实例，因此在第一次调用two.update()绘制形状之前调用shape.id = 'something-unique'会产生一个具有自定义HTML的DOM元素。下面是一个不完整的设置代码块，它显示了如何设置ID：

// Create new shape
var shape = two.makeRectangle(START_X, START_Y, START_WIDTH, START_HEIGHT);

// Set custom ID
shape.id = 'shape-' + Math.random(10000000);

// Draw shape for first time.
two.update();