I have designed a bufferGeometry comprising 5 planes measuring 100x25 with two triangles each.
function createGeometry() {
var geometry = new THREE.PlaneGeometry(100, 25, 1);
return geometry;
}
function createScene() {
var bufferGeometry = new THREE.BufferGeometry();
var radius = 125;
var count = 5;
var positions = [];
var normals = [];
var colors = [];
var vector = new THREE.Vector3();
var color = new THREE.Color(0xffffff);
var heartGeometry = createGeometry();
var geometry = new THREE.Geometry();
var step = 0;
for (var i = 1; i <= count; i++) {
geometry.copy(heartGeometry);
const y = i * 30
geometry.translate(-100, y, 0);
geometry.faces.forEach(function (face) {
positions.push(geometry.vertices[face.a].x);
positions.push(geometry.vertices[face.a].y);
positions.push(geometry.vertices[face.a].z);
positions.push(geometry.vertices[face.b].x);
positions.push(geometry.vertices[face.b].y);
positions.push(geometry.vertices[face.b].z);
positions.push(geometry.vertices[face.c].x);
positions.push(geometry.vertices[face.c].y);
positions.push(geometry.vertices[face.c].z);
normals.push(face.normal.x);
normals.push(face.normal.y);
normals.push(face.normal.z);
normals.push(face.normal.x);
normals.push(face.normal.y);
normals.push(face.normal.z);
normals.push(face.normal.x);
normals.push(face.normal.y);
normals.push(face.normal.z);
colors.push(color.r);
colors.push(color.g);
colors.push(color.b);
colors.push(color.r);
colors.push(color.g);
colors.push(color.b);
colors.push(color.r);
colors.push(color.g);
colors.push(color.b);
});
}
bufferGeometry.addAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
bufferGeometry.addAttribute('normal', new THREE.Float32BufferAttribute(normals, 3));
bufferGeometry.addAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
var material = new THREE.MeshBasicMaterial({
vertexColors: THREE.VertexColors,
side: THREE.FrontSide
});
var mesh = new THREE.Mesh(bufferGeometry, material);
scene.add(mesh);
}
How can I add text to each plane instead of coloring them? Specifically, I want to display 1,2,3,4,5 in the center of each plane.
To accomplish this, follow these steps:
- Generate texture from canvas
- Change the material to Shader Material with
map:texture - Add
uvs to bufferGeometry.
What is the relationship between uvs and textures?
I have provided a texture creation function below:
//not sure for each character or one texture as a single texture
function createTexture(ch){
var fontSize = 20;
var c = document.createElement('canvas');
c.width = 100;
c.height = 25;
var ctx = c.getContext('2d');
ctx.font = fontSize+'px Monospace';
ctx.fillText(ch, c.width/2, c.height/2);
var texture = new THREE.Texture(c);
texture.flipY = false;
texture.needsUpdate = true;
return texture;
}
Access the full demo code HERE
EDIT
Priority is given to performance for this project. Adding separate meshes for each text will impact screen performance. Looking for suggestions on using a single mesh similar to my example.
The technique mentioned here seems promising, yet requires further understanding.