Three.js 拖拽控制教程

拖拽控制 ·Transform Controls· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么TransformControls三种模式 translate / rotate / scaleattach(object)绑定要操控的 Object3D拖拽时禁用 OrbitControls避免冲突效果说明GUI 可切换模式并将控制器attach到 Fox 模型、平行光或地面平面拖拽 gizmo 实时变换对象。核心概念const transformControls new TransformControls(camera, renderer.domElement);scene.add(transformControls.getHelper());transformControls.addEventListener(dragging-changed, event { controls.enabled !event.value; // 拖拽中关掉轨道控制 });folder.add(transformControls, mode, [translate, rotate, scale]); transformControls.attach(model);| 模式 | 快捷键默认 | 作用 | |------|---------------|------| | translate | W | 平移 | | rotate | E | 旋转 | | scale | R | 缩放 |代码要点import * as THREE from threeimport { OrbitControls } from three/examples/jsm/controls/OrbitControls.js import { GLTFLoader } from three/addons/loaders/GLTFLoader.js import { TransformControls } from three/examples/jsm/controls/TransformControls.js import { GUI } from three/addons/libs/lil-gui.module.min.js;const box document.getElementById(box)const scene new THREE.Scene()const camera new THREE.PerspectiveCamera(50, box.clientWidth / box.clientHeight, 0.1, 1000)camera.position.set(0, 3, 6)const renderer new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true })renderer.setSize(box.clientWidth, box.clientHeight)renderer.shadowMap.needsUpdate truerenderer.shadowMap.enabled truebox.appendChild(renderer.domElement)const controls new OrbitControls(camera, renderer.domElement)controls.enableDamping trueconst folder new GUI()// 变换控制器 const transformControls new TransformControls(camera, renderer.domElement)// 模式 translate | rotate | scale folder.add(transformControls, mode, [translate, rotate, scale]).name(模式)const transformControlsRoot transformControls.getHelper()scene.add(transformControlsRoot)transformControls.addEventListener(dragging-changed, event {controls.enabled !event.value})window.onresize () {renderer.setSize(box.clientWidth, box.clientHeight)camera.aspect box.clientWidth / box.clientHeightcamera.updateProjectionMatrix()}new GLTFLoader().load(GLOBAL_CONFIG.getFileUrl(files/model/Fox.glb), (gltf) {const model gltf.scenemodel.scale.set(0.01, 0.01, 0.01)model.traverse((child) {if (child.isMesh) child.castShadow true})scene.add(model)folder.add({ 控制模型: () transformControls.attach(model) }, 控制模型)})const pointLight new THREE.DirectionalLight(0xffffff, 1)pointLight.position.set(1, 2, 0)pointLight.castShadow truescene.add(pointLight)folder.add({ 控制光源: () transformControls.attach(pointLight) }, 控制光源)const plane new THREE.Mesh(new THREE.PlaneGeometry(100, 100), new THREE.MeshStandardMaterial({ color: 0xffffff }))plane.position.y - 0.5plane.rotation.x -Math.PI / 2plane.receiveShadow truescene.add(plane)folder.add({ 控制平面: () transformControls.attach(plane) }, 控制平面)animate()function animate() {requestAnimationFrame(animate)controls.update()renderer.render(scene, camera)}完整源码GitHub小结本文提供拖拽控制完整 Three.js 源码与在线 Demo建议先运行案例再改 uniform/参数做二次实验更多 Three.js 实战案例见 three-cesium-examples 合集 与 GitHub 开源仓库