Position of Vertices in Three.js PolyhedronGeometry

Currently, I am experimenting with creating my own unique shape using PolyhedronGeometry

In a rough sketch:

https://i.sstatic.net/PREZN.jpg

I've encountered some challenges. Specifically, I'm attempting to attach this newly created shape onto a sphere. After working out some formulas, I arrived at the following vertices:

[ -0.6495190528383289, -0.09943689110435831, 0.36157613954394185, 
   0, -0.09943689110435831, 0.7433789778353299, 
   0.6495190528383289, -0.09943689110435831, 0.36157613954394185,
   0.3897114317029973, -0.39774756441743325, 0.7231522790878837, 
   0, -0.5966213466261499, 0.5947031822682639, 
  -0.3897114317029973, -0.39774756441743325, 0.7231522790878837 ]

Furthermore, for the face indices, I have:

[ 5,4,1, 5,1,0, 2,1,3, 4,3,1, 0,1,2, 0,4,5, 2,3,4 ]

Despite adding spheres as visual aids, they seem to be in the right positions but there are discrepancies in certain areas regardless of adjustments made to the vertices/faces:

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

  1. Does the order of faces matter?
  2. Why is my polyhedron not rendering correctly?
javascriptthree.js

Answer №1

The issue lies in the unequal lengths of the original vectors, resulting in discrepancies in their projections on the figure. Additionally, there may have been an error in specifying the radius of the sphere.

For instance, consider the length of the first vector in the set:

(new THREE.Vector3( 
                    -0.6495190528383289, 
                    -0.09943689110435831, 
                    0.36157613954394185 )
).length() === 0.75

Compare this to the length of the last vector in the set:

(new THREE.Vector3(
                    -0.3897114317029973, 
                    -0.39774756441743325, 
                    0.7231522790878837 )
).length() === 0.9127033163903814

If a radius equal to the PolyhedronGeometry of the length of the first vector is set, the latter vector lies outside the sphere formed by this radius. On the other hand, if the radius is based on the PolyhedronGeometry of the length of the last vector, the first vector falls inside the sphere.

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

Struggling to get SmartWizard Jquery 4 to integrate smoothly with Bootstrap 4

Greetings, StackOverflow community! I am a newcomer here seeking assistance with fixing my code. I am struggling to get SmartWizard jQuery 4 to function properly. Despite meticulously copying every line of code (excluding css and js file sources), the plug ...

javascriptjquerybootstrap-4

Tips for sharing a variable with an external JavaScript file in ASP.NET

