Question

我使用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="..." />

Answer 1

我在我的一个项目中完成了这项工作。

你是对的，你可以使用OrbitControls中的 dollyIn（）和 dollyOut（）函数来放大或缩小。

以下是步骤和代码段：

您需要初始化OrbitControl以及相机和渲染器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);
});

Answer 2

在OrbitControls.js中查看在update（） - 函数中如何将scale-value应用于其目标周围的相机半径以及如何实现getZoomScale（）。

比例乘以整体半径。因此，要缩小，缩放值必须大于1并放大，缩放必须小于1.此外，在OrbitControls更新功能结束时，缩放将重置为1.0。另一方面，如果zoomSpeed设置为1.0，则getZoomScale（）总是返回0.95。

简而言之，如果您只在按钮单击事件上调用controls.dollyOut（）或controls.dollyIn（），则缩放将像您使用鼠标滚轮的一个刻度所经历的那样改变，如这使用相同的函数调用。

用于放大three.js的按钮

2 个答案: