Hello there! I am currently working on a project where I am using three.js to display an obj file exported from Blender and map a texture from a canvas onto it. I managed to successfully display the image in obj format, but when I tried to apply the canvas texture to the obj model, the model turned black. I also attempted to convert the canvas to an image using toDataURL and then map it, but that also did not work. I would greatly appreciate any assistance on this matter.
function convertCanvasToImage(ele) {
var image = new Image();
image.src = ele.toDataURL("image/png");
return image;
}
function changeCanvas() {
canvas = document.getElementById('canvas_id'),
ctx = canvas.getContext('2d');
ctx.font = '20pt Arial';
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'white';
ctx.fillRect(10, 10, canvas.width - 20, canvas.height - 20);
ctx.fillStyle = 'black';
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(new Date().getTime(), canvas.width / 2, canvas.height / 2);
image_t = convertCanvasToImage(canvas);
return image_t;
}
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
camera.position.z = 250;
// scene
scene = new THREE.Scene();
scene.background = new THREE.Color( 'red' );
var ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
scene.add(ambientLight);
var pointLight = new THREE.PointLight(0xffffff, 0.8);
camera.add(pointLight);
scene.add(camera);
// manager
function loadModel() {
object.traverse(function (child) {
if (child.isMesh) child.material.map = texture;
});
object.position.y = -95;
scene.add(object);
}
var manager = new THREE.LoadingManager(loadModel);
manager.onProgress = function (item, loaded, total) {
console.log(item, loaded, total);
};
// texture
// texture = new THREE.Texture(canvas); //it's my initial try,but it didn't work
var textureLoader = new THREE.TextureLoader();
texture = textureLoader.load("three.js-master/examples/models/obj/clothes/426_con.png");//this works!!!
// img = changeCanvas()
texture = textureLoader.load(image_t);//but this doesn't work!!!
// model
function onProgress(xhr) {
if (xhr.lengthComputable) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log('model ' + Math.round(percentComplete, 2) + '% downloaded');
}
}
function onError() {
}
var loader = new THREE.OBJLoader(manager);
loader.load('three.js-master/examples/models/obj/clothes/426_con.obj', function (obj) {
object = obj;
}, onProgress, onError);
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
function animate() {
requestAnimationFrame(animate);
camera.lookAt(scene.position);
changeCanvas();
texture.needsUpdate = true;
renderer.render(scene, camera);
}
I am curious to know if there is a way in three.js to directly texture a canvas onto an obj file without needing any additional translations?