Designing geometric forms using the vertices of a Sphere in ThreeJs

My current project involves creating shapes based on vertices that have already been generated using a formula. I have successfully connected lines between these vertices using a threejs method, but now I want to take it a step further and create map tiles by connecting these shapes together. My plan is to modify the vertices' y, x, and z axes, but I am struggling to find the correct formula for these adjustments:

mesh1 = new THREE.Mesh(); // sphere container
mesh2 = new THREE.Mesh(); // sphere container
mesh3 = new THREE.Mesh(); // sphere container

var R = 5.6; // radius
var LON = 32; var LAT = 16; // approximation

var PILAT = Math.PI/LAT;
var PILON = 2 * Math.PI/LON;

var cos1,cos2,sin1,sin2,t1,t2;
var y1,y2,r1,r2,t1,t2;

var plotG = new THREE.PlaneGeometry(0.06, 0.06);
var lineColor = new THREE.LineBasicMaterial({color: 0xaaaaaa});
var geometry = new THREE.Geometry();

var oldLATCounter = 0;
var oldLONCounter = 0;
for (var i=0; i<LAT; i++){
  t1 = Math.PI - i*PILAT;
  ...

scene.add(mesh2);
mesh2.scale.set(R,R,R);
mesh2.position.x =  0;

Take a look at the sphere I'm currently working on here

Answer №1

Have you explored the capabilities of the THREE.Shape Class? It allows you to create shapes or polygons based on specified points. To achieve your desired outcome, my recommendation is to iterate through the vertices required and construct a shape using them.

To learn more about the THREE.Shape class, click here.

If you intend to generate a geometry from the shape and then incorporate it into a mesh, I suggest looking into THREE.ShapeGeometry as well.

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

Dealing with Failed Axios Requests in React

I'm having trouble figuring out what I'm doing incorrectly. My goal is for the Main component to pass the ajax request method to the child component InputForm. The child component would then return the results, which will be stored in the state ...

Customize the printing settings within bootstrap by modifying the background color from transparent to a solid color using CSS/SCSS

I am facing an issue with the bootstrap CSS/print feature. In the bootstrap CSS (reset.css) file, all styles are cleared for printing purposes. @media print { * { text-shadow: none !important; color: black !important; background: transparen ...

Begin by introducing a fresh attribute to a JSON entity

Looking for help with modifying JSON data: var myVar = { "9":"Automotive & Industrial", "1":"Books", "7":"Clothing" }; I need to insert a new element at the beginning of the array, resulting in this: var myVar = { "5":"Electroni ...

When using ODataConventionModelBuilder in Breeze js, the AutoGeneratedKeyType will consistently be set to 'none'

I am working with a straightforward entityframework poco object public partial class Location: Entity { [Key] public int Id { get; set; } public string Description { get; set; } } The baseClass Entity is structured as below public abstract c ...

Tips for avoiding the transmission of className and style attributes to React components

Hey there! I'm working on a custom button component that needs to accept all ButtonHTMLAttributes except for className and style to avoid any conflicts with styling. I'm using TypeScript with React, but I've run into some issues trying to ac ...

Converting a string into a Date in Typescript while disregarding the timezone

Upon receiving a date in string format like this (e.g.): "11/10/2015 10:00:00" It's important to note that this is in UTC time. However, when creating a Date object from this string, it defaults to local time: let time = "11/10/2015 10:00:00"; let ...

The React JSX error you encountered is due to the missing return value at the end of the arrow function

After implementing my code, I noticed the following: books.map(({ subjects, formats, title, authors, bookshelves }, index) => { subjects = subjects.join().toLowerCase(); author = authors.map(({ name }) => name).join() ...

How to dynamically delete React Router Link components after they have been clicked on?

When using React Router, how do I remove the div that contains a Link component or the Link component itself when it is clicked on and the routing is complete? For instance, consider an app structured in the following way: ==Header== ==Link1 Link2== Onc ...

retrieve room from a socket on socket.io

Is there a way to retrieve the rooms associated with a socket in socket.io version 1.4? I attempted to use this.socket.adapter.rooms, but encountered an error in the chrome console: Cannot read property 'rooms' of undefined Here is the method I ...

Display the Material UI Switch in an active state even when the "checked" value is set to false

While using Material UI Switches with Formik, I've encountered an issue. When I toggle the switch to 'enable,' it automatically sets the value in Formik to "true," and when I toggle it to 'disable,' it sets the value in Formik to " ...

Nested div elements maintain background-image continuity

Is it possible to maintain the background image of the body within a child div that has a red background color with opacity? * { box-sizing: border-box; } body { background-image: url('https://d6scj24zvfbbo.cloudfront.net/306f4bc782c04bbe4939f8c ...

What is the best way to ensure that multiple bootstrap buttons in a row have the same width?

Could you help me figure out how to make the <div id="full"> element take up the full width of its parent container, while also ensuring that the 3 buttons inside share this width and have equal sizes with gaps between them? https://i.stac ...

Is there a way to connect and interact with a different ng-controller's ng-model within a separate ng-controller?

Is it possible to access the ng-model from another ng-controller and if so, how can it be done? In this scenario, I am using two controllers. The first controller has a model called mddl1, while the second controller does not have any other model. However, ...

Adjust the vertical scaling of a container in CSS Grid to maintain aspect ratio similar to an <img>

I am attempting to recreate a demonstration where the house image scales as the viewport height decreases. However, instead of using an <img>, I would like to use a container that also includes absolutely positioned content (unable to provide all the ...

Display Vue component using a string input

Is there a solution to make this non-functioning example work, or is its usage illegal? Vue.component('hello', { template: '<span>Hello world!</span>' }) Vue.component('foo', { data(){ return { ...

When you click on an anchor tag, the divs do not automatically move to the top of the page

Encountering an issue with a rather straightforward website. It consists of a vertical scroll with a left side navigation. Whenever I click on a menu item, it fails to bring the corresponding section to the top of the page. I've experimented with a fe ...

If the width of the window is below 768px, do not execute the function

In order to prevent the showCover() function from firing when the window width is less than 768px on page load AND resize, I have made some adjustments to the code below. Even though the window is smaller than 768px, the function will not be triggered. ...

Excessive notification events are currently causing a blockage in the Angular app

Currently, I am utilizing Angular 7 in combination with SignalR on the backend for push notifications. At certain times, an overwhelming amount of notifications flood in, causing my application to become completely unresponsive. The SignalR service compon ...

Maintain the horizontal alignment of CSS floats

What causes the div on the right to float higher than the two divs on the left? How can I ensure they are all aligned at the top? HTML <header> <div class="nav" style="width:100%;border:#900 thin solid;"> <ul id='nav-left' ...

Navigating through the Express.js routes incorrectly

I currently have 3 different express.js routes set up: app.get('/packages/:name', (req, res) => {...}); app.get('/packages/search/', (req, res) => {...}); app.get('/packages/search/:name', (req, res) => {...}); At t ...