Is there a way to access `Two.group.renderer.elem`?

[hughplay]

Describe your question

I try to access Two.Group.renderer.elem as Olivier described in https://github.com/jonobr1/two.js/issues/209. However, it failed. Accessing elem through the returned Proxy object seems not feasible. I wonder if there is another way to do this?

Your code (either pasted here, or a link to a hosted example)

Olivier's code (need to replace two.js in resource to make it work ) works in jsfiddle but failed under my environment.

My testing code:

this.ball = this.two.interpret(svg);
this.ball.center();
console.log(this.ball.renderer)
console.log(this.ball.renderer.elem)

Screenshots

What I see in my console:

You can see that this.ball.renderer contains elem, but directly accessing it will get undefined.

I know it must be something related to Proxy but have no idea how to resolve this problem.

Environment (please select one):

• [ ] Code executes in browser (e.g: using script tag to load library)
• [x] Packaged software (e.g: ES6 imports, react, angular, vue.js)
• [ ] Running headless (usually Node.js)

---

If applicable:

Desktop (please complete the following information):

• OS: Mac OS
• Browser: Chrome Version 98.0.4758.109 (Official Build) (x86_64)

Additional context

I use Vue 3 and import two.js like:

import Two from "two.js";

[jonobr1]

Using console.log can be tricky when dealing with JavaScript functions that are called frequently. In the case of Two.js the update loop is called multiple times a second through the requestAnimationFrame API. If you have instantiated your scene like this:

var two = new Two({ autostart: true });

Then it's likely that the at the point in the code you're describing the SVG element has yet to be created. However, when you pop open the console.log that is displaying the information at the time you clicked the carat, likely many frames have passed between the point in your code and when you clicked.

What you need to do when creating and directly accessing Two.js elements is to force the update loop yourself. This will generate the SVG element in the scene for you. Modifying your snippet, it should work with something like this:

this.ball = this.two.interpret(svg);
this.ball.center();
this.two.update();
console.log(this.ball.renderer)
console.log(this.ball.renderer.elem) // Should exist now

Alternatively, the id of the Two.js object is passed on to its SVG counterpart. While it wouldn't solve your current issue of retrieving an element that has yet to be created, this way does give you another way to access elements:

var elem = two.renderer.domElement.querySelector(`#${this.ball.id}`);

Hope this helps!

[hughplay]

Ok, I got it. After manually update, it works! Thanks! : )

[jonobr1]

Glad to hear. Happy coding!