Starting from this example https://threejs.org/examples/?q=curve#webgl_modifier_curve_instanced, how is it possible to have different text displaying on the two curves? (For example: "Hello three.js!" on the upper one and "How are you?" on the other).
Should I have multiple geometries? But how can I give them to the InstancedFlow?
That's the part where I create the geometry and the flow:
const fontLoader = new THREE.FontLoader();
const font = fontLoader.load('fonts/Righteous-Regular.json', function(font){
const geometry = new THREE.TextGeometry('Hello', {
font: font,
size: 0.1,
height: 0.05,
curveSegments: 12
});
geometry.rotateX(Math.PI);
geometry.rotateY(Math.PI);
const material = new THREE.MeshStandardMaterial({
color: 0x99ffff
//emissive...
});
const numberOfIntances = 3;
flow = new InstancedFlow(numberOfIntances, curves.length, geometry, material);
curves.forEach(function({curve}, i){
flow.updateCurve(i, curve);
scene.add(flow.object3D);
});
for(let i=0; i<numberOfIntances; i++){
const curveIndex = i%curves.length;
flow.setCurve(i, curveIndex);
flow.moveIndividualAlongCurve(i, i*i/numberOfIntances);
flow.object3D.setColorAt(i, new THREE.Color(0xffffff*Math.random()));
}
});
Thank you so much in advance.