My goal is to wrap text around the sleeve of a glTF shirt object, so I created a mesh on top of the sleeve using blender. I then added a canvas texture to the mesh and attempted to render text on it, but unfortunately, I encountered an error:
https://i.sstatic.net/sbVZ8.png
Below is the code I used:
loadModel(model, callback) {
this.loader = new GLTFLoader();
this.loader.setCrossOrigin('anonymous');
this.loader.load(model, (gltf) => {
if (typeof callback === 'function') {
callback(gltf.scene);
}
this.scene.add(gltf.scene);
});
}
loadModel() {
this.isLoaded = false;
this.scene.loadModel('model10/V Shirt text.gltf', (model) => {
model.name = 'shirt';
// Iterate through the model's children
model.traverse((child) => {
if (child instanceof THREE.Mesh) {
// Reset original material
child.material.map = null;
if (child.name = 'Text') {
let canvas = document.createElement('canvas');
canvas.height = 100;
canvas.width = 100;
let context = canvas.getContext('2d');
context.fillStyle = 'black'
context.font = '100pt Helvetica'
context.fillText('Hello', 10, 90);
const texture = new THREE.CanvasTexture(context);
const material = new THREE.MeshBasicMaterial({
map: texture
})
child.material.map = texture;
child.material.map.needsUpdate = true;
}
// Create wireframes
// this.createWireframe({ mesh: child });
// Push to local array
this.objects.push(child);
}
});