如何将一组对象居中?

本文介绍了如何将一组对象居中?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我开始使用 Three.js(新手)，但我不知道如何更改一组对象的中心原点.在这个例子中 jsfiddle/spyf1j94/2/ 你可以看到起源设置为添加到组中的第一个对象，问题是如何将此原点设置为组中心?

I started working with Three.js (newbie) and I can not figure out how to change center origin of a group of objects. In this example jsfiddle/spyf1j94/2/ you can see that the origin is set to the first object added to the group, the question is how can I set this origin point to the group center?

var three = THREE; var scene = new three.Scene(); var camera = new three.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); var renderer = new three.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); camera.position.z = 30; var cubeMatrix = new THREE.Object3D(); var nextHeight = 0; for(var j = 0, x = 0, y = 0; j < 220; j++, x++) { var z = Math.floor(Math.random() * 12) + 1; var geometry = new THREE.BoxGeometry(1, 1 , z); var material = new THREE.MeshBasicMaterial({vertexColors: THREE.VertexColors}); var color = Math.random() * 0xFFFFFF; for(var i = 0; i < geometry.faces.length; i += 2) { geometry.faces[i].color.setHex(color); geometry.faces[i + 1].color.setHex(color); } var cube = new THREE.Mesh(geometry, material); cube.position.set(x,y,z/2); if (x === 10) { x = -1; y++; } //cube.position.y = y * 1; cubeMatrix.add(cube); } scene.add(cubeMatrix); scene.add(new THREE.AxisHelper()); var isDragging = false; var previousMousePosition = { x: 0, y: 0 }; $(renderer.domElement).on('mousedown', function(e) { isDragging = true; }) .on('mousemove', function(e) { //console.log(e); var deltaMove = { x: e.offsetX-previousMousePosition.x, y: e.offsetY-previousMousePosition.y }; if(isDragging) { var deltaRotationQuaternion = new three.Quaternion() .setFromEuler(new three.Euler( (Math.PI / 180) * (deltaMove.y * 1), (Math.PI / 180) * (deltaMove.x * 1), 0, 'XYZ' )); cubeMatrix.quaternion.multiplyQuaternions(deltaRotationQuaternion, cubeMatrix.quaternion); } previousMousePosition = { x: e.offsetX, y: e.offsetY }; }); /* */ $(document).on('mouseup', function(e) { isDragging = false; }); // shim layer with setTimeout fallback window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); function render() { renderer.render(scene, camera); requestAnimFrame(render); } render();

推荐答案

通过 bbox的边界框/math/Box3" rel="nofollow noreferrer">THREE.Box3()

Get the bounding box of bbox by THREE.Box3()

var bbox = new THREE.Box3().setFromObject(cubeMatrix);

将 cubeMatrix 替换为边界框的负半长和负半宽:

Displace cubeMatrix by the negative half length and width of the bounding box:

cubeMatrix.position.set(-(bbox.min.x + bbox.max.x) / 2, -(bbox.min.y + bbox.max.y) / 2, 0);

将 cubeMatrix 添加到另一个组 pivot:

Add cubeMatrix to another group pivot:

var pivot = new THREE.Group(); pivot.add(cubeMatrix);

并将组 pivot 添加到场景中:

And add the group pivot to the scene:

scene.add(pivot);

在 "mousemove" 事件中旋转组 pivot 而不是 cubeMatrix:

In the "mousemove" event rotate the group pivot rather than cubeMatrix:

if(isDragging) { var deltaRotationQuaternion = new three.Quaternion() .setFromEuler(new three.Euler( (Math.PI / 180) * (deltaMove.y * 1), (Math.PI / 180) * (deltaMove.x * 1), 0, 'XYZ' )); pivot.quaternion.multiplyQuaternions(deltaRotationQuaternion, pivot.quaternion); }

查看示例，其中我将更改应用于您的原始代码:

See the example, where I applied the changes to your original code:

var three = THREE; var scene = new three.Scene(); var camera = new three.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); var renderer = new three.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); container = document.getElementById('container'); container.appendChild(renderer.domElement); camera.position.z = 30; var cubeMatrix = new THREE.Object3D(); var nextHeight = 0; for(var j = 0, x = 0, y = 0; j < 220; j++, x++) { var z = Math.floor(Math.random() * 12) + 1; var geometry = new THREE.BoxGeometry(1, 1 , z); var material = new THREE.MeshBasicMaterial({vertexColors: THREE.VertexColors}); var color = Math.random() * 0xFFFFFF; for(var i = 0; i < geometry.faces.length; i += 2) { geometry.faces[i].color.setHex(color); geometry.faces[i + 1].color.setHex(color); } var cube = new THREE.Mesh(geometry, material); cube.position.set(x,y,z/2); if (x === 10) { x = -1; y++; } //cube.position.y = y * 1; cubeMatrix.add(cube); } var bbox = new THREE.Box3().setFromObject(cubeMatrix); cubeMatrix.position.set(-(bbox.min.x + bbox.max.x) / 2, -(bbox.min.y + bbox.max.y) / 2, 0); var pivot = new THREE.Group(); pivot.add(cubeMatrix); scene.add(pivot); scene.add(new THREE.AxisHelper()); var isDragging = false; var previousMousePosition = { x: 0, y: 0 }; container.addEventListener('mousedown', function(e) { isDragging = true; }); container.addEventListener('mousemove', function(e) { //console.log(e); var deltaMove = { x: e.offsetX-previousMousePosition.x, y: e.offsetY-previousMousePosition.y }; if(isDragging) { var deltaRotationQuaternion = new three.Quaternion() .setFromEuler(new three.Euler( (Math.PI / 180) * (deltaMove.y * 1), (Math.PI / 180) * (deltaMove.x * 1), 0, 'XYZ' )); pivot.quaternion.multiplyQuaternions(deltaRotationQuaternion, pivot.quaternion); } previousMousePosition = { x: e.offsetX, y: e.offsetY }; }); /* */ container.addEventListener('mouseup', function(e) { isDragging = false; }); window.onresize = function() { renderer.setSize(window.innerWidth, window.innerHeight); camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); } // shim layer with setTimeout fallback window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); function render() { renderer.render(scene, camera); requestAnimFrame(render); } render();

<script src="threejs/build/three.min.js"></script> <div id="container"></div>