three.js基础之mesh属性

mesh之位置、缩放、平移、旋转属性

<canvas id="mesh-properties"></canvas>
<script type="importmap">
  {
    "imports": {
      "three": "./js/build/three.module.js",
      "three/addons/": "./js/jsm/"
    }
  }
</script>
<script type="module">
  import * as THREE from "three";
  import { GUI } from "three/addons/libs/lil-gui.module.min.js";
  import { initRenderer, initPerspectiveCamera, initAmbientLight, addPlane, addBox } from "./init.js";

  const gui = new GUI();

  const renderer = initRenderer("mesh-properties");

  const scene = new THREE.Scene();

  const camera = initPerspectiveCamera();
  scene.add(camera);

  const ambientLight = initAmbientLight();
  scene.add(ambientLight);

  const axesHelper = new THREE.AxesHelper(150);
  scene.add(axesHelper);

  const plane = addPlane();
  scene.add(plane);

  const cube = addBox({ color: 0x44ff44 });
  cube.position.set(0, 4, 0);
  scene.add(cube);

  const controls = setupControls();

  render();

  function render() {
    cube.visible = controls.visible;

    cube.rotation.x = controls.rotationX;
    cube.rotation.y = controls.rotationY;
    cube.rotation.z = controls.rotationZ;

    cube.position.x = controls.translateX;
    cube.position.y = controls.translateY;
    cube.position.z = controls.translateZ;

    cube.scale.set(controls.scaleX, controls.scaleY, controls.scaleZ);

    requestAnimationFrame(render);
    renderer.render(scene, camera);
  }

  function setupControls() {
    const controls = new (function () {
      this.scaleX = 1;
      this.scaleY = 1;
      this.scaleZ = 1;

      this.positionX = 0;
      this.positionY = 4;
      this.positionZ = 0;

      this.rotationX = 0;
      this.rotationY = 0;
      this.rotationZ = 0;
      this.scale = 1;

      this.translateX = 0;
      this.translateY = 0;
      this.translateZ = 0;

      this.visible = true;

      this.translate = function () {
        cube.translateX(controls.translateX);
        cube.translateY(controls.translateY);
        cube.translateZ(controls.translateZ);

        controls.positionX = cube.position.x;
        controls.positionY = cube.position.y;
        controls.positionZ = cube.position.z;
      };
    })();

    const guiScale = gui.addFolder("scale");
    guiScale.add(controls, "scaleX", 0, 5);
    guiScale.add(controls, "scaleY", 0, 5);
    guiScale.add(controls, "scaleZ", 0, 5);

    const guiPosition = gui.addFolder("position");
    const contX = guiPosition.add(controls, "positionX", -10, 10);
    const contY = guiPosition.add(controls, "positionY", -4, 20);
    const contZ = guiPosition.add(controls, "positionZ", -10, 10);

    contX.listen();
    contX.onChange(function (value) {
      cube.position.x = controls.positionX;
    });

    contY.listen();
    contY.onChange(function (value) {
      cube.position.y = controls.positionY;
    });

    contZ.listen();
    contZ.onChange(function (value) {
      cube.position.z = controls.positionZ;
    });

    const guiRotation = gui.addFolder("rotation");
    guiRotation.add(controls, "rotationX", -4, 4);
    guiRotation.add(controls, "rotationY", -4, 4);
    guiRotation.add(controls, "rotationZ", -4, 4);

    const guiTranslate = gui.addFolder("translate");
    guiTranslate.add(controls, "translateX", -10, 10);
    guiTranslate.add(controls, "translateY", -10, 10);
    guiTranslate.add(controls, "translateZ", -10, 10);

    gui.add(controls, "visible");

    return controls;
  }
</script>