Question

我想改变几何体出现的初始位置;现在它出现在画布的中心。我希望它出现在左上角。你能帮助我吗？

scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 1000;

以下是完整代码： Three js example

Answer 1

使用mesh.position.set(x, y, z)

更改多维数据集的位置

我使用window.innerWidth和window.innerHeight将您的对象移动到屏幕的一角。

这是一个更新的fiddle，您的框位于屏幕的左上角。

如果你不喜欢在拖动它时立方体飞来飞去，你就不能再使用orbitControls了。要使多维数据集仍然正常旋转，请使用此代码（需要jQuery）：

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(
                toRadians(deltaMove.y * 1),
                toRadians(deltaMove.x * 1),
                0,
                'XYZ'
            ));

        mesh.quaternion.multiplyQuaternions(deltaRotationQuaternion, mesh.quaternion);
    }

    previousMousePosition = {
        x: e.offsetX,
        y: e.offsetY
    };
});

$(document).on('mouseup', function(e) {
    isDragging = false;
});
function toRadians(angle) {
    return angle * (Math.PI / 180);
}

function toDegrees(angle) {
    return angle * (180 / Math.PI);
}

此代码的来源：https://jsfiddle.net/MadLittleMods/n6u6asza/

使用您的代码的示例：https://jsfiddle.net/3eau15pv/3/

如何在Three.js中更改几何体的初始位置？

1 个答案: