使用 dat.GUI.js 簡化試驗流程

導入js

import { GUI } from "three/addons/libs/lil-gui.module.min.js";

代碼

//定要要設置的屬性
var controls = new (function () {
  this.rotationSpeed = 0.02;
  this.bouncingSpeed = 0.03; //球體彈跳速度
})();

var gui = new GUI();
gui.add(controls, "rotationSpeed", 0, 0.5);
gui.add(controls, "bouncingSpeed", 0, 0.5);

var step = 0;

function renderScene() {
  //   cube.rotation.x += 0.02;
  //   cube.rotation.y += 0.02;
  //   cube.rotation.z += 0.02;
  cube.rotation.x += controls.rotationSpeed;
  cube.rotation.y += controls.rotationSpeed;
  cube.rotation.z += controls.rotationSpeed;

  //   step += 0.2;
  //   sphere.position.x = 20 + 10 * Math.cos(step);
  //   sphere.position.y = 2 + 10 * Math.abs(Math.sin(step));
  step += controls.bouncingSpeed;
  sphere.position.x = 20 + 10 * Math.cos(step);
  sphere.position.y = 2 + 10 * Math.abs(Math.sin(step));

  requestAnimationFrame(renderScene);
  stats.update();
  renderer.render(scene, camera);
}
renderScene();