如何在javascript中减缓手动控制的对象旋转？_Javascript_Three.js

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

javascript three.js

如何在javascript中减缓手动控制的对象旋转？,javascript,three.js,Javascript,Three.js,如标题所示，有人能帮我减缓javascript中3D对象的鼠标控制旋转吗？旋转过于敏感，难以手动控制。以下是我的代码： <html> <head> <script src="js/three.js"></script> <script src="js/ColladaLoader.js"></script> <script src="js/OrbitControls.js"></script>&

如标题所示，有人能帮我减缓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>


//将场景、摄影机和渲染器设置为全局变量。
var场景、摄影机、渲染器、网格；
init（）；
制作动画（）；
//设置场景。
函数init（）{
//创建场景并设置场景大小。
场景=新的三个。场景（）；
添加（新的三个环境光（0x99999））；
变量宽度=window.innerWidth，
高度=窗内高度；
//创建渲染器并将其添加到DOM中。
renderer=new THREE.WebGLRenderer（{antialas:true}）；
设置大小（宽度、高度）；
document.body.appendChild（renderer.doElement）；
//创建一个摄影机，将其从模型中缩小一点，然后将其添加到场景中。
摄像机=新的三个透视摄像机（45，宽/高，11000）；
摄像机位置z=100；
场景。添加（摄影机）；
//创建一个事件侦听器，该侦听器使用浏览器窗口调整渲染器的大小。
addEventListener（'resize'，function（））{
变量宽度=window.innerWidth，
高度=窗内高度；
设置大小（宽度、高度）；
camera.aspect=宽度/高度；
camera.updateProjectMatrix（）；
});
//设置场景的背景色。
setClearColor（0x333F47，1）；
//创建灯光，设置其位置，然后将其添加到场景中。
var pointLight=新的三点光源（0xffffff，0.6）；
点光源位置设置（80,90150）；
场景。添加（点光源）；
//加载网格并将其添加到场景中。
var loader=new THREE.ColladaLoader（）；
loader.options.convertUpAxis=true；
loader.load（“models/water.dae”，函数（结果）{
//geometry.computeBoundingBox（）；
//var material=新的3.0网格LambertMaterial；
//网格=新的三个网格（几何体、材质）；
结果.scene.scale.x=.01；
结果.scene.scale.y=.01；
结果.scene.scale.z=.01；
result.scene.position.z=20；//我们在openGL中看到负z轴（世界空间中的右手坐标），-z轴进入屏幕，但由于我们将相机位置设置为z=100，所以我们可以在正z轴上放置
result.scene.updateMatrix（）；
result.scene.matrixAutoUpdate=false；
scene.add（result.scene）；
});
//添加轨道控件，以便我们可以用鼠标四处平移。
控件=新的三个.轨道控件（摄影机、渲染器.doElement）；
controls.enableDamping=true；
控制。阻尼系数=0.25；
controls.enableZoom=true；
控制。目标。z=20；
}
//渲染场景并根据需要更新渲染。
函数animate（）{
//阅读有关requestAnimationFrame的更多信息，请访问http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
请求动画帧（动画）；
//渲染场景。
渲染器。渲染（场景、摄影机）；
控件更新（）；
}

非常感谢您的评论/建议。

我不太清楚您所说的“放慢”鼠标移动是什么意思，因为您说它太敏感了。旋转速度是否比应该的快，或者只是跟随鼠标太快

要减缓鼠标控制的旋转，可以使用缓和方程使其更平滑，如果这是您的要求的话。我发现自己经常使用的（即2d）是：

rotation += (targetRotation - rotation) / speed;

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

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

rotation += (targetRotation - rotation) / speed;

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

我相信您可以将其应用于3d系统。

Flizzet，非常感谢。是的，的确如此。我的意思是当你在屏幕上拖动和旋转一个3D模型时，减慢鼠标控制的旋转。你的问题不是关于Java3D API，请不要滥用这个标签。@gouessej这是他们的第一篇文章。与其指责他们滥用，不如礼貌地解释为什么标签在这里不合适。如果在标签系统中键入“3d”，则标签是最重要的响应之一。新用户很容易犯错误，而不是像您所建议的那样滥用。JavaScript和Java是两种不同的编程语言。js和Java3D是两种不同的API。由于最初的海报使用了“javascript”标记，他知道Three.js是一个javascript API而不是Java API。