master

分支 (1)

管理

管理

master

verge3d-code-examples
/
misc_controls_transform.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - transform controls</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link type="text/css" rel="stylesheet" href="main.css">
  </head>
  <body>

    <div id="info">
      "W" translate | "E" rotate | "R" scale | "+/-" adjust size<br />
      "Q" toggle world/local space |  "Shift" snap to grid<br />
      "X" toggle X | "Y" toggle Y | "Z" toggle Z | "Spacebar" toggle enabled<br />
      "C" toggle camera | "V" random zoom
    </div>

    <script type="module">

      import * as v3d from '../build/v3d.module.js';

      import { OrbitControls } from './jsm/controls/OrbitControls.js';
      import { TransformControls } from './jsm/controls/TransformControls.js';

      let cameraPersp, cameraOrtho, currentCamera;
      let scene, renderer, control, orbit;

      init();
      render();

      function init() {

        renderer = new v3d.WebGLRenderer();
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        const aspect = window.innerWidth / window.innerHeight;

        cameraPersp = new v3d.PerspectiveCamera(50, aspect, 0.01, 30000);
        cameraOrtho = new v3d.OrthographicCamera(- 600 * aspect, 600 * aspect, 600, - 600, 0.01, 30000);
        currentCamera = cameraPersp;

        currentCamera.position.set(1000, 500, 1000);
        currentCamera.lookAt(0, 200, 0);

        scene = new v3d.Scene();
        scene.add(new v3d.GridHelper(1000, 10, 0x888888, 0x444444));

        const light = new v3d.DirectionalLight(0xffffff, 2);
        light.position.set(1, 1, 1);
        scene.add(light);

        const texture = new v3d.TextureLoader().load('textures/crate.gif', render);
        texture.anisotropy = renderer.capabilities.getMaxAnisotropy();

        const geometry = new v3d.BoxBufferGeometry(200, 200, 200);
        const material = new v3d.MeshLambertMaterial({ map: texture, transparent: true });

        orbit = new OrbitControls(currentCamera, renderer.domElement);
        orbit.update();
        orbit.addEventListener('change', render);

        control = new TransformControls(currentCamera, renderer.domElement);
        control.addEventListener('change', render);

        control.addEventListener('dragging-changed', function(event) {

          orbit.enabled = ! event.value;

        });

        const mesh = new v3d.Mesh(geometry, material);
        scene.add(mesh);

        control.attach(mesh);
        scene.add(control);

        window.addEventListener('resize', onWindowResize, false);

        window.addEventListener('keydown', function(event) {

          switch (event.keyCode) {

            case 81: // Q
              control.setSpace(control.space === "local" ? "world" : "local");
              break;

            case 16: // Shift
              control.setTranslationSnap(100);
              control.setRotationSnap(v3d.MathUtils.degToRad(15));
              control.setScaleSnap(0.25);
              break;

            case 87: // W
              control.setMode("translate");
              break;

            case 69: // E
              control.setMode("rotate");
              break;

            case 82: // R
              control.setMode("scale");
              break;

            case 67: // C
              const position = currentCamera.position.clone();

              currentCamera = currentCamera.isPerspectiveCamera ? cameraOrtho : cameraPersp;
              currentCamera.position.copy(position);

              orbit.object = currentCamera;
              control.camera = currentCamera;

              currentCamera.lookAt(orbit.target.x, orbit.target.y, orbit.target.z);
              onWindowResize();
              break;

            case 86: // V
              const randomFoV = Math.random() + 0.1;
              const randomZoom = Math.random() + 0.1;

              cameraPersp.fov = randomFoV * 160;
              cameraOrtho.bottom = - randomFoV * 500;
              cameraOrtho.top = randomFoV * 500;

              cameraPersp.zoom = randomZoom * 5;
              cameraOrtho.zoom = randomZoom * 5;
              onWindowResize();
              break;

            case 187:
            case 107: // +, =, num+
              control.setSize(control.size + 0.1);
              break;

            case 189:
            case 109: // -, _, num-
              control.setSize(Math.max(control.size - 0.1, 0.1));
              break;

            case 88: // X
              control.showX = ! control.showX;
              break;

            case 89: // Y
              control.showY = ! control.showY;
              break;

            case 90: // Z
              control.showZ = ! control.showZ;
              break;

            case 32: // Spacebar
              control.enabled = ! control.enabled;
              break;

          }

        });

        window.addEventListener('keyup', function(event) {

          switch (event.keyCode) {

            case 16: // Shift
              control.setTranslationSnap(null);
              control.setRotationSnap(null);
              control.setScaleSnap(null);
              break;

          }

        });

      }

      function onWindowResize() {

        const aspect = window.innerWidth / window.innerHeight;

        cameraPersp.aspect = aspect;
        cameraPersp.updateProjectionMatrix();

        cameraOrtho.left = cameraOrtho.bottom * aspect;
        cameraOrtho.right = cameraOrtho.top * aspect;
        cameraOrtho.updateProjectionMatrix();

        renderer.setSize(window.innerWidth, window.innerHeight);

        render();

      }

      function render() {

        renderer.render(scene, currentCamera);

      }

    </script>

  </body>
</html>