I am a beginner with HTML image maps and three.js objects. I have successfully resized the image map as the window resizes, but I am struggling to insert additional JavaScript code for optimizing the performance.
Although there are existing threads on this topic, I haven't been able to determine where exactly in my code I should include the provided JavaScript solution that others have found helpful.
The JavaScript snippet I am referring to is designed to adjust the coordinates of the image map based on a scale value, which sounds like it would be beneficial for my project. However, I am unsure about the appropriate placement within my current script.
If you'd like to see my website in action, feel free to visit aurnab.info. It works best on Safari and Firefox browsers.
The following code represents the structure of my webpage, and I am looking to integrate the aforementioned script seamlessly:
<!DOCTYPE html>
<html lang="en">
<head>
<title>aurnab saleh</title>
<meta charset="utf-8>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background:url("obj/me/homefinal.jpg");
background-size:100%;
margin: 0;
width:1280px;
height:800px;
overflow:hidden;
background-repeat: no-repeat;
background-position:fixed;
}
canvas {
position:absolute;
top:0;
left:0;
z-index:-1;
}
</style>
</head>
<body>
<script src="../build/three.min.js"></script>
<script src="js/loaders/DDSLoader.js"></script>
<script src="js/loaders/MTLLoader.js"></script>
<script src="js/loaders/OBJMTLLoader.js"></script>
<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>
<img src="obj/me/homefinal.jpg" width="1280" height="800" usemap="#Map" border="0" style="opacity:0"/>
<map name="Map" id="Map">
<area shape="rect" coords="650,365,713,422" href="http://soundcloud.com/bilderberg-group" target="_blank" alt="soundcloud" />
<area shape="rect" coords="650,465,711,522" href="http://djgunk.tumblr.com" target="_blank" alt="tumblr" />
<area shape="rect" coords="648,565,710,619" href="http://vimeo.com/aurnab" target="_blank" alt="vimeo" />
<area shape="rect" coords="647,665,711,723" href="email.html" target="_blank" alt="gmail" />
</map>
<script>
// Insert mapRebuild function here
var container, stats;
var camera, scene, renderer;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
// Additional three.js functions
}
function onWindowResize() {
windowHalfX = window.innerWidth / 3;
windowHalfY = window.innerHeight / 3;
// Adjusting camera settings
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX ) / 10;
mouseY = ( event.clientY - windowHalfY ) / -2;
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
camera.position.x += (- mouseX - camera.position.x ) * .08;
camera.position.y += ( - mouseY - camera.position.y ) * .008;
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
</script>
</body>
</html>