Question

如标题所示，有人可以帮助我减慢javascript中3D对象的鼠标控制旋转速度吗？旋转太敏感，难以手动控制。这是我的代码：

    <html>
<head>
<script src="js/three.js"></script>
<script src="js/ColladaLoader.js"></script>
<script src="js/OrbitControls.js"></script></head>
<body>
<script>
    // Set up the scene, camera, and renderer as global variables.
  var scene, camera, renderer, mesh;

  init();
  animate();

// Sets up the scene.
  function init() {

    // Create the scene and set the scene size.
    scene = new THREE.Scene();
    scene.add( new THREE.AmbientLight( 0x999999 ) );
    var WIDTH = window.innerWidth,
        HEIGHT = window.innerHeight;

// Create a renderer and add it to the DOM.
    renderer = new THREE.WebGLRenderer({antialias:true});
    renderer.setSize(WIDTH, HEIGHT);
    document.body.appendChild(renderer.domElement);


 // Create a camera, zoom it out from the model a bit, and add it to the scene.
    camera = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT,1,1000);
    camera.position.z = 100;
    scene.add(camera);


 // Create an event listener that resizes the renderer with the browser window.
    window.addEventListener('resize', function() {
      var WIDTH = window.innerWidth,
          HEIGHT = window.innerHeight;
      renderer.setSize(WIDTH, HEIGHT);
      camera.aspect = WIDTH / HEIGHT;
      camera.updateProjectionMatrix();
    });

// Set the background color of the scene.
    renderer.setClearColor(0x333F47, 1);

    // Create a light, set its position, and add it to the scene.
    var pointLight = new THREE.PointLight(0xffffff, 0.6);
    pointLight.position.set(80,90,150);
    scene.add(pointLight);


 // Load in the mesh and add it to the scene.
    var loader = new THREE.ColladaLoader();
    loader.options.convertUpAxis = true;
    loader.load( "models/water.dae", function(result){
      //geometry.computeBoundingBox();
      //var material = new THREE.MeshLambertMaterial;
      //mesh = new THREE.Mesh(geometry, material);
      result.scene.scale.x = .01;
      result.scene.scale.y = .01;
      result.scene.scale.z = .01;
      result.scene.position.z = 20; // We are looking towards negative z axis in openGL (right hand coordinate in world space), -z axis goes inside screen but since we placed camera position to be at z = 100, we can place on positive z-axis
      result.scene.updateMatrix();
      result.scene.matrixAutoUpdate = false;
      scene.add(result.scene);
    });


 // Add OrbitControls so that we can pan around with the mouse.
    controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.25;
    controls.enableZoom = true;
    controls.target.z = 20;

  }


// Renders the scene and updates the render as needed.
  function animate() {

    // Read more about requestAnimationFrame at http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
    requestAnimationFrame(animate);

    // Render the scene.
    renderer.render(scene, camera);
    controls.update();

  }
</script>
</body>
</html>

感谢您的任何意见/建议。

Answer 1

我不完全确定你的意思＆＃34;减速＆＃34;鼠标移动，因为你说它过于敏感。旋转是否比它应该更快或是否只是跟随鼠标过快？

要减慢鼠标控制的旋转速度，您可以使用缓动等式使其更平滑，如果这是您要求的。我发现自己经常使用的（对于2d）是以下内容：

rotation += (targetRotation - rotation) / speed;

因此，如果我想让一个物体以慢速朝我的鼠标旋转，我会写下以下内容：

object.rotation += (mouseRotation - object.rotation) / 15;

我确定你可以将它改编为3d系统。

如何在javascript中减慢对象的手动控制旋转？

1 个答案: