Is it possible to create a polar grid using Three JS Gridhelper?

While working with Three JS, I was able to add a grid to the scene using the GridHelper. Is there a similar function that can produce a polar grid?

This is how the geometry for a 2D Cartesian plane is created (source):

var geometry = new THREE.Geometry();
var material = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors });

this.color1 = new THREE.Color(0x444444);
this.color2 = new THREE.Color(0x888888);

for (var i = -size; i <= size; i += step) {

    geometry.vertices.push(
        new THREE.Vector3(-size, 0, i), new THREE.Vector3(size, 0, i),
        new THREE.Vector3(i, 0, -size), new THREE.Vector3(i, 0, size)
    );

    var color = i === 0 ? this.color1 : this.color2;

    geometry.colors.push(color, color, color, color);

}

THREE.LineSegments.call(this, geometry, material);

I attempted to rewrite it like this:

var segments = 64;
var material = new THREE.LineBasicMaterial({ color: 0x1976D2 });
//Somehow below didn't work...
//var material = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors });

var geometry = new THREE.Geometry();

this.color1 = new THREE.Color(0x444444);
this.color2 = new THREE.Color(0x888888);

for (var i = -size; i <= size; i += step) {
    var circle = new THREE.CircleGeometry(i, segments);

    // Remove center vertex
    circle.vertices.shift();

    geometry.merge(circle);

    var color = i === 0 ? this.color1 : this.color2;

    geometry.colors.push(color, color, color, color);

}

THREE.LineSegments.call(this, geometry, material);

However, the lines appear dashed for some reason...

https://i.sstatic.net/7PeQh.png

Answer №1

Here's a sample code snippet for creating a helper function in THREE.js:

THREE.PolarHelper = function(radius, rStep, aStep, color) {

  var helper = new THREE.Mesh();

  function line(r, a, color) {
    var material = new THREE.LineBasicMaterial({ color: color });
    var geometry = new THREE.Geometry();
    geometry.vertices.push(
      new THREE.Vector3( Math.cos(a)*r, Math.sin(a)*r, 0 ),
      new THREE.Vector3( -Math.cos(a)*r, -Math.sin(a)*r, 0 )
    );
    return new THREE.Line( geometry, material );
  }

  function circle(r, color) {
    var curve = new THREE.EllipseCurve( 0,  0,  r, r, 0,  2 * Math.PI, false,   0 );
    var path = new THREE.Path( curve.getPoints( 72 ) );
    var geometry = path.createPointsGeometry( 72 );
    var material = new THREE.LineBasicMaterial( { color : color } );
    return new THREE.Line( geometry, material );
  }

  var d = radius/rStep;
  for (var r=1; r<=rStep; r++) {
    helper.add(circle(r*d, color));
  }

  d = Math.PI/aStep;
  for (var a=0; a<aStep; a++) {
    helper.add( line(radius, a*d, color) );
  }

  return helper;
}

