I thought I could take over from after the help you gave me but I’m still stuck and I don’t understand why. I’ve done this several times without web components.
I hope that once the the cube animation works, I’ll be able to make it work. So, if someone could help me, that would be very nice!
Short question: In the “responsive design” post (https://threejsfundamentals.org/threejs/lessons/threejs-responsive.html), they compute whether they should resize the canvas at each frame. Isn’t it better to use an eventListener on the window to do that, performance-wise? (second option seen in many other examples).
The problem was passing a method to requestAnimationFrame. You have to instead wrap the method call in a function. To avoid losing the this context, I used an arrow function. Not that obvious, eh?
PS: If you configure the renderer with antialias: true at construction, you will get smoother edges on the cube: https://jsfiddle.net/1yxnecgo/1/
No, not obvious at all! It reminds of something I learnt a few days ago. To call a method from another method in the same class, in the constructor they added:
this.method = this.method.bind(this);
So I tried it here (Edit fiddle - JSFiddle - Code Playground lines 27 and 66)… but it did not work… perhaps because they are two levels? The console says: too much recursion.
This is very useful. Web components have difficulties I am not accustomed. I’m glad you’re helping me! It is very interesting!
If you need to pass a long function that needs the this context, you can either use tricks like someFunction.bind(this); or declare a named reference to the this context outside the function: const scope = this; and use scope instead of this inside the function. Or you can use an arrow function with a block (because arrow functions keep the this context):