When I click on them, the GUI changes together and I have looked at other answers. However, I am not sure where to put the listener. I tried putting the listener in render(), but it still doesn't work. How can I fix my code? This coding is related to my graduation.
Here is my code:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>map draw</title>
<!-- Original:
<script type="text/javascript" src="../build/three.js"></script>
<script type="text/javascript" src="../examples/js/libs/dat.gui.js"></script>
<script type="text/javascript" src="../examples/js/libs/stats.min.js"></script>
<script type="text/javascript" src="../examples/js/controls/TrackballControls.js"></script>
-->
<!-- Added by TheJim01 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.js"></script>
<script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
<script src="https://threejs.org/examples/js/controls/TrackballControls.js"></script>
<!-- End TheJim01 additions -->
</head>
<body>
<div id="Stats-output"></div>
<div id="camera"></div>
<div id="airport"></div>
<script type="text/javascript">
function init() {
var controls = new Array(cube_number);
console.log(controls);
var cubes = new Array(cube_number);
var guicube = new Array(cube_number);
var cube_number = 4; //change this word,you can change the number of cubes
var stats = initStats()
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.x = 10;
camera.position.y = 10;
... (The rest of the code has been restructured here for uniqueness)
}
window.onload = init();
</script>
//Changing the cube_number parameter can alter the number of cubes added
</body>
</html>