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

Question

我想更改几何图形出现的初始位置；现在它出现在 Canvas 的中央。我希望它出现在左上角。你能帮助我吗？

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 将对象移动到屏幕的一 Angular 。

这是更新的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/