If you notice in the following fiddle, you will see that calling .setFromCenterAndSize() on Box3 creates a new box everytime we click.
Whereas calling .set() creates only one box.

What is the way to call “.set” such that it creates new boxes everytime we click?
What is the other way to create many boxes on mouse clicks with “.set” if by default it doesn’t do so?

I’m afraid that’s not true. Similar to Box3.set(), Box3.setFromCenterAndSize() only sets the internal min and max vectors according to the given parameters. Both methods are no factory methods.

You create instances of Box3 via the new operator or via Box3.clone().

I can only say that I am grateful for your patience.

Now that you are here kindly tell me what sort of Maths topics do I need to study for GUI programming. Last time the book which you suggested is too advanced. I would like to start from basics. Something for beginners.

@NoName it’s hard to say exactly which Mathematical topics are required in a general GUI solution. It’s very dependent on the specific case you are working on. It’s also important to consider which technology you are using and the end-result you are looking for.

i.e, if you are building a GUI inside WebGL/Three.js it’s highly recommended to understand basic concepts of Linear Algebra. In order to familiarize yourself with vector operands/algebra and orthographic projections. However, if you are looking for a pure 2D HTML, there’s barely any need for understanding those concepts. In short, it depends.

Thank you for the useful reply.
I can learn linear algebra. But then that’s not enough I have heard, I have read that knowing calculus is also required for computer graphics programming. That’s the difficult part for me.

My advise is - learn JavaScript debugging. That way you can mess around until stuff works, and know when it doesn’t. It will serve you well either way you go as long as it has something to do with programming