Wie kann ich die Anfangsposition meiner Geometrie in Three.js ändern?

Question

Ich möchte die Anfangsposition ändern, wo meine Geometrie erscheint; Gerade jetzt erscheint es in der Mitte der Leinwand. Ich möchte, dass es in der linken oberen Ecke erscheint. Kannst du mir helfen?

scene = new THREE.Scene(); 

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

Hier ist der vollständige Code: Three js example

Answer 1

ändern Sie die Position des Würfels mesh.position.set(x, y, z)

verwendet, um I window.innerWidth und window.innerHeight Ihr Objekt in der Ecke des Bildschirms zu bewegen.

Hier ist eine aktualisierte fiddle mit Ihrer Box in der oberen linken Ecke des Bildschirms.

Wenn Sie nicht mögen, wie der Würfel herumfliegt, wenn Sie ihn ziehen, können Sie orbitControls nicht mehr verwenden. Um die Würfel noch drehen zu machen normalerweise, diesen Code verwenden (jQuery erforderlich):

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

Quelle für diesen Code: https://jsfiddle.net/MadLittleMods/n6u6asza/

Beispiel mit Ihrem Code: https://jsfiddle.net/3eau15pv/3/