仅在three.js中将对象组拖到XY平面中
仅在three.js中将对象组拖到XY平面中
提问于 2022-04-21 13:54:41
目的是用鼠标拖动场景中的物体。放大和缩小正在正常工作。拖动对象时是旋转的，而不是拖动的。这里有什么问题？
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>
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-04-23 08: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>
Stack Overflow用户
发布于 2022-04-21 15: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);
} 但是使用实际代码，这将生成3个平面，每个平面之间的空间为10.1。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71955715
复制相关文章
相似问题
腾讯云开发者
