ブラウザでスムーズにオブジェクトが回転しない

Question

ブラウザでオブジェクトを視覚化しています。オブジェクトは、時間軸（XまたはYまたはZ）を1つの軸の周りに回転して表示するか、マウスで回転させることができます。 私が抱えている問題：

1-オブジェクトを1軸の周りに自動回転させると、オブジェクトは実行可能な方法で回転し始めます（OpenGLのように滑らかでなくても）、回転が始まりますつまり、角度が180度増加しているようです。）

2オブジェクトをマウスで回転させると、滑らかではありません（マウスイベントがどのくらい遅れているかわかりません）。

3オブジェクトをマウスで2軸回りに回転させるにはどうすればよいですか？ YとX.

4-ビューウィンドウを小さなdivに入れる方法は？私がしようとしたが、それは大きなとの境界外に出る、ここで

が私のコードです：

<script> 
    var t = 0; 
    var container, interval, 
      camera, scene, render, 
      linesMaterial, 
      isMouseDown = false, onMouseDownPosition, 
      radius = 200, angle_y = 0, angle_x = 0; 
    init(); 

    function init() { 
     var t = 0; 
     var scene = new THREE.Scene(); 
     camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 

     var renderer = new THREE.WebGLRenderer(); 
     renderer.setSize(window.innerWidth, window.innerHeight); 
     document.body.appendChild(renderer.domElement); 

     {#  renderer.setSize(document.getElementById('test').clientWidth, document.getElementById('test').clientHeight);#} 
     {#   document.getElementById('test').appendChild(renderer.domElement);#} 


     // Object drawing 


     onMouseDownPosition = new THREE.Vector2(); 

     document.addEventListener('mousemove', onDocumentMouseMove, false); 
     document.addEventListener('mousedown', onDocumentMouseDown, false); 
     document.addEventListener('mouseup', onDocumentMouseUp, false); 
     document.addEventListener('mousewheel', onDocumentMouseWheel, false); 


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

      angle_y = angle_y + 0.1; 

      camera.position.x = {{ neuron.center.x }} +radius * Math.cos(angle_y); 
      camera.position.y = {{ neuron.center.y }}; 
      camera.position.z = {{ neuron.center.z }} +radius * Math.sin(angle_y); 


      camera.position.x = {{ neuron.center.x }}; 
      camera.position.y = {{ neuron.center.y }} +radius * Math.cos(angle_x); 
      camera.position.z = {{ neuron.center.z }} +radius * Math.sin(angle_x); 
      camera.lookAt(new THREE.Vector3({{ neuron.center.x }}, {{ neuron.center.y }}, {{ neuron.center.z }})); 

     }; 

     render(); 
    } 

    function onDocumentMouseDown(event) { 

     event.preventDefault(); 

     isMouseDown = true; 
     onMouseDownPosition.x = event.clientX; 
     onMouseDownPosition.y = event.clientY; 
    } 

    function onDocumentMouseMove(event) { 

     event.preventDefault(); 

     if (isMouseDown) { 
      var angle_step = 0.4; 

      if (event.clientX < onMouseDownPosition.x) { 
       angle_y += angle_step; 
      } 
      else if (event.clientX > onMouseDownPosition.x) { 
       angle_y -= angle_step; 
      } 

      if (event.clientY < onMouseDownPosition.y) { 
       angle_x += angle_step; 
      } 
      else if (event.clientY > onMouseDownPosition.y) { 
       angle_x -= angle_step; 
      } 
     } 
     render(); 

    } 

    function onDocumentMouseUp(event) { 

     event.preventDefault(); 

     isMouseDown = false; 
     render(); 
    } 

    function onDocumentMouseWheel(event) { 

     var wheel_Step = 5; 

     if (event.wheelDeltaY > 0) { 

      radius -= wheel_Step; 
     } 
     else { 
      radius += wheel_Step; 
     } 
    } 


</script> 

は、ウィンドウを小さくするには非常に多くの

Answer 1

をありがとう、あなたは要素のスタイルを使用して、高さを設定することができますそしてあなたはそれのように表示させたいものに幅の値：マウスの制御と回転のために

renderer.domElement.styleWidth = '100px'; 
renderer.domElement.styleHeight = '100px'; 

あなたは、特に「キャンバス」の下で（threejs.org上の例を見てみなければなりません）：関数onDocumentMouseMove（イベント）{ \t \t event.preventDefault（）;マウスの動きは、次にリフレッシュレート=速度をレンダリングするとき

• Mouse Control
• More Mouse Control