Tips for designing a three-dimensional egg shape using Three.js?

I'm looking to create a unique egg shape using Three.js, but I seem to be missing the correct equation. Below is the code I currently have, utilizing LatheGeometry. Can anyone provide some guidance?

var r0 = 40
var r1 = r0/4;
var inc = Math.PI/r0;
points = [];
points.push( new THREE.Vector2( 0.0001, -r0/2 ) );
for ( var i = 0; i <= r0; i ++ ) {
    var def = i<r0/2 ? 0 : r1*Math.sin((i-r0/2)*inc);
    points.push( new THREE.Vector2( Math.sqrt(r0*i-i*i), i+def-r0/2 ) );
}
points.push( new THREE.Vector2( 0.0001, -r0/2 ) );
var geometry = new THREE.LatheGeometry( points, 30 );
var material = new THREE.MeshPhongMaterial( { color: 0xFFFF20 } );
Ovo = new THREE.Mesh( geometry, material );
Ovo.position.set(0, 20.1, 0);
scene.add( Ovo );
javascriptthree.js

Answer №1

To form an "egg" shape in your design, follow these steps:

// Define the points - pairs of (x, y) that are rotated around the y-axis
const points = [];

for (let deg = 0; deg <= 180; deg += 6) {

    const rad = Math.PI * deg / 180;

    const point = new THREE.Vector2((0.72 + .08 * Math.cos(rad)) * Math.sin(rad), -Math.cos(rad)); // Equation for the "egg"

    //console.log(point); // x-coordinate should be greater than zero to prevent triangles from collapsing; not true in this case.

    points.push(point);

}

const geometry = new THREE.LatheGeometry(points, 32);

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

Version of three.js used: r.147

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

Angular8: Stay Updated with Real-Time Data Refreshment

I've implemented code in my app.component to retrieve all users. I'm facing an issue where if I have two windows open and perform any CRUD actions, the second window displays outdated data. To address this, I am attempting to refresh the page ev ...

javascriptangular

Time whizzes by too swiftly

After attempting to create an automated slideshow with clickable buttons, I encountered a problem. The slideshow functions properly, but as soon as I click one of the buttons, the slideshow speeds up significantly. This is what I implemented in my attempt ...

javascripthtmlcss

Determine the full location information with the help of Google Maps SDK without the need

My current challenge involves dealing with a list of unformatted and incorrectly written addresses. I am seeking a way to iterate through these flawed strings and generate more organized and accurate addresses using one of the many Google Maps SDKs availa ...

javascripttypescriptgoogle-mapsgoogle-maps-api-3

I am dynamically generating table rows and populating them with data. However, I encountered an issue with retrieving the data by their respective IDs

