Three.js 把飞机拖成三段

如何使飞机在X，Y方向拖动。在这里，我尝试在X和Y方向上绘制一个平面的框剪裁。但我不知道如何把它拖到特定的方向。有人能帮我解决这个问题吗

我想在鼠标事件中使飞机只能在自己的方向拖动

    import * as THREE from '../build/three.module.js';

    import Stats from './jsm/libs/stats.module.js';
    import { GUI } from './jsm/libs/dat.gui.module.js';

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

    var camera, scene, renderer, startTime, object, stats;

    init();
    animate();

    function init() {

        camera = new THREE.PerspectiveCamera(36, window.innerWidth / window.innerHeight, 0.0001, 100000);

        camera.position.set(0, 1.3, 8);

        scene = new THREE.Scene();

        // Lights

        scene.add(new THREE.AmbientLight(0x505050));
        scene.background = new THREE.Color('white')
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.angle = Math.PI / 5;
        spotLight.penumbra = 0.2;
        spotLight.position.set(2, 3, 3);
        spotLight.castShadow = true;
        spotLight.shadow.camera.near = 3;
        spotLight.shadow.camera.far = 10;
        spotLight.shadow.mapSize.width = 1024;
        spotLight.shadow.mapSize.height = 1024;
        scene.add(spotLight);

        var dirLight = new THREE.DirectionalLight(0x55505a, 1);
        dirLight.position.set(0, 3, 0);
        dirLight.castShadow = true;
        dirLight.shadow.camera.near = 1;
        dirLight.shadow.camera.far = 10;

        dirLight.shadow.camera.right = 1;
        dirLight.shadow.camera.left = - 1;
        dirLight.shadow.camera.top = 1;
        dirLight.shadow.camera.bottom = - 1;

        dirLight.shadow.mapSize.width = 1024;
        dirLight.shadow.mapSize.height = 1024;
        scene.add(dirLight);

        // ***** Clipping planes: *****

        var localPlane = new THREE.Plane(new THREE.Vector3(0, - 1, 0), 1.5);
        var helper1 = new THREE.PlaneHelper(localPlane, 3, 0xffff00);
        scene.add(helper1);
        var globalPlane = new THREE.Plane(new THREE.Vector3(- 1, 0, 0), 1);
        var helper = new THREE.PlaneHelper(globalPlane, 3, 0xffff00);
        scene.add(helper);          // Geometry

        var material = new THREE.MeshPhongMaterial({
            color: 0x80ee10,
            shininess: 100,
            side: THREE.DoubleSide,

            // ***** Clipping setup (material): *****
            clippingPlanes: [localPlane],
            clipShadows: true

        });

        var geometry = new THREE.TorusKnotBufferGeometry(0.4, 0.08, 95, 20);

        object = new THREE.Mesh(geometry, material);
        object.castShadow = true;
        scene.add(object);

        var ground = new THREE.Mesh(
            new THREE.PlaneBufferGeometry(9, 9, 1, 1),
            new THREE.MeshPhongMaterial({ color: 0xa0adaf, shininess: 150 })
        );

        ground.rotation.x = - Math.PI / 2; // rotates X/Y to X/Z
        ground.receiveShadow = true;
        // scene.add( ground );

        // Stats

        stats = new Stats();
        document.body.appendChild(stats.dom);

        // Renderer

        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.shadowMap.enabled = true;

        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        window.addEventListener('resize', onWindowResize, false);
        document.body.appendChild(renderer.domElement);

        // ***** Clipping setup (renderer): *****
        var globalPlanes = [globalPlane],
            Empty = Object.freeze([]);
        renderer.clippingPlanes = Empty; // GUI sets it to globalPlanes
        renderer.localClippingEnabled = true;
        renderer.clippingPlanes = globalPlanes;

        // Controls

        var controls = new OrbitControls(camera, renderer.domElement);
        controls.target.set(0, 1, 0);
        controls.update();

        // controls1 = new DragControls([...globalPlane], camera, renderer.domElement);
        // controls1.addEventListener('drag', render);
        // GUI

        var gui = new GUI(),
            folderLocal = gui.addFolder('Local Clipping'),
            propsLocal = {

                get 'Enabled'() {

                    return renderer.localClippingEnabled;

                },
                set 'Enabled'(v) {

                    renderer.localClippingEnabled = v;

                },

                get 'Shadows'() {

                    return material.clipShadows;

                },
                set 'Shadows'(v) {

                    material.clipShadows = v;

                },

                get 'Plane'() {

                    return localPlane.constant;

                },
                set 'Plane'(v) {

                    localPlane.constant = v;

                }

            },

            folderGlobal = gui.addFolder('Global Clipping'),
            propsGlobal = {

                get 'Enabled'() {
                    console.log('hitting 1')
                    return renderer.clippingPlanes !== Empty;
                    console.log(renderer.clippingPlanes);

                },
                set 'Enabled'(v) {
                    console.log('hitting 2')
                    renderer.clippingPlanes = v ? globalPlanes : Empty;
                    console.log(renderer.clippingPlanes);

                },

                get 'Plane'() {

                    return globalPlane.constant;

                },
                set 'Plane'(v) {

                    globalPlane.constant = v;

                }

            };

        folderLocal.add(propsLocal, 'Enabled');
        folderLocal.add(propsLocal, 'Shadows');
        folderLocal.add(propsLocal, 'Plane', 0.3, 1.25);

        folderGlobal.add(propsGlobal, 'Enabled');
        folderGlobal.add(propsGlobal, 'Plane', - 0.4, 3);

        // Start

        startTime = Date.now();
        document.addEventListener('click', onClick, false);

    }

    function onClick(event) {

        event.preventDefault();

        if (enableSelection === true) {

            var draggableObjects = controls.getObjects();
            draggableObjects.length = 0;

            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
            mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;

            raycaster.setFromCamera(mouse, camera);

            var intersections = raycaster.intersectObjects(objects, true);

            if (intersections.length > 0) {

                var object = intersections[0].object;

                if (group.children.includes(object) === true) {

                    object.material.emissive.set(0x000000);
                    scene.attach(object);

                } else {

                    object.material.emissive.set(0xaaaaaa);
                    group.attach(object);

                }

                controls.transformGroup = true;
                draggableObjects.push(group);

            }

            if (group.children.length === 0) {

                controls.transformGroup = false;
                draggableObjects.push(...objects);

            }

        }

        render();

    }

    function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

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

    }

    function animate() {

        // var currentTime = Date.now();
        // var time = ( currentTime - startTime ) / 1000;

        requestAnimationFrame(animate);

        // object.position.y = 0.8;
        // object.rotation.x = time * 0.5;
        // object.rotation.y = time * 0.2;
        // object.scale.setScalar( Math.cos( time ) * 0.125 + 0.875 );

        stats.begin();
        renderer.render(scene, camera);
        stats.end();

    }

---

为了在three.js中移动对象，您使用TransformControl。查看其文档和实现示例

在这里，您可以将模式设置为“平移”并缩放为“XY”，以仅限制X和Y方向的移动

controls.axis ="XY";