What is it?
THREE JS 2D buttons and labels achorable library
How to use it:
First import the script after threejs library in your html:
<script src="three.min.js"></script>
<script src="hotspots.min.js"></script>Then you can use it like so:
// set render auto clear false.
renderer.autoClear = false;
// initialize global configuration
THREE.threeDataConfig = {renderer: renderer, camera: camera};
// new hotspot instance
hotspot = new THREE.Hotspot('img/example.png', 360, 180);
hotspot.position.set(10,0,0); // set 3D hotspot position.
// set pivot point.
hotspot.pivotPoint = THREE.HotspotPivotPoints.CENTER;
hotspot.onClick = function(){
// actions
};
// mouse events
hotspot.onMouseDown = function(){
// actions
};
hotspot.onMouseUp = function(){
// actions
};
hotspot.onMouseOver = function(){
// actions
};
// main update
function update()
{
requestAnimationFrame(update);
// hotspot instance update.
hotspot.update();
// first render main scene
renderer.clear();
renderer.render(scene, camera);
// call hotspots update
THREE.HotspotGlobals.update();
}
// on resize window
window.addEventListener("resize", function(event){
camera.aspect = threejsCanvas.width() / threejsCanvas.height();
camera.updateProjectionMatrix();
// call hotspot on resize function
THREE.HotspotGlobals.onResizeFunc();
renderer.setSize(threejsCanvas.width(), threejsCanvas.height());
});