[ https://jsfiddle.net/tzsd5cre/ ]

Answer №2

The reason why the line appears dashed is because the THREE.LineSegments class connects every two subsequent points with a line. To achieve a continuous line, you would need to duplicate the points in the middle.

For better understanding, let's look at an example:

v1 = new THREE.Vector3( 0, 0, 0 );
v2 = new THREE.Vector3( 10, 0, 0 );
v3 = new THREE.Vector3( 20, 0, 0 );
v4 = new THREE.Vector3( 30, 0, 0 );

If you create a line geometry using these points:

geometry = new THREE.Geometry();
geometry.vertices.push( v1, v2, v3, v4 );

line = new THREE.LineSegments( geometry );

It will look like this:

.__.  .__.
1  2  3  4

On the other hand, if you modify the geometry like this:

geometry = new THREE.Geometry();
geometry.vertices.push( v1, v2, v2, v3, v3, v4 );

line = new THREE.LineSegments( geometry );

You will see a dashed line like this:

.__.__.__.
1  2  3  4

If you prefer a continuous line, you should use the THREE.Line class instead:

geometry = new THREE.Geometry();
geometry.vertices.push( v1, v2, v3, v4 );

line = new THREE.Line( geometry );

This will create a continuous line connecting the points from the vertices array:

.__.__.__.
1  2  3  4

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

Using Next.js to pass fetched data as props to components

I am currently working on integrating a leaflet map into my Next.js project. The map display is already functioning with predefined latitude and longitude in the component. However, I now need to show data retrieved from my API as the longitude and latitu ...

Using JavaScript variables within the value section of a JSON is a common requirement for developers

var averageTemperature = req.params.rating; var destinationName = req.params.name; var query = { "results.name": destinationName }; var updateQuery = { $set: { "results.$.rating": averageTemperature } }; mach.update(query, updateQuery, function(err, res ...

Easily conceal and reveal elements using Svelte in a straightforward manner

I'm looking for a straightforward method to hide and show an element using a button in Svelte. Can someone guide me on how to achieve this? Additionally, I'm curious if it's easier to accomplish this task with vanilla JavaScript. ...

After zooming, are mouse coordinates pointless?

Issue with Mouse Coordinates After Zooming I am facing a problem with obtaining accurate mouse coordinates after zooming in my code. I have included a JS fiddle link to showcase the issue. I am unsure if it is a bug in three.js or if my approach to drawin ...

Can someone explain the purpose of this code snippet: `const { foo = "bar" } = "baz"`?

I came across this code not too long ago and had trouble finding the answer online, so I'm turning to you for help. The specific code snippet is from a webpack configuration file: const { NODE_ENV = 'production', } = process.env; Appreci ...

Using jQuery to send a post request to a PHP script using either JavaScript or PHP

Just a quick question for those with experience. I am working on a page where I have implemented a jQuery AJAX post to another PHP page that contains JavaScript. My concern is, will the JavaScript code also be executed? Another scenario to consider is if ...

Using default JavaScriptSerializer to bind DateTime to knockout view model

Recently, I started using knockout and encountered a problem with DateTime Serialization and Deserialization when using the JavaScriptSerializer. I modified the gifts model in Steve's koListEditor example from his blog to include a new field for Modi ...

Determine whether an object exists within another object and merge its value into the formatted object

When filling out a form, I have a formattedData object that holds a deep copy of the original data object. If a field in the form is changed, I must update the formatted data object with properties from the values object. To simulate this scenario, I crea ...

What is causing this form to submit?

I need help with sending emails via AJAX. My problem is that the form keeps submitting and refreshing, even though I haven't used GET to send anything in the URL. HTML: <form onsubmit="ajaxEmail(); return false;" > <input type=" ...

How can one properly iterate through an HTML Collection in JavaScript?

I need help with creating a slider using JavaScript. The code I have written below calculates the widths of the slides, but it's throwing an error in the console. Can someone advise on how to properly loop through and assign width to these elements? ...

Drawing on Canvas with Html5, shifting canvas results in significant issues

I've been working on developing an HTML5 drawing app, and while I have all the functionality sorted out, I'm facing challenges during the design phase. My main issue is centered around trying to make everything look visually appealing. Specifical ...

How can Vue 3's v-bind=$attrs be implemented effectively?

I am currently in the process of migrating my Vue 2 application to Vue 3. According to the official documentation, the $listeners object has been removed in Vue 3 and event listeners are now part of $attrs. This includes taking non-prop attributes like cla ...

JavaScript code for validating two passwords is malfunctioning

I'm currently working on a registration form for my website and I'm trying to implement a JS script that compares two password inputs (password and repeat password) and displays a message saying "passwords are not the same." Below is the code I h ...

Reactjs and Isotope offer the ability to expand and collapse on click. In this unique feature, only one item can be expanded at

Currently, I am working on refining an isotope application where each item expands upon clicking it and collapses when another item is clicked. However, the issue I am facing is that multiple cells can be opened simultaneously. I am looking for the most ef ...

Calculating values within the TR using jQuery: A step-by-step guide

I have a situation where I am looking to use jQuery to calculate values within a table row. Below is a screenshot of the page where I need to determine the number of working days for an employee and display the count as NWD (Number of Working Days). http ...

The issue with ng-if not functioning within ng-repeat is that the ng-if directive

My issue is with using ng-if inside an ng-repeat in AngularJS. Despite updating to the latest version on 09/27/2014, I am still unable to make it work properly. The code functions perfectly outside of ng-repeat, and also works fine inside ng-repeat when us ...

The power of Three.js comes alive when utilizing appendChild and returning elements

I recently encountered an interesting issue that I managed to resolve, but out of sheer curiosity, I would love for someone to shed some light on why this problem occurred. Below is the snippet of my HTML code: <!DOCTYPE html> <html> < ...

"Mastering the art of event delegation: A guide to effectively engaging with various

I have data that is generated dynamically, as shown in the snippet below: const resultsDiv = document.getElementById("results"); const getList = document.getElementById("example"); document.querySelector(".container").addEventListener("click", function ...

Is there a way to use Selenium to automate the clicking of two buttons with empty href attributes? Each button has a function name and arguments within the href

Here is the HTML code for both buttons: <td> <a href="javascript:abcMy(2310);" class="btn btn-lawa btn-primary btn-primary-lawa">View</a> </td> <td> <a href="javascript:abcMy(2330);" class="btn btn-lawa btn-primary btn ...

Is your jQuery .on function failing to properly detect click events?

Seems like I'm missing something here. Why is the .on function not functioning as expected in this code snippet? <html> <head> </head> <body> <button type="button" class="close" data-test="test">TEST BUTTON< ...