如何将一组对象居中? [英] How to center a group of objects?
问题描述
我开始使用 Three.js(新手),但我不知道如何更改一组对象的中心原点.在这个例子中 https://jsfiddle.net/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 https://jsfiddle.net/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();
推荐答案
通过 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="https://threejs.org/build/three.min.js"></script>
<div id="container"></div>
这篇关于如何将一组对象居中?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!