Spherical outline in the void (threejs) (3D)

Is there a way to remove the line in this image and only keep the contour? Click here to view the figure.

const intersection = (a, b, c, heightC) => {
    return (u, v) => {
        const height = heightC || c;
        const size = 5;

        u = u * height;
        v = 2 * v * Math.PI;

        const x = a * size * Math.sqrt(u) * Math.cos(v);
        const y = c;
        const z = b * size * Math.sqrt(u) * Math.sin(v);

        return new Three.Vector3(x, y, z);
    }
}

export const projectionIntersection = (a, b, heightC) => {
    const geom = new Three.ParametricGeometry(intersection(a, b, 1, heightC), 1, 25);
    const math = new Three.MeshPhongMaterial({ color: 0x00FF00, wireframe: true });
    const mesh = new Three.Mesh(geom, math);

    return mesh;
}

I am looking for assistance. Can anyone help me?

Answer №1

When working with parametric geometry, transforming it into a mesh will establish connections between the central point and each edge point, effectively creating faces. For drawing a circle using just a line strip, consider exploring the Line Object. It seems like you can achieve your desired outcome by simply adding the Vector3 points to the geometry vertices and converting it into a Line.

Answer №2

An easy and budget-friendly solution involving a circular shape:

let circleGeometry = new THREE.CircleGeometry(1, 32);
circleGeometry.vertices.shift();
circleGeometry.vertices.push(circleGeometry.vertices[0].clone());
let circleObject = new THREE.Line(circleGeometry, new THREE.LineBasicMaterial({color: "yellow"}));

Check out the example on jsfiddle

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

Enhancing user experience with VideoJS player overlay buttons on mobile devices

I am currently using VideoJs player version 4.2. When I launch a videojs player on Safari browser in an iOS device, it defaults to native controls. However, when I pause the player, overlay buttons (links to navigate to other pages) are displayed on the v ...

Caution: The Prop `href` did not meet the required criteria during the implementation of react server-side rendering

I'm currently utilizing react-router-dom and suspect that it may be the root of the issue at hand. However, I'm at a loss as to where to begin investigating or how to rectify it. Additionally, I'm encountering errors such as Warning: Did not ...

Exploring Advanced Querying Methods in Sequelize

I'm trying to display data with a gains value greater than 1, but I'm running into issues when using Postman with the following URL: http://localhost:3000/api/betHistory/winners The result I'm getting is: Executing (default): SELECT `id`, ...

ReactJS - Travel Booking Platform with Advanced Date and Price Filtering

Currently, I am in the process of developing a project — a website similar to AirBnB or Booking.com for booking rooms. The backend is built on Java Spring, while the frontend uses ReactJs. Although most of the code runs smoothly, I'm encountering s ...

Getting files from CDN using NuxtJS content module - a beginner's guide

Is there a way to fetch files from an external server, such as a CDN, using the @nuxtjs/content module? This would allow me to manage the .md files independently without relying on Nuxt.js. In my current nuxt.config.js file, I have the following setup: ex ...

Unable to retrieve the desired outcome from a nested query block in Node.js

When I use the nested query format, it works fine. When I print console.log(main_array) in the second db.query section, it returns the parent and child categories as a single array that shows the parent-child relation. However, when I send the entire data ...

The functionality of $(window).load() varies between Internet Explorer and Firefox

While experimenting with $(window).load() function, I encountered a problem. The function is supposed to wait for the window to fully load before executing any code written inside it. This works correctly in IE, but not in Firefox. In Firefox, it behaves m ...

Invoking functions from a JS file that has already been loaded

I am currently utilizing jQuery for my project. Within a JS file named super.js, I have the following code: $("#content").load("/profile"); function setHash(hash) { location.hash = "#/:-)/"+hash; } The "/profile" path is used to load an external JS f ...

Issue in TypeScript where object properties may still be considered undefined even after verifying using Object.values() for undefined values

I'm encountering an issue with TypeScript regarding my interface MentionItem. Both the id and value properties are supposed to be strings, but TypeScript is flagging them as possibly string | undefined. Interestingly, manually checking that id and va ...

Several iFrames embedded on the website automatically adjust to the same pre-set height

Apologies if this question has already been addressed, but I am struggling to properly articulate it. Here's the issue: I have a client's holiday accommodation website that uses three embedded iFrames for a Calendar, Booking Enquiry, and floorpla ...

What is the process for deleting certain code from a main component within a React webpage without altering the main component itself?

I have a main component named Layout.jsx that includes the essential elements for the website such as the navigation bar and meta tags. It also contains a Google tag to track analytics across the entire site. Now, I have a specific webpage for Google Ads w ...

The charAt function in a basic JavaScript if statement is failing to execute

When a user inputs a number that does not start with 6 or 9, an error occurs: console.log($(this).val().charAt(0)); if($(this).val().charAt(0) != 6 || $(this).val().charAt(0) != 9){ x=false; }else { x=true; } The console.log function corre ...

Techniques for transferring JavaScript variables within a URL using AJAX

Is there a correct way to pass the values of accesstoken and pageid inside the URL I am using? Any ideas on how to do it properly? <script type="text/javascript"> function makeUrl() { var accesstoken = "12345679|bababashahahhahauauuaua"; ...

The image in the HTML is currently positioned at the bottom, but I would like it to be

this is what it looks like: https://i.sstatic.net/VLqN7.png I need it to be at the top next to the first card. <!-- top nav--> <nav class="navbar navbar-expand-lg navbar-light" style="background-color:white"> <a class="navbar-brand" ...

What is the best way to choose an Animatedmodal that can showcase various demos while using just one ID?

I am currently customizing my website and utilizing the AnimatedModal.js framework. I have successfully displayed content in one modal, but encountered difficulty when attempting to create multiple modals as they all share the same ID. My question is, how ...

Steps to access arrays that are embedded in a file and are loaded asynchronously

https://gyazo.com/e80eea9f69c0cbb52cc7929d0a46ea2f The name of the object is totalCount. How can I retrieve the count from it? Object.result was my first attempt, but it returned undefined. For my second attempt: var count = totalCount.resu ...

Strategies for capturing POST data sent to a JavaScript webpage

The request is sent from an external source beyond my control xyz.php <form action='https_:_//xyz.com/javascriptFile' method='POST'> <input type='text' name='data' /> </form> to: (My custom f ...

Encountering a snag while setting up Google authentication on my website

Currently, I am in the process of integrating Google Authentication into my website. However, I have run into an error related to session management that reads as follows: TypeError: req.session.regenerate is not a function at SessionManager.logIn (C:&bso ...

Modify data in a table using Dialog Component in Angular Material

I need to implement a Material Dialog feature that allows users to update entries in a table by clicking on the "Change Status" button. Check out this functional snippet: https://stackblitz.com/edit/angular-alu8pa I have successfully retrieved data fr ...

Is there a way to directly update the value of a nested object array using v-model in VUE?

Looking to update a value in JSON using v-model { class: "data.child", "myform.input1": [true, "<input1 value>"] } <input type="text" v-model="<what should be inserted here?>" > //update the value directly in my ...