Three.js – Location Selector

Three.js again. But, this time, I’ve tried on some interactions with standard HTML DOM elements by slightly changing the direction.

The following is the working example and screenshots.

Three.js – Location Selector

blog_location_selector1

blog_location_selector2

This is intended to provide a location (country) selector using Three.js sphere object. You can select a country on the sphere, and then, it can open the corresponding google web site based on the selection.

It’s just a UI Testing with Three.js and may not be practical one. But, I found interesting is that it’s not so difficult to interact with HTML elements and Three.js objects. When I search around the Three.js (WebGL), it’s mostly about the graphical demos and gaming. However, one good aspect of WebGL would be the seamless development/interaction with HTML/JavaScript features. It may be good to look for a way to pursue more integration with it.

The following is the notes during my trial (struggle) so far.

Mouse Interaction

It’s about rotation of the sphere based on the mouse dragging. One way is to track the mouse position and move camera, but “TrackballControls.js” in the Three.js example handles the scenario very easily. It’s basically just creating a “THREE.TrackballControls” object with some parameters, and call “update” method of the object for each animation frame. It works nicely.

https://github.com/mrdoob/three.js/blob/master/examples/js/controls/TrackballControls.js

[initialize]

controls = new THREE.TrackballControls(camera);
controls.target.set(0, 0, 0);
controls.rotateSpeed = 1.0;
controls.zoomSpeed   = 1.2;
controls.panSpeed    = 0.3;
controls.noRotate    = false;
controls.noZoom      = true;
controls.noPan       = true;

[update]

controls.update();

DIV Tag Overlay

It’s about showing the country name on the sphere. It’s a div tag shown over the canvas for Three.js. The following GitHub issue covers an example to map the 3D location into 2D canvas location, which allows to identify where to locate the DOM element.

https://github.com/mrdoob/three.js/issues/1321

In my example, this method is used to identify the x/y location of the element (left/top), and using z location to show/hide the element.

Loading Texture

It seems like texture loading using “THREE.ImageUtils.loadTexture” is executed asynchronously. 3rd argument of the function takes “onLoad” callback to handle the completion scenario. The following sites have related information.

http://stackoverflow.com/questions/7919516/using-textures-in-three-js
http://stackoverflow.com/questions/6911815/how-do-i-use-texture-on-a-sphere-in-three-js

Advertisements

Posted on May 7, 2013, in JavaScript. Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: