用于放大three.js的按钮

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()函数来放大或缩小.

以下是步骤和代码段:

• 您需要将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);
});