Cannot click button due to canvas

2022-05-04 10:37 hengjuice imported from Stackoverflow

I have created a webpage which uses three.js to render objects. However, I am unable to click the buttons. I think its because the canvas rendered by three.js doesn't allow any clicking. Below is my code:

<body>
    <!-- <h3>Tester</h3> -->
    <div class="container">
        <audio autoplay loop>
            <source src="audio/Menu_music.mp3" type="audio/mpeg">
        </audio>
        <h1 unselectable="on" class="animate-character">GAME</h1>
        
        <button class="button-57" role="button"><span class="text">Single Player</span><span>GO</span></button>
        <button class="button-57" role="button", id = "multiGameButton"><span class="text">Multi Player</span><span>GO</span></button>
    
    </div>
    <script src="https://threejs.org/build/three.js"></script>
    <script src="GLTFLoader.js"></script>
    <script src="OrbitControls.js"></script>
    <script src="FontLoader.js"></script>
    <script>
        let scene, camera, renderer;

        function init() {
            scene = new THREE.Scene();
            const spaceTexture = new THREE.TextureLoader().load('space.jpg');

            camera = new THREE.PerspectiveCamera(40, window.innerWidth/window.innerHeight,1,5000);

            controls = new THREE.OrbitControls(camera, document.body)
            controls.addEventListener('change', renderer);


         
            
            renderer = new THREE.WebGLRenderer({antialias:true, alpha:true});
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            let loader = new THREE.GLTFLoader();
            loader.load('./vehicle.glb', function(gltf){
                car = gltf.scene.children[0];
                car.scale.set(2,2,2)
                scene.add(gltf.scene);
                animate();
            });

            ;

        }
        function animate() {
            car.rotation.y += 0.01;
            renderer.render(scene, camera);
            requestAnimationFrame(animate);
        }
        init();
    </script>

    <script type="text/javascript">
        document.getElementById("multiGameButton").onclick = function () {
            location.href = "../index.html";
            console.log("MultiButton pressed");
        };
    </script>

I have tried setting the z-index property for both canvas or button but it didn't work.

See also questions close to this topic

how to change prettier format for react native

my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter

from this code

      import { View, Text } from 'react-native'
    
    import React from 'react'
    
    export default function App() {
      return (
        <View>
    
    <Text>Apps</Text>   
</View>
      )
    }

it's formatted to this

import {
  View,
  Text
} from 'react-native'

import React from 'react'

export default function App() {
  return ( <
    View >

    <
    Text > Apps < /Text>


    <
    /View>
  )
}

MarkLogic server-side JavaScript and XQuery

I am just starting using NoSQL MarkLogic DB and trying to choose for me the best query language to learn and use in future. On server side MarkLogic provides the possibility to use JavaScript API or XQuery API.

I want to receive an advice. Which language is better to concentrate on and learn? JavaScript or XQuery?
Popover in chrome extension using js

My goal is I want to create a chrome extension like Toucan Extension. I want to highlight some paragraphs in random site then translate it to specific language. The problem is I do not have an idea on how to implement a popover in chrome extension like in the picture below.

Creating Sticky Navbar with Drop Down Menu HTML

I am creating a HTML web page which contains a sticky navbar with drop down menu. However, when I created one, the dropdown menu does not works in the sticky navbar and so goes vise versa. below is the screenshot of both the result of the two codes.

*image with dropdown menu but without sticky navbar

*image with sticky navbar but without dropdown menu

below is the code for "image with dropdown menu but without sticky navbar"

    <!DOCTYPE html>
    <html>
    <head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-    awesome/4.7.0/css/font-awesome.min.css">
    <style>
    body {margin:0;font-family:Arial}

   .topnav {
    overflow: hidden;
    background-color: #333;
  }

  .topnav a {
    list-style-type: none;
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    position: sticky;
  }



  .active {
    background-color: #04AA6D;
    color: white;
  }

  .topnav .icon {
    display: none;
  }

  .dropdown {
    float: left;
    overflow: hidden;
  }

  .dropdown .dropbtn {
    font-size: 17px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }

  .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }

  .topnav a:hover, .dropdown:hover .dropbtn {
    background-color: #555;
    color: white;
  }

  .dropdown-content a:hover {
    background-color: #ddd;
    color: black;
  }

  .dropdown:hover .dropdown-content {
    display: block;
  }

  @media screen and (max-width: 600px) {
    .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
    .topnav a.icon {
      float: right;
      display: block;
    }
  }

  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: left;
    }
  }
  </style>
  </head>
  <body>
        <div class="header">
        <h2>Scroll Down</h2>
    <p>Scroll down to see the sticky effect.</p>
  </div>

  <div class="topnav" id="myTopnav">
    <a href="#home" class="active">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <div class="dropdown">
      <button class="dropbtn">Dropdown 
        <i class="fa fa-caret-down"></i>
      </button>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div> 
    <a href="#about">About</a>
    <a href="javascript:void(0);" style="font-size:15px;" class="icon"     onclick="myFunction()">&#9776;</a>
  </div>

  <div style="padding-left:16px">
    <h2>Responsive Topnav with Dropdown</h2>
    <p>Resize the browser window to see how it works.</p>
    <p>Hover over the dropdown button to open the dropdown menu.</p>
  </div>

  <h3>Sticky Navigation Bar Example</h3>
  <p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
  <p><strong>Note:</strong> Internet Explorer do not support sticky positioning and Safari         requires a -webkit- prefix.</p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>
  <p>Some text to enable scrolling. </p>


  <script>
  function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
    }
  }
  </script>

  </body>
  </html>