Creating a table row dynamically by populating it with data. However, encountering an issue with retrieving the data by their respective id. if(xmlhttp.status == 200) { var adminList = xmlhttp.responseJ ...

javascriptjqueryhtmlajaxweb

updating the count of items in a react virtual list

Popular libraries such as react-virtualized, react-window, and react-virtuoso all include an item count property similar to the one shown in the code snippet below from material-ui. However, this property is typically located within the return statement. ...

javascriptreactjsmaterial-ui

Unable to add JSON data to Javascript List Object? Consider using a combination of Node.JS and Firebase for a

router.get('/getMeals',function(req,res){ var mealsList = []; mealsList.push("bar"); mealsRef.on("value",function(data){ data.forEach(function(child){ console.log(child.val()); var newMeal = child ...

javascriptnode.jsfirebase-realtime-database

The transfer of information through HTTP

I have been exploring the inner workings of HTTP servers and clients to better understand how data is transmitted. Despite reading numerous articles on the topic, I still have some lingering questions that remain unanswered. I would like to walk through th ...

javascripthtmlsocketshttpserver-side

Using file types in Vue 3: a beginner's guide

In order to use file-type to determine not only the extension but also ensure the headers are correct I would need to use one of the methods listed on their GitHub page. In version 19.0.0 it says fileFromFileType doesn't have such an export and in 16. ...

javascriptvue.jsuploadfile-type

Having trouble implementing min and max date validation in Angular UI-Bootstrap datepicker with UI-Bootstrap version 1.3.3

My goal is to implement validation in my datepicker, preventing the user from selecting a date within 30 days before or after the current date. Here's the code snippet I'm currently using for the datepicker: <div class="form-group" ng-class=" ...

javascriptangularjsvalidationdate

What is the proper syntax for using .focus() with the nextElementSibling method in typing?

As I strive to programmatically shift focus in my form using nextElementSibling, I encounter a challenge with typing variables/constants due to working with Typescript... I have managed to achieve success without typing by implementing the following: myF ...

javascripthtmltypescripttypeselement

Tips for avoiding template errors when retrieving data using Nuxt's fetch() method

After transitioning my vue app to a nuxt app, I encountered an issue with vue-slick-corousel. In the original vue app, everything worked smoothly with vue-slick-carousel, but after making the necessary modifications for nuxt, the carousel wouldn't dis ...

javascriptvue.jsnuxt.js

Tips for effectively crafting a component capable of managing both a value and an observable for that specific value

I'm actually curious about two things. When is it appropriate to pass an observable of an object into a component versus resolving it with the | async method? If I want to create a versatile reusable component that can handle both scenarios - accept ...

javascriptangularrxjs

Loading JavaScript asynchronously using ExtJS

I have created a custom widget using the ExtJS framework. In order to load the necessary ext-all.js script asynchronously, I wrote an embedd.js script that also combines other JavaScript files. I've attached a function to be called when Ext.onReady is ...

javascriptasynchronousextjsdom-events

The issue with Three.js responsive canvas is that it fails to properly adjust the size of the

I'm currently working on a threejs basic scene and attempting to create a responsive canvas for a full-screen experience. However, the mesh inside the scene is not resizing correctly as expected. Instead of remaining a cube, it distorts into a rectang ...

javascriptcsscanvasthree.jsresize

Issue with Vuetifyjs theme variable failing to function properly in version 1.0.0

Check out the step-by-step instructions provided in https://vuetifyjs.com/en/style/theme. I successfully changed the theme using the code below with vuetifyjs version 0.13.0. However, after updating to vuetifyjs 1.0.5, the font still displays correctly bu ...

javascriptvue.jsfrontendvuetify.js

Node app experiencing port exhaustion within Azure Function

Currently, I am in the process of developing an Azure Function that is responsible for making a high volume of outgoing HTTP requests. However, I have noticed that periodically it reaches a limit where all requests time out for a brief period of a couple m ...

javascriptnode.jsazureazure-functions

What is the process for including an SVG file in my JavaScript .textContent?

I've been struggling to add an exclamation SVG to this section, but for some reason I can't make it work. I've searched on Google for a solution, but haven't found one yet. The SVG file is already downloaded and stored in my project fo ...

javascripthtmlcsswebweb-deployment

Exploring the functionality of utilizing dual loops with v-for in Vue.js

I am facing an issue with my table code where I need to repeat it 6 times to match the day column above. I would like to use v-for and make use of a variable called "count" which represents the number of days. Can someone assist me with this task? <tabl ...

javascriptlaravelvue.jsloopsv-for

Pass the input value through ajax without utilizing the val() function

Here is my scenario: I have multiple input fields: <label class="minilabel">Field1</label><input type="text"> ... <label class="minilabel">FieldN </label><input type="text"> I need to extract the value of each input f ...

javascriptjqueryajaxinput

Utilize Boolean operators such as AND, OR, and NOT to locate specific keywords within a text, mirroring the search capabilities

Is it possible to perform Google-style searches in strings using operators like "or", "and" and "not" with regular expressions? For instance, I aim to search for the words "Javascript", "PHP" and "Perl" within a given string in these ways: Javascript an ...

phpjavascriptregexperl