将 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 中的位置(右、左、前、后)的主要内容,如果未能解决你的问题,请参考以下文章
在运行时使用 Three.js 将文本/图像添加到 Canvas 中呈现的 3D 立方体/模型