I am currently working on developing a 3D customizer by using fabricjs as the canvas texture for my three js model. The method I use to load the obj file is as follows:
function loadObj() {
canvasTexture.anisotropy = renderer.capabilities.getMaxAnisotropy();
textureMaterial = new THREE.MeshPhongMaterial({ map: canvasTexture });
texture.needsUpdate = true;
var loader = new THREE.OBJLoader2(manager);
loader.load('assets/men/cat1/model1.obj', function (data) {
if (object != null) {
scene.remove(object);
}
object = null;
object = data.detail.loaderRootNode;
materials = [];
object.traverse(function (child) {
if (child.isMesh) {
child.material.map = textureMaterial;
};
});
console.log(object.children[0].material)
object.children[0].material = textureMaterial;
render();
var scale = height / 5;
object.scale.set(scale, scale, scale);
object.position.set(0, -scale * 1.25, 0);
object.rotation.set(0, Math.PI / 2, 0);
object.receiveShadow = true;
object.castShadow = true;
scene.add(object);
});
}
Furthermore, here is how I have implemented fabricjs:
var canvas = new fabric.Canvas("canvas");
canvas.backgroundColor = "#FFBE9F";
var text = new fabric.IText('Three.js\n+\nFaBric.js', {
fontSize: 100,
textAlign: 'center',
fontWeight: 'bold',
left: 500,
top: 500,
originX: 'center',
originY: 'center',
selectable: true // make this object selectable
});
fabric.loadSVGFromURL('assets/men/cat1/prod1/pattern.svg', function (objects, options) {
var svgData = fabric.util.groupSVGElements(objects, { selectable: false,crossOrigin: 'anonymous' });
svgData.top = 420;
svgData.left = 70;
canvas.add(svgData);
canvas.sendToBack(svgData);
});
canvas.add(text);
var texture = new THREE.Texture(document.getElementById("canvas"));
fabric.Image.fromURL('assets/men/cat1/texture.png', function (myImg) {
var img1 = myImg.set({ left: 0, top: 0, selectable: false,crossOrigin: 'anonymous' });
canvas.add(img1);
canvas.sendToBack(img1);
});
However, when viewing my 3D model, it appears to be all black like in this image. Does anyone have any suggestions on how to resolve this issue? My goal is to wrap the fabricjs canvas around my 3D model seamlessly.