Having limited knowledge in html/javascript, I decided to start with three.js. My scene relies on a parameter that users can manipulate.
Below is a simple example of the scene setup. It showcases a parametric surface that adjusts based on a user-controlled parameter a, using an input type="number".
However, there seems to be an issue: when users interact with the parameter, the animation speeds up unexpectedly. I'm unsure why this occurs. How can I improve the coding approach for this scene?
<html>
<head>
<title>Dupin cyclide</title>
<style>
canvas {
width: 100%;
height: 100%
}
</style>
</head>
<body>
<script src="http://threejs.org/build/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="a">a: </label>
<input id="a" type="number" step="0.1" min="0.5" value="0.9"/>
<script> // change event -----------------------------------------------------
$("#a").on("change", function(){
Rendering(this.value);
})
</script>
<script> // cyclide parametrization ------------------------------------------
function fcyclide(a, c, mu) {
var b = Math.sqrt(a * a - c * c);
return function (u, v, vector) {
var uu = 2 * u * Math.PI; var vv = 2 * v * Math.PI;
var cosu = Math.cos(uu); var cosv = Math.cos(vv);
var h = a - c * cosu * cosv;
var x = (mu * (c - a * cosu * cosv) + b * b * cosu) / h;
var y = (b * Math.sin(uu) * (a - mu * cosv)) / h;
var z = b * Math.sin(vv) * (c * cosu - mu) / h;
vector.x = x; vector.y = y; vector.z = z;
}
}
</script>
<script> // add cyclide to object --------------------------------------------
function addCyclide(object, a) {
var geom = new THREE.ParametricGeometry(
fcyclide(a, 0.34, 0.56), 40, 40);
var material = new THREE.MeshNormalMaterial();
var mesh = new THREE.Mesh(geom, material);
object.add(mesh);
}
</script>
<script> // three.js ---------------------------------------------------------
var scene = new THREE.Scene();
var aspect = window.innerWidth / window.innerHeight;
var camera = new THREE.PerspectiveCamera(70, aspect, 1, 10000);
camera.position.z = 4;
scene.add(camera);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var object = new THREE.Object3D()
scene.add(object);
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
function render() {
renderer.render(scene, camera);
object.rotation.x += 0.001; object.rotation.y += 0.001;
requestAnimFrame(render);
}
</script>
<script> // Rendering function -----------------------------------------------
function Rendering(a) {
object.children.splice(0); // clear scene
addCyclide(object, a);
render();
}
</script>
<script> // Render the scene -------------------------------------------------
Rendering(0.9);
</script>
</body>
</html>