A guide to duplicating the Mesh of a Line entity using THREE.js

Question

A guide to duplicating the Mesh of a Line entity using THREE.js

I am attempting to create a for loop consisting of 10 lines. However, I am encountering an error with line.Clone() as it is unable to find any mesh to clone from. If you have any insights on how to access the mesh of a line, please share.

Below is the code snippet:


forward_RT(){

    var spotLight = new THREE.SpotLight( 0xffffff ); //White Color
    spotLight.position.set( 150, 500, -210 );
    scene_Main.add( spotLight );

    var material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
    var geometry = new THREE.Geometry();
    geometry.vertices.push(new THREE.Vector3( spotLight.position.x, spotLight.position.y, spotLight.position.z) );
    geometry.vertices.push(new THREE.Vector3( ray_End_pos_X, ray_End_pos_Y, ray_End_pos_Z) );

    var line = new THREE.Line( geometry, material );

    for(var i=0; i<10; i++){
        //Also tried 
        //var newLine = line.clone(); & scene_Main.add(newLine);
        scene.add(line.clone());

        ray_End_pos_X += 50;
    }
}

javascript three.js line

Answer 1

Answer №1

Your code has a few issues, such as the increment of ray_End_pos_X without utilizing it in the loop. It seems like you might only need to adjust the geometry during each iteration.

My suggestion is to go with new lines from cloned geometry and shared material. I tested it out quickly and it seems to work:

    var rayX = 0, rayY=0, rayZ = 0;

    var material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
    var geometry = new THREE.Geometry();
    geometry.vertices.push(new THREE.Vector3( spotLight.position.x, spotLight.position.y, spotLight.position.z) );
    geometry.vertices.push(new THREE.Vector3( rayX, rayY, rayZ) );

    for(var i=0; i<10; i++) {
        var newLine = new THREE.Line(geometry.clone(), material);
        newLine.geometry.vertices[1].x = rayX;
        this.context.scene.add(newLine);
        rayX += 0.1;
    }

Here's how it looks (red lines, ignore everything else):

https://i.sstatic.net/jKNUgb.png

Answer 2

Your code has a few issues, such as the increment of ray_End_pos_X without utilizing it in the loop. It seems like you might only need to adjust the geometry during each iteration.

My suggestion is to go with new lines from cloned geometry and shared material. I tested it out quickly and it seems to work:

    var rayX = 0, rayY=0, rayZ = 0;

    var material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
    var geometry = new THREE.Geometry();
    geometry.vertices.push(new THREE.Vector3( spotLight.position.x, spotLight.position.y, spotLight.position.z) );
    geometry.vertices.push(new THREE.Vector3( rayX, rayY, rayZ) );

    for(var i=0; i<10; i++) {
        var newLine = new THREE.Line(geometry.clone(), material);
        newLine.geometry.vertices[1].x = rayX;
        this.context.scene.add(newLine);
        rayX += 0.1;
    }

Here's how it looks (red lines, ignore everything else):

https://i.sstatic.net/jKNUgb.png

A guide to duplicating the Mesh of a Line entity using THREE.js

Answer №1

Similar questions

Ways to effectively go through local storage using a loop

Troubleshooting: Node.js Express Server GET Handler Failing to Function

CSS Flexibility

"Challenges Encountered When Implementing CSS Card Flip

Is there a way to dynamically register an external component in Vue3 without altering the main project?

Is it possible to transfer a URLFetchApp.fetch request from the Google Apps Script side to the JavaScript side?

How can I change the displayed value of a 'select' element programmatically in Internet Explorer?

Every time $injector.get is invoked, it triggers the run() method of the Angular module

This is the command that includes the line "test": "tsc && concurrently "karma start karma.conf.js""

Utilizing JSX within this.state results in it being displayed as plain text when rendered

Searching for an element using Python's Selenium and JavaScript

Angular-datatables has a scroller function that allows for easy navigation within the content of

What is the best way to transmit a two-dimensional array using ajax?

Troubleshooting Google Authorization Issue in Angular 17: How to Fix the Error TS2304: 'google' Not Found in Angular 17

Three.js does not seem to be rendering the 3D text as expected

An uncaught security error occurred when attempting to execute the 'pushState' function on the 'History' object

When navigating using the next and back buttons, the active state in Angular is automatically removed

Swap out a portion of HTML content with the value from an input using JavaScript

What purpose does the renderer.setSize function serve?

Having difficulty with my async custom react hooks. Is there a way to wait for the result of one hook before using it in another hook?