如何在Three.js中更改几何的初始位置？ [英] How can I change the Initial position of my geometry in Three.js?

问题描述

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

  scene = new THREE.Scene（）; 
 
摄像头=新的THREE.PerspectiveCamera（45，window.innerWidth / window.innerHeight，1，10000）; 
 camera.position.z = 1000; 
  

这里是完整代码：
三个js示例

解决方案

更改多维数据集的位置使用 mesh.position.set（x，y，z）

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

这是更新的小提琴，您的框位于屏幕的左上角。 / p>

如果您不喜欢拖动多维数据集时如何飞行，则不能使用 orbitControls any更多。要使多维数据集仍然正常旋转，请使用以下代码（需要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; 
}）; 
函数toRadians（angle）{
返回角*（Math.PI / 180）; 
} 
 
函数toDegrees（angle）{
返回角*（180 / Math.PI）; 
} 
  

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

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

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

解决方案

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/

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