Nicht glatte Objektdrehung im Browser

Question

Ich visualisiere Objekte im Browser. Das Objekt sollte um eine Achse (X oder Y oder Z) gedreht werden oder der Benutzer kann es mit der Maus drehen. Die Probleme, die ich habe:

1- Wenn ich das Objekt um eine Achse automatisch dreht, beginnt es sich zu drehen (auch nicht wie in OpenGL glatt) und nach einer Minute beginnt die Rotation zu sein sehr diskret, dh der Winkel scheint um 180 Grad zuzunehmen)

2- Wenn ich das Objekt mit der Maus rotiere, ist es überhaupt nicht glatt (Ich weiß nicht, wie das Mausereignis ausgelöst wird).

3- Wie kann ich das Objekt mit der Maus um zwei Achsen drehen? Y und X.

4- Wie man das Ansichtfenster in ein kleines div setzt? Ich habe versucht, aber es geht groß und aus den Grenzen,

Hier ist mein Code:

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

Vielen Dank

Answer 1

Um das Fenster zu verkleinern, können Sie Element Styling verwenden können und und stellen Höhe und Breitenwerte, was Sie es werden möchten, wie folgt angezeigt:

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

zur Maussteuerung und Rotation Sie bei den Beispielen auf threejs.org (vor allem unter ‚Leinwand‘ aussehen sollte):

• Mouse Control
• More Mouse Control