THREE.JS 使用TransformControls对模型拖拽

在Three.js中，要使用TransformControls对模型进行拖拽操作，你需要先创建一个场景、相机、渲染器和TransformControls实例。然后，将要操作的模型添加到场景中，并启用TransformControls。下面是一个简单的例子：

// 引入必要的库
import * as THREE from 'three';
import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js';
 
// 场景、相机和渲染器设置
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 添加模型到场景
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
 
// 创建TransformControls并添加到场景
const controls = new TransformControls(camera, renderer.domElement);
controls.attach(cube);
scene.add(controls);
 
// 启用拖拽
controls.enabled = true;
 
// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  controls.update(); // 更新TransformControls
}
 
animate();

在这个例子中，我们创建了一个立方体模型，并通过TransformControls对其进行拖拽操作。你需要在你的项目中引入Three.js和TransformControls.js。记得在HTML文件中设置正确的three.js和TransformControls.js的路径。

这段代码提供了一个基本框架，你可以在此基础上根据自己的需求进行定制化开发。例如，你可以添加事件监听器来处理拖拽开始和拖拽结束等事件。