<html>
<head>
<script src="https://threejs.org/build/three.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Amatic SC|Quicksand">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Again</title>
</head>
<body>
<ul class="nav">
<li class="home" id="home"><a onmouseover="allow()" onmouseleave="disallow()">Home</a></li>
<li class="info" id="info"><a onmouseover="allow()" onmouseleave="disallow()">Information</a></li>
<li class="contact" id="contact"><a onmouseover="allow()" onmouseleave="disallow()">Contact</a></li>
<li class="help" id="help"><a onmouseover="allow()" onmouseleave="disallow()">Help</a></li>
</ul>
<div class="con">
<h1 class="head">Gardens and Parks</h1>
<p>Water issuing out of the mouths of wild beasts gave an impression of fairy-land and witchcraft.</p>
<button class="but1" id="but1" onmouseover="allow()" onmouseleave="disallow()"><a class="text">Learn More</a></button>
</div>
<div class="con2">
<p>A Garden is a Planned Space, Usually Outdoors, Set Aside for the Cultivation, Display, and Enjoyment of Plants and Other Forms of Nature.</p>
<div class="father">
<div class="card1" id="card1"></div>
<div class="card2"></div>
</div>
</div>
</body>
<style>
@font-face {
font-family: "CustomFont";
src: url("AvenirNextLTPro-Bold.otf");
}
body {
margin: 0;
background-color: #eae9e9;
overflow-x: hidden;
position: absolute;
font-family: "CustomFont", sans-serif;
}
.nav {
display: flex;
align-items: center;
justify-content: center;
list-style-type: none;
height: 60px;
text-transform: uppercase;
}
.nav li:not(:first-child) {
display: inline;
margin-left: 80px;
}
.nav li {cursor: pointer}
.home::before, .info::before, .contact::before, .help::before {
content: '';
position: absolute;
width: 0;
height: 2px;
left: 0;
top: 0;
margin-left: 430px;
margin-top: 50px;
background-color: black;
transform: translateX(-100%);
transition: all .3s;
}
.info::before {margin-left: 590px} .contact::before {margin-left: 760px} .help::before {margin-left: 920px}
.home:hover::before {transform: translate(0); width: 60px} .info:hover::before {transform: translate(0); width: 90px}
.contact:hover::before {transform: translate(0); width: 90px} .help:hover::before {transform: translate(0); width: 50px}
.con {
position: absolute;
left: 20px;
top: 100px;
text-align: center;
width: 800px;
height: 400px;
}
.head {
font-size: 85px;
margin-top: 120px;
margin-bottom: 0;
}
.con p {margin-left: 100px; margin-right: 100px;}
.but1 {
position: absolute;
text-align: center;
text-transform: uppercase;
width: 160px;
height: 50px;
margin-top: 20px;
margin-left: -70px;
background-color: #aba9a9;
cursor: pointer;
font-weight: 700;
border: none;
transition: .5s;
}
.text {
z-index: 1000;
position: absolute;
left: 32px;
top: 18px;
transition: .5s;
}
.but1::before {
content: '';
position: absolute;
left: 1px;
bottom: 1px;
width: 100%;
height: 0;
z-index: 2;
background-color: #1a1919;
transition: .5s;
}
.but1:hover {
transform: scale(1.1);
box-shadow: 0 0 5px whitesmoke,
0 0 10px whitesmoke,
0 0 10px black,
0 0 20px black;
}
.but1:hover .text {
color: whitesmoke;
letter-spacing: 3px;
left: 19px;
}
.but1:hover::before { height: 100%;}
.con2 {
position: absolute;
top: 750px;
width: 2000px;
height: 2000px;
background-color: #ffffff;
}
.con2 p {
text-align: left;
font-size: 30px;
font-weight: 400;
margin-right: 1000px;
padding-left: 90px;
margin-top: 200px;
font-family: "Quicksand", sans-serif;
}
.father {
display: grid;
grid-template-columns: 600px 600px;
gap: 100px;
margin-top: 100px;
}
.father div {
width: 600px;
height: 800px;
background-color: transparent;
border: 1px black solid;
}
.card1 {margin-left: 50px; margin-top: 60px;}
.card2 {
}
</style>
<script>
let width, height;
const params = {
color: '#eae9e9'
};
width = window.innerWidth; height = window.innerHeight;
const scene = new THREE.Scene();
scene.background = new THREE.Color( params.color );
var camera = new THREE.PerspectiveCamera( 75,width/height, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( width , height );
document.body.appendChild(renderer.domElement);
var geometry = new THREE.IcosahedronGeometry( 1.4, 0);
const material = new THREE.MeshPhongMaterial( {
color: '#eae9e9',
shininess: 100
} );
const light = new THREE.PointLight( 0xffffff, 1 );
light.position.set( 100, 100, 100 );
scene.add(light);
scene.add( new THREE.HemisphereLight( 0xaaaaaa, 0x444444 ) );
const t = new THREE.Mesh( geometry, material );
t.position.x = 4.6;
t.position.y += 0.5;
scene.add(t);
camera.position.z = 5;
let rotx, roty;
rotx = 0.0050;
roty = 0.0050;
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();
function animate() {
requestAnimationFrame( animate );
t.rotation.x += rotx;
t.rotation.y += roty;
};
let play = false;
function allow() {
play = true;
console.log("hello")
}
function disallow() {
play = false;
}
function effect() {
requestAnimationFrame(effect);
if (play === true){
if (camera.position.z < 6) {
camera.position.z += 0.01;
t.position.x += 0.01;
rotx = 0.015;
roty = 0.015;
console.log(camera.position.z)
}
}else {
if (camera.position.z >= 5 && t.position.x >= 4.6) {
camera.position.z -= 0.01;
t.position.x -= 0.01;
rotx = 0.015;
roty = 0.015;
if (camera.position.z > 4.9 && camera.position.z < 5.1) {
rotx = 0.0050;
roty = 0.0050;
}
}
}
}
effect();
animate();
</script>
</html>
This is my code. I want to add different scenes to card1 and card2 without destroying the others. How do I do it?