旋转场景时 EdgesHelper 会丢失其网格

Question

我用 edgehelper 绘制了一个网格。当我使用鼠标旋转场景时，边缘的反应速度似乎是网格的两倍。结果是当场景旋转时，边缘不再 "fit" 围绕网格。

我做错了什么？

<html>
  <body onmousemove="bmousemove(event);">
    <script src="three.min.js"></script>
    <script>
      var prevX = 0, prevY = 0;
      var scene = new THREE.Scene();
      var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight, 1,10000);
      var renderer = new THREE.WebGLRenderer();

      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      geometry = new THREE.BoxGeometry( 10, 20, 40, 1, 1, 1 );
      material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
      object = new THREE.Mesh( geometry, material );

      edges = new THREE.EdgesHelper( object, 0xffffff );

      camera.position.z = 100;

      scene.add( object );
      scene.add( edges );
      render();

      function render()
      {
        requestAnimationFrame(render);
        renderer.render(scene, camera);
      }

      function bmousemove(e)
      {
        if (prevX == 0) 
        {
          prevX = e.clientX;
          prevY = e.clientY;
        }

        scene.rotation.y += (e.clientX - prevX) / 100;
        scene.rotation.x += (e.clientY - prevY) / 100;

        prevX = e.clientX;
        prevY = e.clientY;
      }
    </script>
  </body>
</html>

我在 Windows 7

下使用版本 r71

Answer 1

是的，这是 EdgesHelper（以及其他一些助手）如何实施的结果。

如果你想使用EdgesHelper，你必须遵守两条规则：

EdgesHelper必须直接添加到场景中。
scene 无法应用变换（例如，旋转）。

因此，您将不得不旋转网格。

three.js r.71

旋转场景时 EdgesHelper 会丢失其网格

EdgesHelper loses its mesh when scene is rotated

three.js