I want to add a link to the TV in my 360 image that redirects the user to Youtube. How do I achieve that? Here is the webpage -- (https://bedroom69.netlify.app)[
]
Here is the HTML Code,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Beakball Bedroom</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="main-container">
<div class="image-container"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"
integrity="sha512-uWKImujbh9CwNa8Eey5s8vlHDB4o1HhrVszkympkm5ciYTnUEQv3t4QHU02CUqPtdKTg62FsHo12x63q6u0wmg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="js/panolens.min.js"></script>
<script src="main.js"></script>
</body>
</html>
Here is the Js,
const panoramaImage = new PANOLENS.ImagePanorama("images/image1.jpeg");
const imageContainer = document.querySelector(".image-container");
const viewer = new PANOLENS.Viewer({
container: imageContainer,
autoRotate: true,
autoRotateSpeed: 0.3,
controlBar: false,
});
viewer.add(panoramaImage);
Thank You.
I tried with mapping, like we do with 2d images in a webpage, but how to achieve in a 360 image in a webpage. I tried like this,
<img src="image1.jpeg" usemap="#image-map">
<map name="image-map">
<area target="" alt="" title="" href="https://www.youtube.com/" coords="5010,1858,4658,1633" shape="rect">
<area target="" alt="" title="" href="" coords="" shape="0">
</map>
But where to put it I can't figure out.
Like this in google maps