Javascript Three.js：单击对象时页面向下移动

这是我第一次添加Three.js，我只想在我网站的登录页中添加。 每当我单击场景中对象所在的区域时，页面就会向下移动。我能做些什么来防止这种情况发生？当我点击它时，页面会移动，因此对象位于中心。我试图添加溢出：隐藏；在我的css中，但这不起作用。我怀疑我必须更改javascript代码中的某些内容

var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（70，window.innerWidth/window.innerHeight，11000）；
摄像机位置z=8；
var renderer=new THREE.WebGLRenderer（{antialas:true，alpha:true}）；
环境光=新的三个环境光（0xffffff，0.8）；
场景。添加（环境光）；
灯光=新的三点灯光（0xffffff，1，20）；
光。位置。设置（10,10,10）；
light.castShadow=true；
light.shadow.camera.near=10；
light.shadow.camera.far=25；
场景。添加（灯光）；
renderer.shadowMap.enabled=true；
renderer.shadowMap.type=THREE.BasicShadowMap；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
var controls=新的三个.OrbitControls（摄影机、渲染器.doElement）；
controls.enableZoom=false；
controls.enablePan=false；
var boxGeom=新的三个BoxBufferGeometry（3,3,3,33,33）；
//这是官方示例中用于创建球体变形目标的缩短部分
var pos=boxGeom.attributes.position；
boxGeom.morphAttributes.position=[]；
var spherePositions=[]；
var v3=新的3.Vector3（）；
对于（变量i=0；i{
行动（1）；
}
box.userData.toBox=（）=>{
行动（0）；
}
//吐温功能
功能作用（影响）{
if（box.userData.currentAction）box.userData.currentAction.stop（）；
box.userData.currentAction=新建TWEEN.TWEEN（box.morphTargetInfluences）.to({
“0”：影响
}，1000）。开始（）；
}
var raycaster=new THREE.raycaster（）；
var mouse=new THREE.Vector2（）；
var相交=[]；
addEventListener（“mousemove”，onMouseMove）；
mouseMove函数（事件）{
mouse.x=（event.clientX/window.innerWidth）*2-1；
mouse.y=-（event.clientY/window.innerHeight）*2+1；
raycaster.setFromCamera（鼠标、相机）；
相交=光线投射器。相交对象（框）；
如果（相交长度>0）{
如果（！box.userData.isHovering）{
box.userData.toSphere（）；
box.userData.isHovering=true；
};
}否则{
if（box.userData.isHovering）{
box.userData.toBox（）；
box.userData.isHovering=false；
}
}
}
renderer.setAnimationLoop（（）=>{
TWEEN.update（）；
box.rotation.x+=0.01；
box.rotation.y+=0.01；
渲染器。渲染（场景、摄影机）
});
addEventListener（'resize'，onWindowResize，false）；
函数onWindowResize（）{
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
}

/*字体*/
@字体{
字体系列：“CoreSANGS55MediuUploadedFile”；
src:url（'../font/core_sans_gs_55_medium-webfont.woff2'）格式（'woff2'），
url（'../fonts/core_sans_gs_55_medium-webfont.woff'）格式（'woff'）；
字体大小：正常；
字体风格：普通；
}
@导入url（'https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap'）；
/*背景*/
身体{
保证金：0；
用户选择：无；
不透明度：0；
过渡：不透明度1s；
-webkit转换：不透明度1s；
最大宽度：100%；
溢出：隐藏；
背景：线性梯度（向右，#FF76FB 0%，#C57BFF 35%，#00FFFB 100%）；
背景大小：200%200%；
动画：背景渐变20秒轻松无限；
：：选择{
背景：透明；
}
}
@关键帧背景梯度{
0%{背景位置：0%50%；}
50%{背景位置：100%50%；}
100%{背景位置：0%50%；}
}
/*内容*/
h1{字体系列：'CoreSANGS55MediuUploadedFile'；
字体大小：100px；
文本对齐：居中；
填充顶部：50px；
边缘顶部：50px；
宽度：100%；
位置：绝对位置；
左：0；
右：0；
保证金：自动；
z指数：1；
}
h1a{颜色：#00FFD8；
-webkit文本笔划：1px蓝色；
文本阴影：0px 0px蓝色，0px 0px蓝色，3px 3px蓝色；
文字装饰：无；
-webkit转换：所有1都很容易；}
h1a：悬停{color:#febff；
-webkit文本笔划：1px洋红色；
文本阴影：0px 0px品红，0px 0px品红，5px 4px品红；
字母间距：10px；
-webkit转换：所有1都很容易；}
保险商实验室{
-网络工具包动画：Fadein1s；
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
位置：绝对位置；
z指数：1；
顶部：250px；
宽度：100%；
文本对齐：居中；
}
李{
显示：内联；
}    
李阿{
填充：20px 100px；
文字装饰：无；
字体系列：“CoreSANGS55MediuUploadedFile”；
字体大小：30px；
颜色：蓝色；
宽度：100%；
文字装饰：无；
文本对齐：居中；
}
李娜：停下来{
颜色：洋红色；
}
.更改名称{
位置：固定；
顶部：640px；
文本对齐：居中；
}
.更改关键字{
用户选择：无；
字体系列：“Roboto Mono”，monospace；
字号：500；
字号：38px；
不透明度：0；
过渡