Hi i need an example or demo of how we apply texture or move the texture on model with the help of fabric.js
example
There is an similiar example:
Hope it helps.
but when i apply the texture on model then it looks blurry like this
code
textureUpdate()
{
scope.canvas.on(“after:render”, function() {
scope.objectModel.children[12].children[1].material.map.needsUpdate = true;
});
}
Maybe the texture is too small. If you make it 4 times bigger, and then you add the text, is it still blurry?
scope.canvasTexture = new THREE.CanvasTexture(scope.cnvs);
scope.canvasTexture.magFilter = THREE.NearestFilter;
// scope.canvasTexture.minFilter = THREE.NearestFilter;
// scope.canvasTexture.wrapS = THREE.RepeatWrapping;
// scope.canvasTexture.wrapT = THREE.RepeatWrapping;
scope.canvasTexture.flipY=false;
scope.canvasTexture.anisotropy=0.001;
scope.textureUpdate();
here is the code which im trying to add it but still it looks blurr.How we can increase the size of the texture through canvasTexture ?
THREE.CanvasTexture will make a texture as large as the canvas in scope.cnvs. So, try to make that canvas bigger.
the size of the canvas is 250*250.Are you talking about the texture bigger ?
Try it with 1024x1024.
The “ffff” looks much better than the “hasss” before. Is this what you wanted to do? If not, I might have misunderstood you.
yes i want this but how can we reduce the canvas size if i reduce the canvas size then it looks blurr again
A canvas has two sizes: the visible size (i.e. how big it is shown in a web page), and internal size (i.e. how many pixels it has). Usually both sizes are the same. In your case, you want small visible size, but big internal size.
This can be done when you define your canvas. For example:
<canvas width="1024" height="1024" style="width:200px; height:200px;"></canvas>
defines a canvas that looks 200x200 pixels (so it is rather small), but internally it stores graphical data for 1024x1024 pixels.
1 Like
