Guide on duplicating the structure of a CANNON.js body using a THREE.js IcosahedronGeometry shape

I've been working with Three.JS and CANNON.js to create a simple 3D object, but I'm having trouble getting the collider shape to align with the visual object's shape.

First, I create my shape:

const geometry = new THREE.IcosahedronGeometry(1, 0);
const material = new THREE.MeshLambertMaterial({ color: 0x009900 });
const finalCube = new THREE.Mesh(geometry, material);

When attempting to add collision to the shape, I have various options to choose from. I decided on using ConvexPolyhedron as it seems to be the most versatile, requiring an array of points and faces.

However, when trying to access the points and faces of the geometry (or vertices and faces in 3D terms), I encountered issues. Some methods are protected, while others simply return generic error codes.

My goal is to have the collision box accurately match the 3D model.

If anyone can offer assistance, I would greatly appreciate it! Thank you so much!

javascriptthree.jscannon.js

Answer №1

Is this the information you are seeking?

const phi = (1 + Math.sqrt(5)) / 2;
const icosahedronVertices = [
    new CANNON.Vec3(-1, phi, 0), new CANNON.Vec3(1, phi, 0),
    new CANNON.Vec3(-1, -phi, 0), new CANNON.Vec3(1, -phi, 0),
    new CANNON.Vec3(0, -1, phi), new CANNON.Vec3(0, 1, phi),
    new CANNON.Vec3(0, -1, -phi), new CANNON.Vec3(0, 1, -phi),
    new CANNON.Vec3(phi, 0, -1), new CANNON.Vec3(phi, 0, 1),
    new CANNON.Vec3(-phi, 0, -1), new CANNON.Vec3(-phi, 0, 1)
];

// Faces
const icosahedronFaces = [
    [0, 11, 5], [0, 5, 1], [0, 1, 7], [0, 7, 10], [0, 10, 11],
    [1, 5, 9], [5, 11, 4], [11, 10, 2], [10, 7, 6], [7, 1, 8],
    [3, 9, 4], [3, 4, 2], [3, 2, 6], [3, 6, 8], [3, 8, 9],
    [4, 9, 5], [2, 4, 11], [6, 2, 10], [8, 6, 7], [9, 8, 1]
];

// Create a ConvexPolyhedron shape using the defined vertices and faces
const icosahedronShape = new CANNON.ConvexPolyhedron({
    vertices: icosahedronVertices,
    faces: icosahedronFaces
});

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

Moving objects with Three.JS

Seems like I might just be overlooking a simple solution here. I have a setup with a spotlight pointing backward from the camera towards a plane geometry, as well as some randomly scattered boxes. My goal is to create a basic top-down demo. I move the came ...

javascriptthree.js

Using ng-bind-html does not offer protection against cross-site scripting vulnerabilities

I utilized ng-bind-html to safeguard against cross site scripting vulnerabilities. I came across information about sanitization and engaged in a discussion at one forum as well as another informative discussion. However, I encountered an issue where it di ...

javascriptangularjsxss

Error: Attempting to access the 'SearchBox' property of an undefined variable is not allowed

I have been working on a Google Maps code that displays both public and private schools with different markers for each category. However, when running the code, I encountered an error specifically on this line of code: var searchBox = new google.maps.pl ...

javascriptphpgoogle-mapsgoogle-maps-markers

Recognize when the DOM undergoes modifications

After taking Matt's suggestion, I have made changes to the .ready() call. In my workflow, I utilize jQuery to set up certain configurations like this: $(function () { $('.myThing').each(function() { ... configuring happens he ...

javascriptjqueryjquery-events

Exploring ways to manipulate checkboxes using jQuery for enhanced form validation

I am working on a custom validation for four fields, with one required to be filled in. However, I am facing an issue where the validation process is interfering with the functionality of my checkboxes. Once the jQuery click function runs, the checkboxes a ...

javascriptjqueryhtml

Is window.getComputedStyle not functioning as anticipated?

