Hey there!
I'm currently working on a project involving a 3D shoe simulator, where I need to capture accurate images of the model from different angles (right, left, front, back) in PNG format.
I've set up routines to position the model in various views and have created a method called saveImage() that resets the views and captures the image data using toDataURL before sending it to a PHP page.
However, when calling these methods in sequence, the image is always saved from the last selected view. It seems like the Canvas renderer is not getting enough time to update.
Is there a way for me to capture the views (right.png, left.png, front.png, back.png) of my model using Three.js and save them on the server?
Below is the code I have developed:
Thank you for your help
Model 3D Right Position
Model 3D Left Position
Code
/*
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;
}
}