3

我使用 three.js 和 THREE.OrbitControls 进行动画我不知道如何通过单击按钮更改缩放我如何理解..对于缩放回答此功能

this.dollyIn = function ( dollyScale ) {
        if ( dollyScale === undefined ) {
            dollyScale = getZoomScale();
        }
        scale /= dollyScale;

    };

    this.dollyOut = function ( dollyScale ) {
        if ( dollyScale === undefined ) {
            dollyScale = getZoomScale();
        }
        scale *= dollyScale;

    };

我需要发送什么来增加或减少缩放我如何为这个按钮表单做呢？

<input id="clickMe" type="button" value="+" onclick="..." />
4

3 回答 3

6

我已经在我的一个项目中做到了这一点。

没错，您可以使用OrbitControls 中的 dollyIn()和dollyOut()函数来进行放大或缩小。

这是步骤和代码段：

  • 您需要初始化 OrbitControls 以及您的相机和渲染器 domElement ：

    var controls = new THREE.OrbitControls(camera, renderer.domElement);

  • 创建放大和缩小功能：

function zoomModel(isZoomOut, scale) {
  if(isZoomOut){
      controls.dollyIn(scale);
  }else{
      controls.dollyOut(scale);
  }
}
  • 将事件侦听器添加到您的按钮中以调用 zoomModel 函数：
 $("#clickMe").on("click", function(){
  // call this to make the model larger/ zoom in
  zoomModel(true, 4);

  // call this to make it smaller / zoom out
  //zoomModel(false, 4);
});
于 2014-02-27T13:00:13.637 回答
2

对于较新的 THREEjs 版本（在 r74 和 r75 上尝试过），您可以在按钮单击事件上调用它们：

controls.constraint.dollyOut(/*Add your desired scale here*/) //Zoom in

或者

controls.constraint.dollyIn(/*Add your desired scale here*/) //Zoom out
于 2016-04-13T22:33:27.350 回答
1

查看 OrbitControls.js 如何在 update() 函数中将缩放值应用于其目标周围的相机半径，以及如何实现 getZoomScale()。

比例乘以总半径。因此，要缩小，比例值必须大于 1，而要放大，比例必须小于 1。此外，在 OrbitControls 更新函数结束时，比例将重置为 1.0。另一方面，如果 zoomSpeed 设置为 1.0，getZoomScale() 总是返回 0.95。

简而言之，如果您只在按钮单击事件上调用controls.dollyOut() 或controls.dollyIn()，您的缩放将改变，就像您在鼠标滚轮的一个滴答声中体验到的那样，因为它使用相同的函数调用。

于 2013-11-10T14:22:58.263 回答