Having trouble getting the dashed line material in three.js to work on LineSegments

Question

Having trouble getting the dashed line material in three.js to work on LineSegments

I'm having trouble in Three.js attempting to create a cube with dashed line edges, but the lines are still appearing solid. Below is my code snippet:

    var mat_line = new THREE.LineDashedMaterial( { color: "black", dashSize: 1, gapSize: 1 } );

    var geometry = new THREE.BoxGeometry( 10, 10, 10 );
    geometry.computeLineDistances();

    var cube = new THREE.Mesh( geometry, mat_cube );
    scene.add( cube )    

    var edges = new THREE.EdgesGeometry( geometry )
    var line = new THREE.LineSegments( edges, mat_line )
    scene.add( line )

Would appreciate any insights into where I might be making a mistake or if achieving dashed lines with this method is not feasible?

javascript three.js

Answer 1

Answer №1

If you want to utilize the LineDashedMaterial along with EdgesGeometry, follow these steps.

In order to use LineDashedMaterial, ensure that line distances are specified for the line.

Here is an example pattern to follow:

var material = new THREE.LineDashedMaterial( { color: 0xff0000, dashSize: 1, gapSize: 1 } );

var geometry = new THREE.BoxGeometry( 10, 10, 10 );

geometry = new THREE.EdgesGeometry( geometry );

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

line.computeLineDistances();

scene.add( line );

This code snippet is using three.js version r.92

Answer 2

If you want to utilize the LineDashedMaterial along with EdgesGeometry, follow these steps.

In order to use LineDashedMaterial, ensure that line distances are specified for the line.

Here is an example pattern to follow:

var material = new THREE.LineDashedMaterial( { color: 0xff0000, dashSize: 1, gapSize: 1 } );

var geometry = new THREE.BoxGeometry( 10, 10, 10 );

geometry = new THREE.EdgesGeometry( geometry );

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

line.computeLineDistances();

scene.add( line );

This code snippet is using three.js version r.92

Having trouble getting the dashed line material in three.js to work on LineSegments

Answer №1

Similar questions

Experiencing difficulties with parsing JSON data and storing values in a database

Searching by object id from the front-end: A step-by-step guide

Creating a Commitment - Resolving the "Expected ')' after argument list" Error

Is there a way for me to determine the component I was in?

Interact with jQuery to trigger events upon clicking on a list item, excluding checkboxes within the list

While iterating over the key with a variable in a loop, only one property is displayed consistently instead of four different

Tips for removing cookies with Javascript after an allotted period of time

Include a fresh attribute in the Interface

Iterate over an array to locate the position of a user-entered value, and subsequently update the element at that position within a different array

NVDA fails to announce the "dialog" when a Modal is launched

Tips for utilizing the "this" keyword in JavaScript

Javascript code not running as expected

Mapping a list of objects from my model to a JavaScript variable for populating fullcalendar events

What is the best way to integrate a PHP page with its own CSS and JavaScript into a Wordpress page?

Unable to view sidebar navigation on the screen

Creating a customized function in javascript/jquery with the ability to override it

The npm command returns an error message stating "Either an insufficient amount of arguments were provided or no matching entry was found."

Extract the email address from the HTML source code obtained through a GET AJAX request

Utilizing Backbone script for fetching data from an external JSON source

Using an external JavaScript script may encounter difficulties when loading pages with jQuery