With the utilization of the code provided and three.js library, I have successfully managed to apply a transparent background PNG onto a cylinder shape.
actualCode(THREE);
function actualCode(THREE) {
let texture;
//Load image before rendering
const loader = new THREE.TextureLoader();
//Example using an image hosted on Imgur:
texture = loader.load("https://automation.stickermonkey.shop/codeplayground/glassetch/2-wrapdesign/images/defaultimage.png", function(_tex) {
console.log("texture loaded");
// /*Debugging:*/ setTimeout(() => document.body.appendChild(texture.image), 100);
//views 17.5=front | 355=side | 139.6=back
renderImageSolo(355);
});
function renderImageSolo(angle) {
//Initialize main renderer / scene
const solo_renderer = new THREE.WebGLRenderer({
antialias: true,
preserveDrawingBuffer: true, // <-- avoid plain black image
alpha: true
});
solo_renderer.setSize(500, 500);
document.body.appendChild(solo_renderer.domElement);
const solo_scene = new THREE.Scene();
//Set camera initial values =(30, 400.0 / 400, 1, 1000)
const camera = new THREE.PerspectiveCamera(80, 500.0 / 500, 1, 100);
camera.position.set(0, 1.3, 10);
camera.lookAt(solo_scene.position);
//Draw painting alone original values -= (1.5, 1.5, 8.3, 240, 1, true)
const paintgeom = new THREE.CylinderGeometry(3, 3, 8.3, 1000, 10, true);
const paintmaterial = new THREE.MeshStandardMaterial({
color: (0xddd8d9),
map: texture,
});
const paint = new THREE.Mesh(paintgeom, paintmaterial);
//Add paint to scene
solo_scene.add(paint);
//Rotate paint by angle
paint.rotation.y = angle;
solo_renderer.setClearColor( 0xddd8d9, 0 ); // the default
solo_renderer.render(solo_scene, camera);
saveImage(solo_renderer.domElement, "defaultimage.png")
}
//Save canvas as image by posting it to special url on server
function saveImage(canvas, filename) {
const dataUrl = canvas.toDataURL("image/png");
const fileNameEnc = encodeURIComponent(filename);
fetch('./photo_upload.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: `data=${dataUrl}&filename=${fileNameEnc}`,
})
.then(response => {
return response.json();
})
.then(data => {
alert(data.message); //Show ajax result
})
.catch(err => { //Handle errors
console.log(err);
alert(err.message);
});
}
};
The original image appears like this...
https://i.sstatic.net/ApQK6.png
While the current output is displayed as follows..
https://i.sstatic.net/ea59t.png
The wrapping around the side works correctly, but the image turns black instead of maintaining its original colors as desired.
Is there a way to retain the original image colors or even customize them to any preferred choice?