How Can I Change The Initial Position Of My Geometry In Three.js?

I would like to change the initial position where my geometry appears; Right now it appears in the center of the canvas. I would like it to appear at the left upper corner. Can you

Solution 1:

Change the position of the cube using mesh.position.set(x, y, z)

I used window.innerWidth and window.innerHeight to move your object to the corner of the screen.

Here is an updated fiddle with your box in the upper-left corner of the screen.

If you don't like how the cube flies around when you drag it, you can't use orbitControls any more. To make the cube still rotate normally, use this code (jQuery required):

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 = newTHREE.Quaternion()
            .setFromEuler(newTHREE.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;
});
functiontoRadians(angle) {
    return angle * (Math.PI / 180);
}

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

Source for this code: https://jsfiddle.net/MadLittleMods/n6u6asza/

Example using your code: https://jsfiddle.net/3eau15pv/3/