Exploring Three.js for the first time, I'm looking to integrate it into the landing page of my website. However, I've encountered an issue where clicking on the scene area with my object causes the page to shift downward. I've tried adding overflow: hidden; in my CSS, but that hasn't fixed the problem. It seems like the page moves to center the object when clicked. My suspicion is that I need to make adjustments in the JavaScript code.
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 8;
var renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
scene.add(ambientLight);
light = new THREE.PointLight(0xffffff, 1, 20);
light.position.set(10,10,10);
light.castShadow = true;
light.shadow.camera.near = 10;
light.shadow.camera.far = 25;
scene.add(light);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.BasicShadowMap;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Rest of the JavaScript code...
/* CSS styling code... */<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
</head>
<body onload="document.body.style.opacity='1'">
<h1>
<a href="../MAIN/main.html">hello world</a>
</h1>
<canvas id="canvas"></canvas>
<ul>
<li><a href="../WORK/work.html">work</a></li>
<li><a href="../ABOUT/about.html">about</a></li>
<li><a href="../CONTACT/contact.html">contact</a></li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.4.0/Tween.min.js"></script>
<script src="../MAIN/main.js"></script>
</body>
</html>