methods: {
getTextCanvas(text) {
var width = 512, height = 256;
var canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#C3C3C3';
ctx.fillRect(0, 0, width, height);
ctx.font = 50 + 'px " bold';
ctx.fillStyle = '#2891FF';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(text, width / 2, height / 2);
return canvas;
},
},
mounted() {
......
this.material = [
new THREE.MeshBasicMaterial({ color: '#fff' }), // right
new THREE.MeshBasicMaterial({ map: texture, }), // left
new THREE.MeshBasicMaterial({ map: new THREE.CanvasTexture(this.getTextCanvas('Leo Test Label')) }), // top
new THREE.MeshBasicMaterial({ color: 'black' }), // bottom
new THREE.MeshBasicMaterial({ map: texture, }), // back
new THREE.MeshBasicMaterial({ color: 'red' }) // front
];
.......
}
Threejs pastes the text on the object surface
Guess you like
Origin blog.csdn.net/m0_65720832/article/details/128078739
Recommended
Ranking