问仅在three.js中将对象组拖到XY平面中
EN

Stack Overflow用户

提问于 2022-04-21 05:54:41

回答 2查看 417关注 0票数 1

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

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>

javascript

webgl

threejs-editor

语音识别特惠，低至14.9元！

提供业界非常具有性价比的语音识别服务，超高识别准确率，适用多场景

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-04-23 00:33:43

这是一个解决办法。所做的是：

创建了一个具有窗口宽度和高度的透明平面。
使用DragControls控件将创建的所有立方体添加到平面
中。H 210H 111现在如果我们拖动平面，所有立方体都将被拖到同一单元。H 212G 213

注意:如果您只想拖动单个多维数据集，只需将objects更改为cube in let controls = new THREE.DragControls(objects, camera, renderer.domElement);即可。另外，在创建多维数据集之后，我们需要将这个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>

票数 1

Stack Overflow用户

发布于 2022-04-21 07:08:35

你应该看看：

https://threejs.org/docs/#examples/en/controls/DragControls

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

objects必须是一个包含您的平面的数组(如果它是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);
}