This is my first time adding Three.js and I just want to include in a landing page of my website. I have a problem whenever I click on the area of the scene where my object is, the page moves down. What can I do to prevent this from happening? It looks like when I click on it, the page moves so the object is in the center. I tried to add overflow: hidden; in my css but that doesn't work. I am suspecting I have to change something 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);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableZoom = false;
controls.enablePan = false;
var boxGeom = new THREE.BoxBufferGeometry(3, 3, 3, 33, 33, 33);
// this is the shortened part from the official example to create the sphere morph targets
var pos = boxGeom.attributes.position;
boxGeom.morphAttributes.position = [];
var spherePositions = [];
var v3 = new THREE.Vector3();
for (var i = 0; i < pos.count; i++) {
v3.fromBufferAttribute(pos, i).setLength((1.5 * Math.sqrt(1.5) + 1.5) * 0.6);
spherePositions.push(v3.x, v3.y, v3.z);
}
boxGeom.morphAttributes.position[0] = new THREE.Float32BufferAttribute(spherePositions, 3);
var boxMat = new THREE.MeshPhongMaterial({
color: "white",
wireframe: false,
flatShading: true,
morphTargets: true
});
var box = new THREE.Mesh(boxGeom, boxMat);
scene.add(box);
// user's custom properties and methods
box.userData.isHovering = true;
box.userData.currentAction = null;
box.userData.toSphere = () => {
action(1);
}
box.userData.toBox = () => {
action(0);
}
// tweening function
function action(influence) {
if (box.userData.currentAction) box.userData.currentAction.stop();
box.userData.currentAction = new TWEEN.Tween(box.morphTargetInfluences).to({
"0": influence
}, 1000).start();
}
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var intersects = [];
window.addEventListener("mousemove", onMouseMove);
function onMouseMove(event) {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
intersects = raycaster.intersectObject(box);
if (intersects.length > 0) {
if (!box.userData.isHovering) {
box.userData.toSphere();
box.userData.isHovering = true;
};
} else {
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;
renderer.render(scene, camera)
});
window.addEventListener( 'resize', onWindowResize, false );
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}/*font*/
@font-face {
font-family: 'coresansgs55mediuuploadedfile';
src: url('../fonts/core_sans_gs_55_medium-webfont.woff2') format('woff2'),
url('../fonts/core_sans_gs_55_medium-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap');
/*background*/
body {
margin: 0;
user-select: none;
opacity: 0;
transition: opacity 1s;
-webkit-transition: opacity 1s;
max-width: 100%;
overflow: hidden;
background: linear-gradient(to right, #FF76FB 0%, #C57BFF 35%, #00FFFB 100%);
background-size: 200% 200%;
animation: BackgroundGradient 20s ease infinite;
::selection {
background: transparent;
}
}
@keyframes BackgroundGradient {
0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
100% {background-position: 0% 50%;}
}
/*content*/
h1 { font-family: 'coresansgs55mediuuploadedfile';
font-size: 100px;
text-align: center;
padding-top: 50px;
margin-top: 50px;
width: 100%;
position: absolute;
left: 0;
right: 0;
margin: auto;
z-index: 1;
}
h1 a{color: #00FFD8;
-webkit-text-stroke: 1px blue;
text-shadow: 0px 0px blue, 0px 0px blue, 3px 3px blue;
text-decoration: none;
-webkit-transition: all 1s ease;}
h1 a:hover {color: #febfff;
-webkit-text-stroke: 1px magenta;
text-shadow: 0px 0px magenta, 0px 0px magenta, 5px 4px magenta;
letter-spacing: 10px;
-webkit-transition: all 1s ease;}
ul {
-webkit-animation: fadein 1s;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position: absolute;
z-index: 1;
top: 250px;
width: 100%;
text-align: center;
}
li {
display: inline;
}
li a {
padding: 20px 100px;
text-decoration: none;
font-family: 'coresansgs55mediuuploadedfile';
font-size: 30px;
color: blue;
width: 100%;
text-decoration: none;
text-align: center;
}
li a:hover{
color: magenta;
}
.changing-title {
position: fixed;
top: 640px;
text-align: center;
}
.changing-keyword {
user-select: none;
font-family: 'Roboto Mono', monospace;
font-weight: 500;
font-size: 38px;
opacity: 0;
transition: opacity 0s;
visibility: collapse;
position: fixed;
width: 100%;
margin: 0 auto;
text-align: center;
}
.shown {
opacity: 1;
visibility: visible;
text-align: center;
}
@media (min-width: 2000px) {
.changing-title {
position: relative;
top: 640px;
right: 50%;
text-align: center;}
.changing-keyword {
font-size: 50px;
}}<!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>Looks like OrbitControls places a mousedown event listener on the canvas and calls the canvas into focus. You'll need to remove/override that event listener to prevent the focus behavior.