Here is a function I created to determine the width and height of a text: function size_calculation(word,fontSize) { const div = document.body.appendChild(document.createElement('div')); div.textContent = word; div.style.cssText = ` fo ...

javascripthtmlcss

Enclose Angular $resource requests that do not return POST data

Currently, I am working on enhancing my $resource requests by implementing a straightforward wrapper. The primary objective is to incorporate some logic before the request is actually sent. For guidance, I referred to an informative article authored by Nil ...

javascriptrestangularjs

What is the best way to correctly showcase dynamic pages in ExpressJS?

Within my app.js file, there exists an array of objects that is defined as follows: var people = [ {name: "Henrique Melo", username: "heenrique", email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7a121f1408130b0f1 ...

javascriptnode.jsrestloopsexpress

Export nested objects from an AngularJS JSON array to a CSV file

When I download my data into a CSV file, the display setting is showing as "[object Object]". This is not the desired outcome. https://i.stack.imgur.com/ej2UO.png The expected display should look like this: https://i.stack.imgur.com/8JJ88.png This is p ...

javascriptangularjs

What is the process for inserting a intricate new item into a JavaScript array?

In my Node.js/Express web app, I am working with a JavaScript data structure that looks like this: var users = [ { username: 'x', password: 'secret', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-c ...

javascriptnode.jsdata-structuresexpress

Retrieve the API array index by checking the value of the 'Name' field

I am looking to compare the name of a button I click on with an array in order to find the matching name and then select the corresponding array number. Currently, I have a For loop that retrieves information from every team in the array, but I only requi ...

javascripthtmljqueryapidom

Mapping the table by the header and the first cell in each row to be filled with data from a JSON

As I utilize PHP to echo JSON array inline, my goal is for JavaScript/jQuery to populate a table based on this data. The HTML table structure looks like this: <table> <thead> <tr> <th>Time</th> <th dat ...

javascriptjqueryjsonforeach

Steps to turn off sourcemaps in the @sentry/nextjs package

Currently, I am working on a Next.js project and have incorporated the @sentry/nextjs package for error logging purposes. My goal is to turn off sourcemaps in the client side of my deployed application. Despite going through this informative blog post fro ...

javascriptnode.jsnext.jssentry

Displaying a JSON response on an HTML webpage

JSON object: {"id":75,"year":2011,"make":"Aston Martin","model":"V12 Vanquish"} jQuery: function post() { $("form").on("ajax:success", function(e, data, status, xhr) { var json = JSON.parse(xhr.responseText); $.each(json, function(k, v) { ...

javascriptjqueryjson

Is the original image source revealed when clicked?

I've implemented an expand and collapse feature using jQuery/JavaScript. Clicking on the DIV causes the image inside to change state. However, clicking on the same DIV again doesn't return the image to its original state; it remains stuck in the ...

javascriptjqueryhtmlaccordion

Does embedding an Iframe for external files from your server enhance the loading speed of the current page compared to directly loading it on the page?

I'm facing an issue with the loading time of a Facebook post on my webpage index.php. The current method of using the embedded post provided by Facebook is taking too long to load. My solution is to create a separate page, post.php, where only the Fac ...

javascriptphphtmlcssiframe

Establishing a variable to serve as a function invocation

Is there a way I can assign a variable to either .prev() or .next()? Here is an example of what I am trying to do: if(x == y) var shift = '.prev()'; else var shift = '.next()'; $("li.active").removeClass('a ...

javascriptjquery

What is the method for importing the merge function from "lodash/merge" in TypeScript?

When using ES6, it's possible to import only a single function from a library in order to reduce the overall bundle size. For example: import merge from "lodash/merge" But in TypeScript, the statement above can trigger a compile error: Cannot find m ...

javascripttypescript

Guide on retrieving URL data using Ajax

While I am familiar with the method in PHP (e.g. curl) to retrieve the contents of a URL, I am unsure of how to do so using ajax. Unfortunately, I have tried writing code without success in displaying the contents from the URL and separating them into vari ...

javascriptphpajax

Using Vue.js to conditionally render content based on changes in a variable

I am facing a challenge in rendering a new element once the boolean variable waiting changes to true. The issue arises when transitioning from one v-if statement to another, as the boolean does not update until the first statement is completed. How can I s ...

javascriptvue.jsvuejs2