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.
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.
The following is the notes during my trial (struggle) so far.
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.
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;
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.
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.
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.