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

Posted

技术标签:

【中文标题】将 Three.js 3D 模型保存在 PNG 中的位置(右、左、前、后)【英文标题】:Save Three.js 3D model in position (Right, Left, Front, Back) in 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 函数为模型设置动画并在开始和结束时拍摄快照,还是应该在不改变视图的情况下拍摄快照? 【参考方案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。当我读到“鞋子模拟器”时,我笑了。

【讨论】:

以上是关于将 Three.js 3D 模型保存在 PNG 中的位置(右、左、前、后)的主要内容,如果未能解决你的问题,请参考以下文章

如何将 Blender 3D 模型导入到 three.js

在运行时使用 Three.js 将文本/图像添加到 Canvas 中呈现的 3D 立方体/模型

THREE.JS 的首选 3d 模型格式 [关闭]

在web端,three.js如何操作3d模型obj对象的子构件

Three.js实现3D模型适配相机满屏

将 three.js 模型转换为 svg