Three.JS: Utilizing a wireframe material for spheres with the EdgesHelper control

I'm exploring Three.JS for the first time and I have some doubts about whether it's the best tool for my current project.

My goal is to create a wireframe material on a simple spherical geometry that looks like this:

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

Here is what I've accomplished so far: 

Note: Moved to Plunker below

http://plnkr.co/edit/FrCUIwxH1IL3wFKwHSRJ?p=preview

Currently, I am using EdgesHelper to create a grid, but I'm struggling to remove the vertical lines.

My ideal situation would allow me to adjust the distance between horizontal lines and control their opacity with the helper, but I haven't been successful in doing so. Another option could be to draw individual line geometries for each "line", although I feel this might be an excessive solution. Any insights or suggestions are welcome.

javascriptthree.jsdrawing

Answer №1

Do you think a basic shader similar to this one would suit your requirements?

vertex:

varying vec2 textureCoords;
void main() {
  textureCoords = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}

fragment:

uniform vec3 lineColor1;
uniform float transparency1;
uniform vec3 lineColor2;
uniform float transparency2;
uniform float numOfLines;
uniform float lineWidth;
varying vec2 textureCoords;
void main() {
  float positionY = abs(fract(numOfLines*textureCoords.y)*2.0-1.0);
  if(positionY < lineWidth / 100.0){
    gl_FragColor = vec4(lineColor1, transparency1);
  }else{
    gl_FragColor = vec4(lineColor2, transparency2);
  }
}

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

Colorful Paper Trail Logging

After stumbling upon a post on the internet, I discovered that Papertrail offers the ability to log using ANSI colors. This is particularly appealing to me as my node.js app generates numerous logs, and adding color helps me decipher the information during ...

javascriptnode.jspapertrail-app

Sending Data Back to Main Function Using a Callback

When I try to call the emailExists() function, it should ideally return true or false. However, instead of that expected behavior, I am encountering this error: TypeError: cb is not a function Since asynchronous operations and callbacks are relatively ne ...

javascriptnode.jsfunctionasynchronous

The length function appears to be signaling an unanticipated error

Recently, I encountered an issue with the code execution. Although the code appears to be functioning correctly, it is throwing an uncaught error. Is there a reason for concern regarding this situation? var xmlhttp = new XMLHttpRequest(); xmlhttp.onread ...

javascriptjqueryajax

HTTP GET request not updating data

I'm experimenting with AngularJS and trying out some examples: Here's the HTML code snippet: <html ng-app="myApp"> <body ng-controller="JokesController"> <h1>{{ joke }}<h1> </body> </html> A ...

javascripthtmlangularjsangularjs-directiveangularjs-service

How to Use AJAX to Read a Text File in JavaScript

Having trouble with AJAX! I have successfully set up a marquee on my website, but now I want it to dynamically fetch the text from a text file. The goal is to read the text from the file (which contains only one line) and assign it to a global variable nam ...

javascripthtmlajaxmarquee

an all-encompassing loading animation designed specifically for updates to location.href

We have a situation where a customer's website is displaying extremely slowly within an iFrame, taking about 7 seconds to load. All we can do is provide the customer with a JavaScript file for inclusion on their site, as they are not willing to make a ...

javascriptajaxanimationhookloading

Why aren't variables showing up on the right when using writeFileSync in Node.js?

I'm attempting to insert a variable as ${Y} but instead of getting the actual data in Y, my output is showing (how can I write variable ${Y}). Does anyone have a solution for this? const fs = require('fs'); const Y = fs.readFileSync('./ ...

javascriptnode.js

Error alert: TypeScript typings issue - Naming conflict with Promise / Failure to locate name Promise

I am currently working on a client/server JavaScript application and I am facing a significant issue with Promises. It appears that they are either undefined or duplicated, and this problem seems to be related to the @types package. npm install --save @ty ...

javascripttypescriptpromisetypescript-typings

Why won't JSZip accept a base64 string for loading a zip file?

As I work on implementing a feature where a small JSON object is written to the URL as a user interacts with items on a page, I also want to make sure the URL can be read later so users can resume where they left off. I successfully managed to create the ...

javascriptjszip

Identify whether the application is built with nextJS, react, or react-native

I'm currently developing a library for React applications and I anticipate that certain features will function differently depending on the environment. I am seeking a method to identify whether the current environment is a ReactJS application (creat ...

javascriptreactjsreact-nativenext.js

For optimal display on mobile devices, include "width=device-width" in the meta tag "viewport"

Is it necessary to include "width=device-width" in the meta tag named viewport when dealing with mobile phones? I've been attempting to make use of this, but without success: //iPhone Fix jQuery(document).ready(function(){ if (jQuery(window).widt ...

javascriptjqueryipadviewportlandscape

Having trouble with jQuery validation: Seeking clarification on the error

I have implemented some validations on a basic login page and added jQuery validation upon button click. However, the code is not functioning as expected. I have checked the console for errors but none were displayed. Here is the code for your review: ...

javascriptjqueryhtml

Utilizing Javascript to filter data across multiple columns in tables

I've been experimenting with the JavaScript code below to filter table rows. The original code is from w3schools, but I made some modifications to target all input values. It works well for filtering one column, however, when I try to input a value in ...

javascriptjquerydom

Error: You cannot implement an import statement beyond a module while utilizing reactjs CDN Links

I am developing a Reactjs app using react CDN Links instead of 'npx create-react-app'. I have set up an index.html, index.js, and App.js files. My goal is to import the App.js component into the Index.js file using import App from '../compon ...

javascriptreactjsimportfrontend

What functionality does the --use-npm flag serve in the create-next-app command?

When starting a new NextJS project using the CLI, there's an option to use --use-npm when running the command npx create-next-app. If you run the command without any arguments (in interactive mode), this choice isn't provided. In the documentati ...

javascriptnode.jstypescriptnpmnext.js

Controller using the 'as' syntax fails to add new object to array

Lately, I've been experimenting with the Controller as syntax in Angular. However, I seem to be struggling to grasp its functionality. I am currently following a tutorial that utilizes $scope to bind the members of the controller function rather than ...

javascriptarraysangularjs

The getElementBy method is failing to pass the value in the document

Here is the javascript code snippet I am using: document.getElementById('district').value = dist.long_name "this line is passing the value" document.getElementById('city').value = route.long_name "this doesn&apos ...

javascripthtml

Child component in Angular2 makes an observer call to its parent object

Let me try to explain this in the best way possible. I have a service that includes an observable class responsible for updating itself. This observable class needs to be pushed out to the app using the observer within the service. How can I trigger that ...

javascripttypescriptangular

Encountered a runtime error in NgRx 7.4.0: "Uncaught TypeError: ctor is not a

I'm facing difficulties trying to figure out why I can't register my effects with NgRx version 7.4.0. Despite simplifying my effects class in search of a solution, I keep encountering the following error: main.79a79285b0ad5f8b4e8a.js:33529 Uncau ...

javascriptangulartypescriptreduxngrx

Utilizing jQuery boilerplate to execute functions

I am currently utilizing jQuery Boilerplate from However, I have encountered an issue where I am unable to call the "openOverlay" function within the "clickEvents" function. Oddly enough, I am able to successfully call "openOverlay" within the "init" fun ...

javascriptjqueryfunctionboilerplate