Save Three.js 3D model in position (Right, Left, Front, Back) in PNG

Question

Alright!

I'm working on a project for 3D simulator for shoes, and accurate record images of the model in various positions as (right, left, front, back) both in PNG.

Routines created to position the model in multiple views, and a method called saveImage () that resets the visions and performs image recording toDataURL collecting data and sending it to a page in PHP.

But to call the methods in sequence, the image is always saved the last selected view, I get the impression that you are not giving time to update the Canvas renderer.

How could I collect the visions (right.png, left.png, front.png, back.png) of my model by Three.js, to save them on the server?

Below is the code that I developed.

Thank you in advance

Model 3D Right Position

Model 3D Left Position

Code

    /*
      Front
    */
    function front()
    {
      center();
      new TWEEN.Tween( { y: mesh.rotation.y} )
          .to( { y: mesh.rotation.y - 1 }, 150 )
          .onUpdate( function () {
                      mesh.rotation.y = this.y;
          }).start();
    }

    /*
      Back
    */
    function back()
    {
      center();
      new TWEEN.Tween( { y: mesh.rotation.y} )
          .to( { y: mesh.rotation.y - 4 }, 150 )
          .onUpdate( function () {
              mesh.rotation.y = this.y;
          } )
          .start();
    }

    /*
      Left
    */
    function left()
    {
      center();
    }

    /*
      Right
    */
    function right()
    {
      center();
      new TWEEN.Tween( { y: mesh.rotation.y} )
          .to( { y: mesh.rotation.y -2 }, 150 )
          .onUpdate( function () {
              mesh.rotation.y = this.y;
          } )
          .start();
    }

    /*
      Center
    */
    function center()
    {
      camera.position.set(-10,100,200);
      camera.lookAt(scene.position);
      mesh.scale.set(30,30,30);
      mesh.position.x = 0;
      mesh.position.y = 0;
      mesh.position.z = 25;

      mesh.rotation.x = 0.1;
      mesh.rotation.y = 15;
      mesh.rotation.z = 0;
    }

    /*
     Save the visions (right, left) in PNG
    */
    function saveImage()
    {
        right();
        ajaxSave("right");

        left();
        ajaxSave("left");
    }

    function ajaxSave(view)
    {
        var imgData = renderer.domElement.toDataURL("image/png");
        try { 
            $.ajax({
                  type: "POST",
                  beforeSend: function (xhr) {
                    xhr.setRequestHeader("Content-Type", "application/upload");
                  },
                  url: "save3d.php?img=" + view,
                  data:imgData
            });
        } 
        catch(e) {
            console.log("Browser without support for 3D recording.");
            return;
        }
    }

Answer 1

I think Malk's comment is correct, you are tweening your view then taking a snapshot. So the snapshot seems to happen before the view has finished tweening. You could just make the functions accept an argument that tells them to tween or not. eg:

/*
  Front
  parameter: twe: Boolean : If tween or not
*/
function front(twe)
{
  center();
  if(twe){
    new TWEEN.Tween( { y: mesh.rotation.y} )
        .to( { y: mesh.rotation.y - 1 }, 150 )
        .onUpdate( function () {
                    mesh.rotation.y = this.y;
        }).start();
  }else{
    mesh.rotation.y - 1;
  }
}

Or an alternative may be to set up additional cameras in these positions and just switch to them before taking the snapshot.

PS. It gave me a laugh when I read "shoe simulator".