• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

294
Views
Three.js: Curve Modifier with multiple geometries

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.

almost 3 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error