仅在 three.js 中拖动 XY 平面中的对象组

Question

objective是用鼠标拖动场景中的物体。放大和缩小工作正常。拖动时对象会旋转，但不会被拖动。这里有什么问题？

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 20000);

const renderer = new THREE.WebGLRenderer({
    canvas: document.querySelector("#grid")
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(400, 400);
scene.background = new THREE.Color(0xffffff);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

for (let i = 0; i < 3; i++) {
    const geometry = new THREE.PlaneGeometry(9, 10);
    const material = new THREE.MeshBasicMaterial({ color: 0x9c8af5, side: THREE.DoubleSide });
    const cube = new THREE.Mesh(geometry, material);
    cube.position.x = -i * 10.1;
    scene.add(cube);
} 

camera.position.set(0, 0, 100);
renderer.render(scene, camera);

render();

function render() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<canvas id="grid" style="border: 1px solid black;">
</canvas>

Answer 1

你应该看看:
https://threejs.org/docs/#examples/en/controls/DragControls

const controls = new DragControls( objects, camera, renderer.domElement );

objects must be an array containing your plane(s) (why did you call it a cube by the way if it's a PlaneGeometry ?).

您可以尝试类似的方法：

let objects = [];

let controls = new THREE.DragControls(objects, camera, renderer.domElement);

for (let i = 0; i < 3; i++) {
    const geometry = new THREE.PlaneGeometry(9, 10);
    const material = new THREE.MeshBasicMaterial({ color: 0x9c8af5, side: THREE.DoubleSide });
    const cube = new THREE.Mesh(geometry, material);
    cube.position.x = -i * 10.1;
    objects.push(cube);
    scene.add(cube);
}

但是使用您的实际代码，这将生成 3 个平面，每个平面之间有 10.1 space。

Answer 2

这里有一个解决方法。所做的是：

创建了一个透明的平面，宽度和高度与window相同。
将所有创建的立方体添加到平面
使用 DragControls 控件可以为平面启用拖动。
现在，如果我们拖动平面，所有立方体将以相同的单位被拖动。

注意：如果您只想拖动单个立方体，只需将 let controls = new THREE.DragControls(objects, camera, renderer.domElement); 中的 objects 更改为 cube。然后我们需要在创建立方体后将这个 DragControls 代码放在循环中。

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 20000);
const renderer = new THREE.WebGLRenderer({
    canvas: document.querySelector("#grid")
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(400, 400);
scene.background = new THREE.Color(0xffffff);

var objects = [];

var scenePlane = new THREE.PlaneGeometry( window.innerWidth, window.innerHeight);
const scenePlaneMaterial = new THREE.MeshBasicMaterial( { side: THREE.DoubleSide} );
scenePlaneMaterial.transparent = false;
const plane = new THREE.Mesh( scenePlane, scenePlaneMaterial );
objects.push(plane);


let controls = new THREE.DragControls(objects, camera, renderer.domElement);

for (let i = 0; i < 3; i++) {
    const geometry = new THREE.PlaneGeometry(9, 10);
    const material = new THREE.MeshBasicMaterial({ color: 0x9c8af5, side: THREE.DoubleSide });
    const cube = new THREE.Mesh(geometry, material);
    cube.position.x = -i * 10.1;
    plane.add(cube);
} 
scene.add(plane);





camera.position.set(0, 0, 100);
renderer.render(scene, camera);

render();

function render() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/DragControls.js"></script>
<canvas id="grid" style="border: 1px solid black;">
</canvas>

仅在 three.js 中拖动 XY 平面中的对象组

drag the object group in XY plane only in three.js

javascript

webgl

threejs-editor