Hi guys,
I want to produce some icons of my 3d model’s meshes.
At first, the model should be fit to view (should be zoomed as large as possible in canvas
(fit to view).
this is a canvas for preview
Then I make the material of each mesh red and change the camera position of the model to that specific mesh and then I screenshot from the renderer for each mesh. But the result is not ok.
It seems the model is not fixed in the center in this picture. the camera rotated wrong. My screenshots are top and down somehow.
these works are for creating these icons:
I think it is better not to change the camera position and look at.
I need to fix the camera position and then change model rotation (I mean that mesh should look at the camera to take a picture)
How Can I do that?
It should be automatic in timer.
Lets check current code:
function findPosition() {
const intervalId = setInterval(() => {
AllMesh.current.map((mesh) => {
mesh.material.color.set(mesh.userData.originalColor)
//mesh.material.color.set('#ffffff')
})
if (numberOfMeshes.current < 1) {
clearInterval(intervalId);
return
}
const mesh = AllMesh.current[numberOfMeshes.current - 1]
numberOfMeshes.current--
console.log(mesh.material);
const material = mesh.material.clone()
material.color.set('#ff0000')
mesh.material = material
const newMesh = mesh.clone()
newMesh.geometry.computeBoundingBox();
var boundingBox = newMesh.geometry.boundingBox;
var position = new THREE.Vector3();
position.subVectors(boundingBox.max, boundingBox.min);
position.multiplyScalar(0.5);
position.add(boundingBox.min);
position.applyMatrix4(newMesh.matrixWorld);
let newPosition = new THREE.Vector3(
position.x,
position.y,
position.z
);
moveCameraTowardsMesh(newPosition, newMesh)
}, 1000);
}
function moveCameraTowardsMesh(point, mesh) {
let newPosition = new THREE.Vector3(
point.x,
0,
point.z
);
if (point.z > 0)
newPosition.z = point.z + 0.3
else newPosition.z = point.z - 0.3
if (point.x > 0)
newPosition.x = point.x + 1
else
newPosition.x = point.x - 1
var lookAtPosition = new THREE.Vector3(point.x, point.y, point.z);
camera.current.position.copy(newPosition);
camera.current.lookAt(lookAtPosition);
setTimeout(() => {
var img = new Image();
renderer.current.render(scene.current, camera.current);
img.src = renderer.current.domElement.toDataURL("image/png");
saveImageToServer(img.src, mesh.name);
}, 100);
}