Search code examples
javascriptthree.jsthreejs-editor

Three js a just rotation camera with a correct position

This my code return image is:

const box = new THREE.Box3().setFromObject(model);
const size = box.getSize(new THREE.Vector3()).length();
const center = box.getCenter(new THREE.Vector3());

camera.near = size / 100;
camera.far = size \* 100;
camera.updateProjectionMatrix();

camera.position.copy(center);
camera.position.x += size / 0.2;
camera.position.y += size / 2;
camera.position.z += size / 100;
camera.rotation.z += Math.PI/2
// camera.up.set(0, 0, 1)
// camera.rotation.set(Math.PI / -2, 0, 0)
camera.lookAt(center);

My problem is a in camera rotation, I cannot handle with a my dream position, I want like this image I change camera.up.set cannot solve this problem, can you help me with a correct code?

Solution

  • After

    camera.position.copy(center);

    try with

    camera.position.y += size / 0.2;
camera.lookAt(center);

    If it is not the desided position, try with z in place of y.

    I think you are using orbit controls to get the desired image: if neither of above works, you can add console.log(camera.position) in your render loop (or, better, in a function called when you click on the renderer.DOMElement), move the camera in the desired position, and then take note of the x, y and z value of the desired position.