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 help me?

scene = new THREE.Scene();

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

Here is the full code: Three js example

回答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 = 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);
}

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

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

来源：https://stackoverflow.com/questions/41169541/how-can-i-change-the-initial-position-of-my-geometry-in-three-js

标签

javascript

three.js