'Canvas element covering Div element
I am making a login page for my website, and the login screen is currently not working because the canvas element is in front of the div element where all of the login form stuff happens. I am using Django for the backend. I have tried setting the z-index of the login-form and canvas, in addition to making the canvas have fixed position. To reproduce, I have included the HTML, CSS,and JS which can be put in a codepen. Nothing happens when you input into the form by design (not wired up to the django backend). As you will see if you are kind enough to help is that you cannot click on the form at all.
Thank you all for any advice that you could give on this.
body {
margin: 0;
text-align: center;
background-color: black;
cursor: crosshair;
}
main {
position: absolute;
display: grid;
grid-template-columns: repeat(12, 1fr)
}
canvas {
z-index: -1 !important;
position: fixed;
top: 70px;
left: 0;
width: 100%;
height: 100%;
}
#loginform {
top: 100px;
z-index: 999;
}
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--Font awesome icons -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'>
<link rel="stylesheet" href="{% static 'home/style.css' %}">
</head>
<body>
<div>
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-expand-md navbar-light " style="background-color: #000000">
<img id="Blacklight_Dog" src="{% static 'home/Blacklight_Dog.png' %}" alt="" style="width: 50px; height: 70px;">
<a href="/" class="navbar-brand" style="color: #ffffff">Blacklight</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse" style="background-color: #ffffff">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav ml-auto">
<a href="{% url 'login' %}" class="nav-item nav-link" style="color: #ffffff">Sign in</a>
</div>
</div>
</nav>
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js'></script>
<!--Any flash messages pop up in any page because this is the base template-->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- A plugin for password show/hide -->
<script src="https://unpkg.com/[email protected]/dist/bootstrap-show-password.min.js"></script>
</body>
<main>
<div id='loginform' class="container-fluid fixed-top">
<div class="form-content my-3 p-3" style="z-index: 400">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-5">
<div class="card shadow-lg border-0 rounded-lg mt-0 mb-3">
<div class="card-header justify-content-center">
<h3 class="font-weight-light my-1 text-center">Sign In</h3>
</div>
<div class="card-body">
<form method="POST">
<div class="form-row">
<div class="col-md-10 offset-md-1">
<div class="form-group">
<form>Username
<input type="text"></input></form>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-10 offset-md-1">
<div class="form-group">
<form>
password
<input type="text"></input>
</form>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-10 offset-md-1">
<div class="form-group">
<!-- Add a Remember me functionality -->
<label> Remember me</label>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-10 offset-md-1">
<div class="form-group mt-0 mb-1">
<button name="login" class="col-md-12 btn btn-dark" id="login">Sign in</button>
</div>
</div>
</div>
</form>
</div>
<div class="card-footer text-center">
<div class="small">
<a href="www.google.com">Don't have an account yet? Go to signup</a><br>
<a href="www.google.com"><i>Forgot Password?</i></a>
</div>
</div>
<canvas id="canvas">
</canvas>
</div>
</div>
</div>
</div>
</div>
</div>
<script src='https://threejs.org/examples/js/lights/RectAreaLightUniformsLib.js'></script>
</main>
</div>
</div>
</div>
And the JS that produces the canvas.
var canvasElem = document.getElementById("canvas");
var renderer = new THREE.WebGLRenderer({canvas:canvasElem});
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = false;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.shadowMap.needsUpdate = true;
window.addEventListener('resize', onWindowResize, false);
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
var camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 500 );
var scene = new THREE.Scene();
var cameraRange = 3;
var setcolor = 0x000000;
scene.background = new THREE.Color(setcolor)
scene.fog = new THREE.Fog(setcolor, 2.5, 3.5);
//-------------------------------------------------------------- SCENE
var sceneGruop = new THREE.Object3D();
var particularGruop = new THREE.Object3D();
var modularGruop = new THREE.Object3D();
function generateParticle(num, amp = 2) {
var gmaterial = new THREE.MeshPhysicalMaterial({color:0xFFFFFF, side:THREE.DoubleSide});
var gparticular = new THREE.CircleGeometry(0.2,5);
for (var i = 1; i < num; i++) {
var pscale = 0.001+Math.abs(mathRandom(0.03));
var particular = new THREE.Mesh(gparticular, gmaterial);
particular.position.set(mathRandom(amp),mathRandom(amp),mathRandom(amp));
particular.rotation.set(mathRandom(),mathRandom(),mathRandom());
particular.scale.set(pscale,pscale,pscale);
particular.speedValue = mathRandom(1);
particularGruop.add(particular);
}
}
generateParticle(200, 2);
sceneGruop.add(particularGruop);
scene.add(modularGruop);
scene.add(sceneGruop);
function mathRandom(num = 1) {
var setNumber = - Math.random() * num + Math.random() * num;
return setNumber;
}
//------------------------------------------------------------- INIT
function init() {
for (var i = 0; i<10; i++) {
var geometry = new THREE.IcosahedronGeometry(1);
var material = new THREE.MeshStandardMaterial({shading:THREE.FlatShading, color:0xFFFFFF, transparent:true, opacity:0.3, wireframe:true});
var cube = new THREE.Mesh(geometry, material);
cube.speedRotation = Math.random() * 0.1;
cube.positionX = mathRandom();
cube.positionY = mathRandom();
cube.positionZ = mathRandom();
cube.castShadow = true;
cube.receiveShadow = true;
var newScaleValue = mathRandom(0.3);
cube.scale.set(newScaleValue,newScaleValue,newScaleValue);
//---
cube.rotation.x = mathRandom(180 * Math.PI / 180);
cube.rotation.y = mathRandom(180 * Math.PI / 180);
cube.rotation.z = mathRandom(180 * Math.PI / 180);
//
cube.position.set(cube.positionX, cube.positionY, cube.positionZ);
modularGruop.add(cube);
}
}
//------------------------------------------------------------- CAMERA
camera.position.set(0, 0, cameraRange);
var cameraValue = false;
function cameraSet() {
if (!cameraValue) {
TweenMax.to(camera.position, 1, {z:cameraRange,ease:Power4.easeInOut});
cameraValue = true;
} else {
TweenMax.to(camera.position, 1, {z:cameraRange, x:0, y:0, ease:Power4.easeInOut});
INTERSECTED = null;
cameraValue = false;
}
}
//------------------------------------------------------------- SCENE
var ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.1);
//scene.add(ambientLight);
var light = new THREE.SpotLight(0xFFFFFF, 3);
light.position.set(5, 5, 2);
light.castShadow = true;
light.shadow.mapSize.width = 10000;
light.shadow.mapSize.height = light.shadow.mapSize.width;
light.penumbra = 0.5;
var lightBack = new THREE.PointLight(0x0FFFFF, 1);
lightBack.position.set(0, -3, -1);
scene.add(sceneGruop);
scene.add(light);
scene.add(lightBack);
var rectSize = 2;
var intensity = 100;
var rectLight = new THREE.RectAreaLight( 0xFFFFFF, intensity, rectSize, rectSize );
rectLight.position.set( 0, 0, 1 );
rectLight.lookAt( 0, 0, 0 );
scene.add( rectLight )
rectLightHelper = new THREE.RectAreaLightHelper( rectLight );
//scene.add( rectLightHelper );
//------------------------------------------------------------- RAYCASTER
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2(), INTERSECTED;
var intersected;
function onMouseMove(event) {
event.preventDefault();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}
function onMouseDown(event) {
event.preventDefault();
onMouseMove(event);
raycaster.setFromCamera(mouse, camera);
var intersected = raycaster.intersectObjects(modularGruop.children);
if (intersected.length > 0) {
cameraValue = false;
if (INTERSECTED != intersected[0].object) {
if (INTERSECTED) INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex);
INTERSECTED = intersected[0].object;
INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
INTERSECTED.material.emissive.setHex(0xFFFF00);
//INTERSECTED.material.map = null;
//lightBack.position.set(INTERSECTED.position.x,INTERSECTED.position.y,INTERSECTED.position.z);
TweenMax.to(camera.position, 1, {
x:INTERSECTED.position.x,
y:INTERSECTED.position.y,
z:INTERSECTED.position.z+3,
ease:Power2.easeInOut
});
} else {
if (INTERSECTED) INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex);
INTERSECTED = null;
}
}
console.log(intersected.length);
}
function onMouseUp(event) {
}
window.addEventListener('mousedown', onMouseDown, false);
window.addEventListener('mouseup', onMouseUp, false);
window.addEventListener('mousemove', onMouseMove, false);
//------------------------------------------------------------- RENDER
var uSpeed = 0.1;
function animate() {
var time = performance.now() * 0.0003;
requestAnimationFrame(animate);
//---
for (var i = 0, l = particularGruop.children.length; i<l; i++) {
var newObject = particularGruop.children[i];
newObject.rotation.x += newObject.speedValue/10;
newObject.rotation.y += newObject.speedValue/10;
newObject.rotation.z += newObject.speedValue/10;
//---
//newObject.position.y = Math.sin(time) * 3;
};
for (var i = 0, l = modularGruop.children.length; i<l; i++) {
var newCubes = modularGruop.children[i];
newCubes.rotation.x += 0.008;
newCubes.rotation.y += 0.005;
newCubes.rotation.z += 0.003;
//---
newCubes.position.x = Math.sin(time * newCubes.positionZ) * newCubes.positionY;
newCubes.position.y = Math.cos(time * newCubes.positionX) * newCubes.positionZ;
newCubes.position.z = Math.sin(time * newCubes.positionY) * newCubes.positionX;
}
//---
particularGruop.rotation.y += 0.005;
//---
modularGruop.rotation.y -= ((mouse.x * 4) + modularGruop.rotation.y) * uSpeed;
modularGruop.rotation.x -= ((-mouse.y * 4) + modularGruop.rotation.x) * uSpeed;
camera.lookAt(scene.position);
renderer.render( scene, camera );
}
animate();
init();
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|