below is the code for "image with sticky navbar but without dropdown menu"

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-    awesome/4.7.0/css/font-awesome.min.css">
<style>


body {
  font-size: 20px;
}
body {margin:0;}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px 20px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}
    
/*======================================================================*/

body {
  background-color:white;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #38444d;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
    
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}


footer {
  text-align: center;
  padding: 3px;
  background-color: DarkSalmon;
  color: white;
}

</style>
</head>
<body>

<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
</div>

<ul>
  <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li class="dropdown">
      <a href="javascript:void(1)" class="dropbtn">Dropdown</a>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </li>
</ul>

<h3>Sticky Navigation Bar Example</h3>
<p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
<p><strong>Note:</strong> Internet Explorer do not support sticky positioning and Safari requires a -webkit- prefix.</p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>
<p>Some text to enable scrolling. </p>


<footer>
  <p>Author: Hege Refsnes<br>
  <a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>


</body>
</html>

Please i need some help with this as i am new to html and css.

Javascript: Change element class if button has a certain value
```
        <div class="main-div main-div2"> 
          <button id="update-btn" class="btn update-btn"> 
              Up to date
          </button>
        </div>
```
I want to make it so if update-btn has a value of "Up to date", change the div class from "main-div main-div2" to "main-div main-div3". Otherwise, if it's any other value, change it to "main-div main-div2"

What kind of loop would be good for this Javascript function too if I want it to be checking constantly?

Thank you.

Boostrap vertical sizing with different style width and height

I am trying to set verticaly icon on profile photo card inside div to be in the middle in white box(div), but dont know why it doesnt works. When I use style="width: 300px; height: 300px; for div square I can center it on horizontaly, but not verticaly :/ Can someone explain me what I am doing wrong?

Anyway is there any way how to resize bootstrap icons except display-1???

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <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://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    
  <div class="container-sm offset-md">
        <h1 class="p-4 m-4">Nastavení profilu</h1>
        <div class="row">
            <div class="col">
                <div class="card p-4 m-4">
                    Osobní údaje
                    <input type="text" name="name" class="form-control" placeholder="Jméno">
                    <input type="text" name="surname" class="form-control" placeholder="Příjmení">
                    <input type="email" name="email" class="form-control" placeholder="E-Mail">
                    <input type="date" name="name" class="form-control">
                </div>
                
            </div>

            <div class="col-4">
                <div class="card p-4 m-4 bg-light">
                    Profilová fotografie
                    <div class=" square text-center border display-1 m-3 bg-white mx-auto">
                        <i class="bi bi-person-fill align-middle justify-content-center text-secondary"></i>
                    </div>

                    <input type="file" id="customFile" name="file" hidden="">
                        <div class="text-center">
                            <button class="btn btn-success" for="customFile">Nahrát</button>
                            <button type="button" class="btn btn-danger">Smazat</button>
                            
                            <p class="text-muted mt-3 mb-0">Poznámka: Minimální velikost 300px x 300px</p>
                        </div>
                </div>
                
            </div>
        </div>

        <div class="row">
            <div class="col">
                <div class="card p-4 m-4">
                    Změna hesla
                </div>
                
            </div>

            <div class="col">
                <div class="card p-4 m-4">
                    Zobrazit/skrýt podrobnosti
                </div>
            </div>
        </div>
    </div>

How can I drag camera on three.js?

I'd like to create this camera effect on my project: https://2021.fanzone36.com/fr/home https://bruno-simon.com/

