Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/three.js/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何为three.js使用dat gui设置自动旋转切换_Javascript_Three.js_Dat.gui - Fatal编程技术网

Javascript 如何为three.js使用dat gui设置自动旋转切换

Javascript 如何为three.js使用dat gui设置自动旋转切换,javascript,three.js,dat.gui,Javascript,Three.js,Dat.gui,我正在制作一个有3颗行星在一起的程序,我可以使用一个滑块在每个轴上移动它们,我设置了一个自动旋转,但我无法在控件上使用它作为切换 以下是迄今为止我的gui控件: const autoRotate = { rotate: false }; function updateCamera() { camera.updateProjectionMatrix(); } const gui = new dat.GUI(); gui.add(camera, 'fo

我正在制作一个有3颗行星在一起的程序,我可以使用一个滑块在每个轴上移动它们,我设置了一个自动旋转,但我无法在控件上使用它作为切换

以下是迄今为止我的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),
  ]; 

有没有一种更简单的方法可以做到这一点?我想出来了,我只需要在渲染函数的if语句中添加旋转,然后添加

options{
  rotate: true;
};
在gui控件之前