javascript - 将 Three.js 3D 模型保存在 PNG 中的位置(右、左、前、后)

Question

好的!

我正在开发一个鞋子 3D 模拟器项目，并以 PNG 格式准确记录模型在各个位置(右、左、前、后)的图像。

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

但是要按顺序调用方法，图像始终保存最后选择的 View ，我的印象是您没有给出时间来更新 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

我认为马尔克的评论是正确的，你正在调整你的观点然后拍摄快照。因此快照似乎是在 View 完成补间之前发生的。您可以让函数接受一个告诉它们是否进行补间的参数。例如:

/*
  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。当我读到《鞋子模拟器》时，我笑了。