Question

我开始使用Three.js（新手），但我不知道如何更改一组对象的中心原点。在此示例https://jsfiddle.net/spyf1j94/2/中，您可以看到原点设置为添加到组中的第一个对象，问题是如何将该原点设置为组中心？

['vehicle is 7 letters']

Answer 1

通过THREE.Box3()获取bbox的边界框

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

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

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

将cubeMatrix添加到另一组pivot：

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

并将组pivot添加到场景：

scene.add(pivot);

在"mousemove"事件中，旋转组pivot而不是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);
}

请参见示例，其中我将更改应用于您的原始代码：

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>

如何使一组对象居中？

1 个答案: