Currently, I am in the process of saving an image to the server using a three.js script that I have created. The script looks like the following:
actualCode(THREE);
function actualCode(THREE) {
//Rendering variables
const renderer = new THREE.WebGLRenderer({
antialias: true
});
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(30, 400.0 / 400, 1, 1000);
//Object variables
let texture;
let paintedMug;
//Preload image and then begin rendering
const loader = new THREE.TextureLoader();
texture = loader.load("images/djmug2.jpg", function (_tex) {
init();
renderImageSolo(17.5);
});
function init() {
//Initialize scene and camera
camera.position.set(0, 1.3, 11);
camera.lookAt(scene.position);
renderer.setSize(400, 400);
//Set ambient light
const light = new THREE.AmbientLight(0xffffff); // soft white light
scene.add(light);
//Draw white mug
const muggeom = new THREE.CylinderGeometry(1.5, 1.5, 3.5, 240, 1);
const mugmaterial = new THREE.MeshStandardMaterial({
color: "#fff",
});
const mug = new THREE.Mesh(muggeom, mugmaterial);
//Draw painting on mug with slightly larger radius
const paintgeom = new THREE.CylinderGeometry(1.5001, 1.5001, 3.3, 240, 1, true);
const paintmaterial = new THREE.MeshStandardMaterial({
map: texture,
});
const paint = new THREE.Mesh(paintgeom, paintmaterial);
//Group mug and paint together
paintedMug = new THREE.Group();
paintedMug.add(mug);
paintedMug.add(paint);
scene.add(paintedMug);
}
function renderImageSolo(angle) {
const solo_renderer = new THREE.WebGLRenderer({
antialias: true
});
solo_renderer.setSize(renderer.domElement.width, renderer.domElement.height);
solo_renderer.domElement.style.marginTop = "0em";
solo_renderer.domElement.id = "canvas";
document.body.appendChild(solo_renderer.domElement);
const solo_scene = new THREE.Scene();
const light = new THREE.AmbientLight(0xffffff);
solo_scene.add(light);
//Draw painting alone
const paintgeom = new THREE.CylinderGeometry(1.5, 1.5, 3.3, 240, 1, true);
const paintmaterial = new THREE.MeshStandardMaterial({
map: texture,
});
const paint = new THREE.Mesh(paintgeom, paintmaterial);
solo_scene.add(paint);
paint.rotation.y = angle
solo_scene.background = new THREE.Color(0x04F404);
solo_renderer.render(solo_scene, camera);
saveit();
}
}
Afterwards, I try to save the generated image using ajax as shown below:
function saveit() {
const canvas = document.getElementById('canvas');
var photo = canvas.toDataURL('image/jpeg');
$.ajax({
method: 'POST',
url: 'photo_upload.php',
data: {
photo: photo
}
});
}
The contents of "photo_upload.php" are as follows:
$data = $_POST['photo'];
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$data = base64_decode($data);
mkdir($_SERVER['DOCUMENT_ROOT'] . "/photos");
file_put_contents($_SERVER['DOCUMENT_ROOT'] . "/photos/".time().'.png', $data);
die;
Despite my efforts, nothing seems to be saved on the server under "/photos" directory. In addition, when attempting to right-click and "save image", the saved image is just a black square instead of what is displayed on the screen.