时间戳

首页 > 解决方案 > 如何使用 dat gui for three.js 设置 autoRotate 切换

javascript - 如何使用 dat gui for three.js 设置 autoRotate 切换

问题描述

我正在制作一个有 3 个行星并排在一起的程序，我可以使用滑块在每个轴上自行移动它们，并且我设置了一个 autoRotate，但我无法在控件上将它作为一个有效的切换。

到目前为止，这是我的 gui 控件：

  const autoRotate = {
    rotate: false
  };

  function updateCamera() {
    camera.updateProjectionMatrix();
  }
  
  const gui = new dat.GUI();
  gui.add(camera, 'fov', 1, 180).name('zoom').onChange(updateCamera);
  
  //rotate moon
  const moonFolder = gui.addFolder('Rotate Moon');
  moonFolder.add(moon.rotation, "x", 0, Math.PI * 2, 0.01);
  moonFolder.add(moon.rotation, "y", 0, Math.PI * 2, 0.01);
  moonFolder.add(moon.rotation, "z", 0, Math.PI * 2, 0.01);

  // rotate earth
  const earthFolder = gui.addFolder('Rotate Earth');
  earthFolder.add(earth.rotation, "x", 0, Math.PI * 2, 0.01);
  earthFolder.add(earth.rotation, "y", 0, Math.PI * 2, 0.01);
  earthFolder.add(earth.rotation, "z", 0, Math.PI * 2, 0.01);

  // rotate mars
  const marsFolder = gui.addFolder('Rotate Mars');
  marsFolder.add(mars.rotation, "x", 0, Math.PI * 2, 0.01);
  marsFolder.add(mars.rotation, "y", 0, Math.PI * 2, 0.01);
  marsFolder.add(mars.rotation, "z", 0, Math.PI * 2, 0.01);

  gui.add(autoRotate, "rotate").name("autoRotate").onChange(updateCamera);

这是我为 autoRotate 所做的，它在控件之外工作，但我希望它在命令下工作。

  const rotate = [
    moon.rotateX(0.002),
    moon.rotateY(0.01),
    moon.rotateZ(0.001),

    earth.rotateX(-0.002),
    earth.rotateY(0.01),
    earth.rotateZ(0.002),

    mars.rotateX(0.004),
    mars.rotateY(-0.01),
    mars.rotateZ(0.001),
  ];

有没有更简单的方法可以做到这一点，我错过了？

标签： javascriptthree.jsdat.gui

解决方案

i figured it out, i just had to add the rotations into an if statement in my render function, and added

options{
  rotate: true;
};

before the gui controls

推荐阅读