SOURCE

import * as THREE from "https://threejs.org/build/three.module.js";
import { OrbitControls } from "https://threejs.org/examples/jsm/controls/OrbitControls.js";
import Dat from "https://threejs.org/examples/jsm/libs/dat.gui.module.js";
import initThreeDatGui from "https://cdn.skypack.dev/three-dat.gui@2.0.7";
import * as FreeformControls from "https://cdn.skypack.dev/three-freeform-controls@0.1.12";
import SpriteText from "https://cdn.skypack.dev/three-spritetext@1.5.3";
initThreeDatGui(Dat);
let renderer,scene,camera,ambientlight,directionallight,orbitControls,gui;

init()

function init(){
initrenderer()
initcamera()
initscene()
initlight()
initcontrols()
initgui()
render();
    const box = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshNormalMaterial());
  scene.add(box);
    // 初始化三个自由形式的控件
  const controlsManager = new FreeformControls.ControlsManager(camera, renderer.domElement);
  scene.add(controlsManager);

  //将控制锚定到框上
  const controls = controlsManager.anchor(box, {
    hideOtherHandlesOnDrag: false,
    showHelperPlane: true
  });
  controls.showAll(false);
  controls.showByNames(
    [
      FreeformControls.DEFAULT_HANDLE_GROUP_NAME.YPT,
      FreeformControls.DEFAULT_HANDLE_GROUP_NAME.YNT,
      FreeformControls.DEFAULT_HANDLE_GROUP_NAME.YR,
      FreeformControls.DEFAULT_HANDLE_GROUP_NAME.PICK_PLANE_ZX,
    ],
    true
  );

  const quaternion = new THREE.Quaternion(-0.007, -0.776, 0.554, 0.301);

  const rotationYLabel = new SpriteText("rotated, pink handle (YR)", 0.3);
  controls.rotationY.add(rotationYLabel);
  controls.rotationY.setColor("pink");
  rotationYLabel.position.y = 2;

  const translationYPLabel = new SpriteText("rotated handle (YPT)", 0.3);
  controls.translationYP.add(translationYPLabel);
  translationYPLabel.position.y = 3;

  const translationYNLabel = new SpriteText("translated handle (YNT)", 0.3);
  controls.translationYN.add(translationYNLabel);
  translationYNLabel.position.y = 2;

  controls.rotationY.applyQuaternion(quaternion);
  controls.rotationY.up.applyQuaternion(quaternion);

  controls.translationYP.applyQuaternion(quaternion);
  controls.translationYP.up.applyQuaternion(quaternion);
  controls.translationYP.parallel.applyQuaternion(quaternion);

  controls.translationYN.position.set(0, 0, 2);

  //在使用自由格式控件时禁用轨道控件
  controlsManager.listen(FreeformControls.EVENTS.DRAG_START, () => {
    orbitControls.enabled = false;
  });
  controlsManager.listen(FreeformControls.EVENTS.DRAG_STOP, () => {
    orbitControls.enabled = true;
  });
}
function initrenderer(){
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setClearColor(0xffffff, 0.5);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function initcamera(){
camera = new THREE.PerspectiveCamera(50,window.innerWidth / window.innerHeight, 0.01, 30000);
camera.position.set(0, 5, 10);
camera.lookAt(0, 0, 0);
}
function initscene(){
scene = new THREE.Scene();
scene.add(new THREE.GridHelper(10, 10, 0x888888, 0x444444));
}
function initlight(){
ambientlight = new THREE.AmbientLight(0x222222);
ambientlight.name = 'AmbientLight';
scene.add(ambientlight)
directionallight = new THREE.DirectionalLight(0xffffff, 1);
directionallight.name = 'DirectionalLight';
directionallight.position.set(5, 10, 7.5);
scene.add(directionallight)
}
function initcontrols(){
  orbitControls = new OrbitControls(camera, renderer.domElement);
  window.addEventListener('resize', onWindowResize, false);
}
function initgui(){
  gui = new Dat.GUI();
}
function onWindowResize() {
const aspect = window.innerWidth / window.innerHeight;
camera.aspect = aspect;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
 }
function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

    html,
    body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      margin: unset;
    }