|
Previous Entry: “Mixing HTML and TeX in a StyledTextCtrl in wxPython”
Next Entry: “Making the AnaglyphWebGLRenderer a bit more protruding” 2012-04-15Modified TrackballControls for Three.jsWebGL is a technology that allows web browsers to display graphics using the fast routines of the graphics card, and Three.js is a framework which makes working with WebGL a lot easier. Among many other things, Three.js provides “controls”, Javascript objects which handle the interaction between mouse events and the WebGL canvas. One such control is TrackballControls. It maps mouse dragging gestures on an imaginary trackball and rotates the scene accordingly. I have used it to make models of polyhedra rotatable for my viewers: Stubsmütter und Tribanocci (a link to the German section of this blog). Per default, the imaginary Trackball fills the entire available browser window. This is less than ideal if the actual WebGL canvas is just a tiny illustration within a larger text:
Even more problematic is when the canvas element is part of a page that doesn’t fit on the screen (if the web page is several screen pages tall). In that case, the imaginary trackball and the canvas element might be more or less unrelated, and the control can behave strange and unexpected.
It would be better if the size and position of the imaginary trackball would fit the actual canvas element, but there is a problem with that: when the javascript constructor of the control object is called, the canvas element might not yet be a part of the document tree, because it only becomes inserted into the document at a later stage. There is a special javascript event called “DOMNodeInsertedIntoDocument ”. In an ideal world, TrackballControls could wait for this event, and as soon as it is called, adjust its imaginary trackball. Unfortunately, the browser support for this event is rather abysmal, so I can’t use that. As the next best thing, I decided to wait for the first mouse click for my adjustment of the imaginary trackball. If the user is able to click on the canvas element, then it should also be part of the document tree and posses a size and a position I can use. I wrote my own version of TrackballControls, TinyTrackballControls, defined in a file TinyTrackballControls.js. This red icosahedron uses the ordinary TrackballControls: Nothing to see, since your browser doesn’t support the canvas element.
So far away from the top of the page and shifted to the left, it works really bad, since the trackball center and the icosahedron center don’t align well. This green icosahedron uses my TinyTrackballControls: Still nothing to see, sorry.
To use it, you can call it like you would call an ordinary TrackballControll. Everything else is done automatically:
<script src="Three.js"></script> <script src="TinyTrackballControls.js"></script> <script> init(); function init() { /* ... other stuff, like my_renderer, my_scene, my_camera etc. ... */ ordinary_control = new THREE.TrackballControls(my_camera, my_renderer.domElement); enhanced_control = new THREE.TinyTrackballControls(my_camera, my_renderer.domElement); /* ... more other stuff ... */ } function animate() { requestAnimationFrame(animate); enhanced_control.update(); render(); } function render() { my_renderer.render(my_scene, my_camera); } <script> | QuicksearchRecent Entries
ArchivesLatest Skizzenblog Entry |
<a href="http://www.vehicleinsuronline.net/">insurance auto</a> <a href="http://www.autoinsuroptions.com/">car insurance in florida</a>
<a href="http://www.getallergytreatment.com/">order prednisone online</a> <a href="http://www.menshealthmeds.net/">cialis online</a>