在PNG中将Three.js 3D模型保存在位置（右，左，前，后）

Question

好的！

我正在开发一个用于鞋子3D模拟器的项目，以及在PNG中各个位置（右，左，前，后）的模型准确记录图像。

创建用于在多个视图中定位模型的例程，以及一个名为saveImage（）的方法，它重置视觉并执行图像记录toDataURL收集数据并将其发送到PHP中的页面。

但是为了按顺序调用方法，图像总是保存在最后选择的视图中，我得到的印象是你没有时间来更新Canvas渲染器。

如何通过Three.js收集我的模型的愿景（right.png，left.png，front.png，back.png），以将它们保存在服务器上？

以下是我开发的代码。

提前谢谢

3D模型右侧位置

3D模型左侧位置

代码

    /*
      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

我认为Malk的评论是正确的，你正在补充视图然后拍摄快照。因此快照似乎在视图完成补间之前发生。你可以让函数接受一个告诉他们补间的参数。例如：

/*
  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;
  }
}

或者另一种方法是在这些位置设置其他摄像头，然后在拍摄快照之前切换到它们。

PS。当我读到“鞋模拟器”时，它让我大笑。