How can I drag the camera like this? I can't find the right "control". Now I'm using OrbitControls but I need to move on a plane (along x axe).
Why can't I declare a position in my multidimensional array?
I'm trying to do a 3d version of an L-Syste. But I cannot declare elements in my multidimensional array. When I debug, I see that the element stays the same. I call for example arraygrowth [0][1] = 100; But the Element at that position stays 0
```
let arraygrowth =[];
arraygrowth.push(new THREE.Vector3(0,0,0)); 
arraygrowth.push(new THREE.Vector3(0,0,0));
arraygrowth.push(new THREE.Vector3(0,0,0));

arraygrowth [0][1] = 100;
arraygrowth [1][1] = 100;
arraygrowth [2][1] = 100;
```

Resizing THREE.js Object using HTML div

I have two divs that I want to place side-by-side, and one of them contains my THREE.JS window/canvas. Basically, I don't want the THREE.js to take up the entire screen (only 50% of the width or however I adjust it), and so I want to do this with the div I put it in (threejs-container) or with HTML if there's another way. On the left side beside it, I want to be able to put an image or text. For some reason, the renderer canvas is not obeying my div and resizing. How do I fix this?

P.S. I know I can resize it manually using THREE.js, but I also want to be able to easily right-adjust my canvas, so I want to try to avoid doing that. The canvas centers itself on the page, and I also don't know how to change that.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>VRChat</title>
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
    <div class="container">
        <div class="nav-wrapper">
            <!-- WIP -->
        </div>

        <!-- This is everything below the nav bar -->
        <div class="content-wrapper">
            <div class="two-column-wrapper">
                <div class="profile-image-wrapper">
                    <img src="https://data.whicdn.com/images/350807092/original.jpg">
                </div>

                <div id="threejs-container" style="width: 50%">
                    <script type="module">

                        import * as THREE from 'https://cdn.skypack.dev/three@0.128.0/build/three.module.js';            
                        import { OrbitControls } from 'https://cdn.skypack.dev/three@0.128.0/examples/jsm/controls/OrbitControls.js';
                        import { FBXLoader } from 'https://cdn.skypack.dev/three@0.128.0/examples/jsm/loaders/FBXLoader.js';
            
                        let camera, scene, renderer;
            
                        init();
                        animate();
            
                        function init() {            
                            // https://www.youtube.com/watch?v=FwcXultcBl4
                            camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 2000 );
                            camera.position.set(0, 1.3, 3);
            
                            scene = new THREE.Scene();
                            scene.background = new THREE.Color( 0xa0a0a0 );
            
                            const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
                            hemiLight.position.set( 0, 200, 0 );
                            scene.add( hemiLight );
            
                            const dirLight = new THREE.DirectionalLight( 0xffffff );
                            dirLight.position.set( 0, -50, 100 ); // Adjust the direction from which light shines
                            dirLight.castShadow = true;
                            dirLight.shadow.camera.top = 180;
                            dirLight.shadow.camera.bottom = -100;
                            dirLight.shadow.camera.left = -120;
                            dirLight.shadow.camera.right = 120;
                            scene.add( dirLight );
            
                            // Ground
                            const mesh = new THREE.Mesh( new THREE.PlaneGeometry( 100, 100 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false} ) );
                            mesh.rotation.x = - Math.PI / 2;
                            mesh.receiveShadow = true;
                            scene.add(mesh);
            
                            const grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
                            grid.material.opacity = 0.2;
                            grid.material.transparent = true;
                            scene.add(grid);
            
                            // Model
                            const loader = new FBXLoader();
                            loader.load( 'model/minoru_utsugi_v1.8_Quest.fbx', function ( object ) {
                                object.traverse( function ( child ) {
                                    if ( child.isMesh ) {
                                        child.castShadow = true;
                                        child.receiveShadow = true
                                    }
                                } );
                                scene.add(object);
            
                            } );
                            renderer = new THREE.WebGLRenderer({antialias: true});
                            renderer.setPixelRatio(window.devicePixelRatio);

                            renderer.setSize(window.innerWidth, window.innerHeight);
                            renderer.shadowMap.enabled = true;
                            document.getElementById("threejs-container").appendChild(renderer.domElement);
                            const controls = new OrbitControls( camera, renderer.domElement );
                            controls.target.set(0, 0.8, 0); // Change this to move camera position
                            controls.update();
                            window.addEventListener('resize', onWindowResize);
                        }
            
                        function onWindowResize() {
                            // Adjust three.js object size on window resize
                            camera.aspect = window.innerWidth / window.innerHeight;
                            camera.updateProjectionMatrix();
                            renderer.setSize(window.innerWidth, window.innerHeight);
                        }
            
                        function animate() {
                            requestAnimationFrame( animate );
                            renderer.render( scene, camera );            
                        }
            
                    </script>
                </div>
            </div>
        </div>
    </div>
    </div>
</body>

</html>

Related questions

Cannot click button due to canvas

See also questions close to this topic