What's new:
As before, drag on the canvas to rotate the scene, scroll on it to change focal point (perspective projection).
Double click it to pause/resume.
I now added Fullscreen mode so that we can scroll on the canvas without scrolling the whole page and use single-key
hotkeys without worrying about conflicts with the editor.
Now, you can select a sphere by clicking on it (literally, click the sphere on the canvas!). And drag it around
to move it.
When a sphere is selected, you can also scroll whe mouse wheel to change its radius, and in fullscreen mode, press B and F key to send
it backward or forward according to your view point!
I also optimized the code a little bit, so that the transformation matrix is completely computed in CPU,
and applied (multiplied) inside the vertex shader.
I suggest moving spheres when pausing the scene by double clicking the canvas, otherwise the spheres are already moving.
If you found the scene somehow clipped, it seems to be a bug of chromium, please simply click on 'Super Sampling' button
or refresh the page. Otherwise the interactions won't work because the coordinates are wrong.
How it works:
I used similar method in raytracing to find the sphere it hits.
The transformation methods are implemented in lib4.header.js
Interaction parts are in lib4.ext.js
lib4.js most contains initialization methods for the renderer.
index.html is almost pure html.