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

【问题标题】：Save Three.js 3D model in position (Right, Left, Front, Back) in PNG将 Three.js 3D 模型保存在 PNG 中的位置（右、左、前、后）
【发布时间】：2014-09-30 19:11:42
【问题描述】：

好的！

我正在开发一个用于鞋子 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;
        }
    }

【问题讨论】：

您希望 saveImage 函数为模型设置动画并在开始和结束时拍摄快照，还是应该在不改变视图的情况下拍摄快照？

标签： javascript image 3d three.js save

【解决方案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。当我读到“鞋子模拟器”时，我笑了。

【讨论】：