Guide: Drawing lines on the xz axis plane with three.js

I am striving to create a set of parallel lines in the xz plane, but have yet to find a simple enough example.

It seems that my approach to Geometry may be incorrect somehow.


function generateParallelLines(){
  var material = new THREE.LineBasicMaterial({ color: 0x00ff00 });
  var geometry = new THREE.Geometry();
  for(var i=0; i<10; i++){
    geometry.vertices.push(
      new THREE.Vector3(10*i, 0, 0), new THREE.Vector3(10*i, 0, 100)
    );  
  }
  var lineSet = new THREE.LineSegments(geometry, material);
  scene.add(lineSet); 
}

My understanding is that the geometry object passed to LineSegments should contain pairs of coordinates representing the start and end points of each line. However, the function above does not produce the desired result.

Is there anyone who can offer a more accurate technique?

Answer №1

The points of the shape Geometry are stored in an array of THREE.Vector3.

geometry.vertices.push( new THREE.Vector3( x, y, z ) );

You may also utilize

THREE.GridHelper( size, divisions, color1, color2 )
.

This information is valid for version r.84 of three.js.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Verify if the form has been refreshed in React JS

In my React application, I have a form inside a modal pop-up. When the user closes the pop-up, I want to check for any changes made in the form fields. If there are changes, I will display a confirmation modal; if not, I will simply close the pop-up. <F ...

Adjusting the `geometry.setDrawRange` property causes synchronization to become interrupted

In my code, I have implemented a render loop to attach a cube to the end of a line called BuffGeometry line. Everything works well when I set the line's geometry.SetDrawRange to (0, drawRange). line1.geometry.setDrawRange(0, drawCount); line2.geometr ...

I am attempting to display only the description of the button that I click on

How can I ensure that only the container pressed will display its description when the description button is clicked, instead of all mapped containers showing their descriptions? `import { useState } from "react"; export default function Se ...

What could be the reason for the variable failing to update inside a for loop in JavaScript?

When running the for loop, everything appears to be working smoothly except for the failure to update the element variable as planned. <h6>Q1</h6> <h6>Q2</h6> <h6>Q3</h6> However, the output I actually received was: & ...

Modify a website link using Javascript by detecting two separate button clicks

I am seeking a way to dynamically change the src attribute of different images on a house depending on which button has been clicked. There are two groups of buttons: The types of house parts, such as windows, doors, garage, soffits, and gutters. The col ...

Having trouble accessing the value of a node in JavaScript, as it keeps returning as "null"

Experimenting with converting HTML elements into lists. The objective is to generate a list of all values in a table upon clicking the "page next" buttons on it. Afterward, an alert should display the value of the first item in the list, which corresponds ...

Using JSTL tags may result in returning null or empty values when making Javascript calls or populating HTML

This strange error is puzzling because it appears on some of the webpages I create, but not on others, even though the elements are exactly the same. For instance, this issue does not occur: <main:uiInputBox onDarkBG="${hasDarkBG}" name="quest ...

Tips for attaching an event listener to activate a server-side email feature?

I have a setup with an express application that serves up a static index.html page. Additionally, there is a function in my app.js file that sends an email whenever the server starts running. My goal is to modify this so that the email is only sent when a ...

The Axios POST request successfully sends the data to the Express server but unfortunately encounters a 404 error

Error 404 when Sending Data from Axios POST Request to Express Server Hey there! I'm currently working on setting up a user authentication server for a project, but I've hit a roadblock while attempting to send a POST request to my Node.js Expre ...

Trouble detecting click event in jQuery after triggering radio button in HTML

Encountering a peculiar jQuery issue where triggering a click on a radio button does not fire completely and is ignored by an on click function, while a similar call to the jQuery trigger method is successfully captured. In the below jQuery snippet, a < ...

Needing to utilize the provide() function individually for every service in RC4

In Beta, my bootstrapping code was running smoothly as shown below: bootstrap(App, [ provide(Http, { useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, helperService: HelperService, authProvider: AuthProvider) => new CustomHt ...

I am in the process of transforming my basic JS Array into one that contains key/value

Currently, I am utilizing jQuery to create an Array in the following manner: var arr = new Array(); $('#some-form .some-input').each(function() { arr.push($(this).val()); ...

The Benefits of Semantic Class Names compared to Microdata

As I strive to use semantic class names, my exploration of microdata and SEO raises a question: Is it necessary to use both? Compare these two HTML snippets representing an event: Using CSS classes: <div class="event" itemscope itemtype="http://schema ...

Utilizing jQuery's .ready() method within the body section of a document to modify the onload event following the printing of the body

Recently, I took over a tabbed page that uses multiple queries to determine which tabs should be displayed. My goal is to add some PHP logic that will automatically set focus on a specific tab when the page finishes loading. I'm wondering if it&apos ...

Tips for verifying the contents of a textbox with the help of a Bootstrap

I am still learning javascript and I want to make a banner appear if the textbox is empty, but it's not working. How can I use bootstrap banners to create an alert? <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&g ...

Initiate the printing process by executing the window.print() function. As the document is being

Here's the code snippet : <body> <div class="headerCont noprint"> <div class="headerHold"> <div class="logoCont"><img src="images/logo.jpg" width="104" height="74" alt="Logo"> ...

What are the steps for scheduling asynchronous tasks using Promises in Node.js?

As a beginner in Javascript, I am struggling to understand how to execute my functions sequentially. My goal is to use Promises to accomplish this task. I am currently following a tutorial on creating a chat bot for Facebook Messenger. Essentially, I want ...

Tips for using an array of elements as an argument with the includes keyword in ReactJS or JavaScript

My code is designed to filter data using the includes keyword: Const filteredData=candidate Data.filter(item=>checkboxData.includes(item.skill.map(I=>{return i}))) CheckboxData=[html,css..] CandidateData=[{name:Alan,skill:[html,css]}] ...

Using ASP.NET MVC, pass a list of values separated by commas to an action method

Hey there, I'm facing an issue with an ajax call where I am trying to retrieve values from an html select multiple tag. The problem arises when I attempt to pass these values into my controller as I keep getting a null reference error in my controller ...

When the enter key is pressed, the form will be automatically submitted

My current implementation includes the utilization of Bootstrap input tags as shown below: myPage.html <form th:object="${field}" name="modal" method="post" th:action="@{/ajouterFieldEcran}"> ... <div class="form-group row"> <label ...