Utilizing the variables from default.aspx.cs within the script of the default.aspx file has been achieved successfully with the following code: public partial class default: System.Web.UI.Page { public string _file = string.Empty; public string _i ...

javascriptc#asp.neteval

Using ReactJS to dynamically change styles based on state variables can sometimes cause CSS

Currently delving into the world of React. Learning about states/props and the art of dynamically altering elements. I've set up the component states like this: constructor(props) { super(props); this.modifyStyle = this.modifyStyle.bind(thi ...

javascripthtmlcssreactjsweb-frontend

Guide on linking JavaScript files in Node.js

I am having trouble getting my javascript to work properly. My javascript files are located in the public/javascripts directory. app.js app.use(express.static(path.join(__dirname, 'public'))); views/layout.pug doctype html html head ti ...

javascriptnode.jspug

Using Vue 3, Bootstrap, and Pinia to create an innovative Global Modal experience

After creating a ModalComponent.vue file that I intend to use across different sections, I encountered an issue with closing the modal after calling my Pinia stores. The modal includes slots for the title, body, and footer, along with a standard close butt ...

javascriptvue.jsbootstrap-modalbootstrap-5pinia

Node.js error: HTML audio file returns 404 on server but plays fine when accessed directly as an HTML file

I'm facing an issue with an HTML page that contains an autoplay tag for a song (the file is in mp3 format). When I open the page as a local file on my Mac, the song plays fine. However, when I try to run it using a node.js file with socket.io, the son ...

javascripthtmlnode.js

Is there a way to store image URLs in a fashionable manner?

Hey there! I've been working on creating a HTML page that showcases multiple images. Everything is running smoothly on my localhost, but when I try to access it online, the images take forever to load. Any suggestions on how I can cache image URLs in ...

javascriptjqueryhtmlcss

Obtaining a result from a Promise in AngularJS

Here is a snippet of an Angular JS Service that I have: 'use strict'; app.factory('loggedService', ['$http', 'authService', 'customerService', function ($http, authService, customerService) { var out = ...

javascriptangularjsangularjs-scope

What is the best way to combine key-value pairs objects into a single object using JavaScript?

I am faced with the challenge of creating a new object that combines keys from a specific array (const props = []) and values from existing objects. If a key does not exist in an object, I aim to populate it with null or placeholder values. Here is my cur ...

javascriptarraysloopsobjectlodash

Looking for a way to scroll images without relying on the marquee tag? Whether you prefer using JavaScript, jQuery,

<marquee> <div class="client"> <img src="images/c1.png"/> </div> <div class="client"> <img src="images/c2.png"/> </div> <div class="client"> ...

javascriptjqueryhtmlcss

Steps for activating chromedriver logging using the selenium webdriver

Is there a way to activate the chromedriver's extensive logging features from within the selenium webdriver? Despite discovering the appropriate methods loggingTo and enableVerboseLogging, I am struggling to apply them correctly: require('chrom ...

javascriptseleniumselenium-webdriverselenium-chromedriver

Could one achieve the task without the presence of a function?

When I execute the below code: let app = express() in the console, it outputs: { [EventEmitter: app] _events: { mount: [Function: onmount] }, _eventsCount: 1, _maxListeners: undefined, setMaxListeners: [Function: setMaxListeners], getMaxList ...

javascriptnode.jsmongodbmongoosegridfs-stream

Combining arrays of objects into one single array

I possess a large array of intricately nested objects, akin to this (imagine adding 76 more products for a clearer picture): [ { "ProductID": 11, "ProductName": "Queso Cabrales", "SupplierID": 5, "CategoryID": 4, "QuantityPerUnit": " ...

javascriptarraysoopsorting

What is the process for executing mocha tests within a web browser?

Am I the only one who thinks that their documentation lacks proper instructions on running tests in the browser? Do I really need to create the HTML file they mention in the example? How can I ensure that it runs the specific test cases for my project? I ...

javascriptreactjsmocha.js

What are the steps to executing commands with child processes in Node.js?

I have successfully established communication between the client and server using socket.io. I am now utilizing WebSockets to send commands from the client to the server, and I would like to execute these received commands on the server. Here is my approa ...

javascripthtmlnode.jsexpresswebsocket

Error encountered: Unexpected token when defining inline style in React

When attempting to prevent scrolling on the page by using style='overflow-y: auto;': render() { return ( <div style={{overflow-y: auto}}> <div>{this.props.title}</div> <div>{this.props.children}& ...

javascriptcssreactjsreact-bootstrap

Excessive API requests can occur when Redux dispatches an action multiple times

Utilizing the Jikan API for anime, my objective is to showcase promo thumbnails of new anime shows. This involves two separate API calls: one to retrieve the latest anime shows: export const get_new_anime = () => `${base_url}search/anime?q&order_b ...

javascriptreactjsreduxreducers

Looking for assistance with $.ajax - How can I send an object with key-value pairs?

I want to utilize $.ajax to send data in this manner: $.ajax({'url': 'my.php', 'type': 'POST', 'data': arr, 'success': function(response) { alert(res ...

phpjavascriptjqueryajax

What can cause the reactive value to fail to update in a Vue template?

In my application, I encountered a strange issue where a h3 tag containing a title bound to a reactive data property from a Firestore database would sometimes not display properly after a page reload. Oddly enough, when accessing the page through client-si ...

javascriptvue.jsasynchronousnuxt.js

React Js month picker problem encountered

I am currently working on implementing a month picker using the library called react-month-picker The code is functioning correctly in React: https://codesandbox.io/s/react-month-picker-forked-84rqr However, when I tried to integrate the same code into a ...

javascriptreactjsdatenpmnext.js