如何在 Three.js 中更改几何图形的初始位置? [英] 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;

完整代码如下:三个js例子

推荐答案

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

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

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

这是一个更新的fiddle，您的盒子位于屏幕的左上角.

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

如果你不喜欢拖动立方体时它会飞来飞去，你就不能再使用orbitControls.要使立方体仍然正常旋转，请使用以下代码(需要 jQuery):

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);
}

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

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

这篇关于如何在 Three.js 中更改几何图形的初始位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！