Question

我不太精通html / javascript，我以three.js开始。我做了一个场景，该场景取决于用户可以控制的参数。

以下代码是此类场景的完整示例。它呈现了一个参数化曲面，该曲面取决于用户可以使用a进行更改的参数input type="number"。

显然，这不是一种很好的处理方式：场景是动画的，当有人使用参数播放时，动画会加速，我不知道为什么。编码这样一个场景的好方法是什么？

<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>

Answer 1

显然，这不是一种很好的处理方式：场景是动画的，当有人使用该参数播放时，动画会加速，我不知道为什么。

每次调用requestAnimFrame时，计时器都会由setTimeout启动。计时器调用render，它将再次启动计时器并重复该过程。初始化函数render由Rendering(a)调用。
但是由于Rendering(a)事件也调用了change，因此每次更改输入时都会启动一个新计时器。更改输入的频率越高，计时器将同时运行越多。这会加快速度。

要解决此问题，您必须从render中删除Rendering(a)调用。

function Rendering(a)
{
    object.children.splice(0);
    addCyclide(object, a);
}

但是在启动时致电requestAnimFrame：

Rendering(0.9);
requestAnimFrame(render);

请参阅示例，其中答案的建议将应用于问题的原始代码：

$("#a").on("change", function(){
    Rendering(this.value);
})

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;
    }
}

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);
}

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.onresize = resize;

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);
}

function resize() {
    var aspect = window.innerWidth / window.innerHeight;
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = aspect;
    camera.updateProjectionMatrix();
}

function Rendering(a) {
    object.children.splice(0); // clear scene
    addCyclide(object, a);
}

Rendering(0.9);
requestAnimFrame(render);

<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"/>

Three.js场景取决于参数

1 个答案: