Trying to control the rotation speed of my model, I decided to use dat.gui for this task. In my render script, the following code snippet was added:
function render() {
group.rotation.y -= controls.rotation;
renderer.render(scene, camera);
}
The parameter controls is used in dat.gui.
var controls = {
rotation: -0.004,
};
var gui = new dat.GUI();
gui.add(controls, 'rotation', -0.001, 0.001);
However, upon running the demo, my model disappeared, leaving only the scene visible. To troubleshoot the issue, I made the following modification:
function render() {
alert(controls.rotation);
group.rotation.y -= controls.rotation;
renderer.render(scene, camera);
}
After running the modified version, I observed that while the first alert showed -0.004, subsequent alerts displayed 'undefined'. This led me to believe that the demo was only rendering the first frame, and the model was not loading completely, hence invisible.
I am looking to understand why this issue occurred and how to resolve it?
Ps: Here are all the codes used:
<head>
<meta charset="UTF-8">
<title>ytest</title>
<script type="text/javascript" src="JSandCSS/three.js"></script>
<script type="text/javascript" src="JSandCSS/OrbitControls.js"></script>
<script type="text/javascript" src="JSandCSS/OBJLoader.js"></script>
<script type="text/javascript" src="JSandCSS/Raycaster.js"></script>
<script type="text/javascript" src="dat.gui-master/build/dat.gui.js"></script>
<script type="text/javascript" src="JSandCSS/stats.min.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="Stats-output">
</div>
<div id="WebGL-output">
</div>
<div id="form">
</div>
<div id="ui">
</div>
<script type="text/javascript">
// JavaScript code goes here
</script>
</body>