Generate CANNON.RigidBody using either a THREE.Mesh or THREE.Geometry object

For my project, I am using a THREE.JSONLoader to create a THREE.Mesh object as shown below:

// Creating a castle.
loader.load('/Meshes/CastleTower.js', function(geometry, materials) {
    var tmp_material = new THREE.MeshLambertMaterial();
    THREE.ColorUtils.adjustHSV(tmp_material.color, 0, 0, 0.9);

    var castle = new THREE.Mesh(geometry, tmp_material);
    castle.scale.set(0.2, 0.2, 0.2);
    castle.rotation.setX(-Math.PI/2);
    scene.add(castle);
});

I'm wondering if it's possible to convert the THREE.Mesh (specifically the var castle) or the THREE.Geometry (specifically the var geometry) object into a CANNON.RigidBody? Essentially, how can I make any custom THREE.Mesh "solid"?

Update

To tackle this question, I used Blender to design a new castle out of boxes and then exported it to the Three.js format. By setting the mass of a CANNON.Body to 0, it becomes static. You can see how I implemented this in my code here.

javascriptthree.jscannon.js

Answer №1

After encountering a similar problem, I resolved it by generating the required "points" and "faces" (as outlined in Cannon documentation) from the THREE.Geometry object (referred to as geometry in this case) using the following two functions:

cannonPoints = geometry.vertices.map(function(v) {
    return new CANNON.Vec3( v.x, v.y, v.z )
})

cannonFaces = geometry.faces.map(function(f) {
    return [f.a, f.b, f.c]
})

Answer №2

When it comes to accurately representing your model physically, the approach you take will depend on your specific needs. While I may not be well-versed in cannon.js, there are several options that you can explore:

  • Utilize "computeBoundingBox" to generate a cannon.js box based on the bounds of your tower.
  • Alternatively, you can use "computeBoundingSphere" in a similar manner.
  • If you require physics for a concave mesh, consider using an example provided by Cannon.js like the one showcased here:

For a different approach unrelated to cannon.js, you might want to consider utilizing Recast. This tool can load your .obj file and create a navigation mesh based on your specifications. It's particularly useful for games with a bird's eye view or AI-controlled characters. You can find a JavaScript port of Recast here: https://github.com/vincent/recast.js

I hope this information proves helpful to you!

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

External JavaScript files cannot be used with Angular 2

I am attempting to integrate the twitter-bootstrap-wizard JavaScript library into my Angular 2 project, but I keep encountering the following error: WEBPACK_MODULE_1_jquery(...).bootstrapWizard is not a function I have created a new Angular app using a ...

javascriptangulartypescript

Using Bootstrap to handle opening a link when a dropdown menu button is clicked

Utilizing Bootstrap in my main menu was essential for navigating through the numerous pages, subpages, and sub-subpages within my project. The dropdownmenu feature proved to be very helpful in this regard. However, my client now has a specific request - t ...

javascriptjquerycsstwitter-bootstrapdrop-down-menu

Placing a v-model within a Vue.js component

I am attempting to achieve something similar to this specific scenario, but I am struggling to find the appropriate technical terminology to describe it. Unfortunately, I haven't been able to locate a solution for this issue. <div id="app"> ...

javascriptvue.jsvuejs2

Attempting to increase a variable by 1, only to find that it appears to be doubling on its own

As I work on developing a quiz, I encounter an issue with my code. When I click on the question_holder div, variable x seems to be doubling instead of incrementing as expected. The value of x is supposed to increase by one each time, but it appears to ski ...

javascriptjquery

Adjust the position of the object in relation to its current orientation

I am facing a challenge in moving an object upwards in relation to its current direction. I am working with a CubeGeometry that has a specific height, and my goal is to place an object at the top of it and have it rotate along with the cube. Simply adding ...

javascriptthree.js

Installing libraries using npm can be done in two ways: using the command `npm install`

While working, we encountered an issue where the icon for the menu block from the rc-menu library was not displaying. Every time we run mvn install We also run npm install In our package.json file, we had included this library "rc-menu":"^5.1 ...

javascriptnode.jsreactjsnpmnpm-install

Creating a Regular Expression that excludes all white spaces, including those at the start or end of the string

I attempted to implement this solution, however, I am encountering some issues: Click here to see the demo <form name="myform1"> Valid? {{ myform1.$valid }} <input type="text" name="username1" ng-model="username1" ng-pattern="/^\S.*?&bso ...

javascripthtmlangularjs

How to Retrieve the Number of Requests in an Express Application

Is there a method to retrieve the overall count of requests in a specific route using Expressjs? ...

javascriptnode.jsexpressserverbackend

Optimal method for retrieving data from a JSON object using the object's ID with a map

Can you teach me how to locate a json object in JavaScript? Here is a sample Json: { "Employees" : [ { "userId":"rirani", "jobTitleName":"Developer", "preferredFullName":"Romin Irani", "employeeCode":"E1", "region":"CA", "phoneNumber":"408-1234567", " ...

javascriptangularjsjsontypescript

Steps to generating a dynamic fabric canvas upon opening a new window

There seems to be an issue with the code below. When I click the button next to the canvas, my intention is to have a new window open displaying the canvas in full view. However, it's not working as expected. Can someone please assist me in troublesho ...

javascriptvue.jscanvasvuejs3fabricjs

Guide to transferring existing Mongoose Schema information to updated Mongoose Schema Data

In the schema I was using previously with Mongoose, it looked like this: social:{ instagram: String, facebook: String, whatsapp: String, } Now, my updated Mongoose Schema is structured differently: social:{ instagram: { dat ...

javascriptnode.jsmongodbexpressmongoose

"Adding page-specific scripts with the help of nunjucks and express app: A step-by-step guide

What is the most efficient way to manage scripts that are common for all pages and scripts that are specific to certain pages using nunjucks as the template engine and express 4 as the backend framework? --- site --- public |___js |___ script.js (f ...

javascriptnode.jsexpressnunjucks

Adding the p5.js library to Stackblitz IDE: A step-by-step guide

Recently, I've been using Stackblitz as my IDE to improve my coding skills on my Chromebook. While it has been effective in many ways, I have encountered difficulties when trying to integrate the p5 library. As a beginner in programming, I only grasp ...

javascriptdependency-injectionidep5.jsstackblitz

Searching for elements by tag name in JavaScript

Recently, I attempted to create JavaScript code that would highlight an element when a user hovers their cursor over it. My approach involves adding an event listener to every child within the first "nav" tag in the current document: let navigation = docum ...

javascripthtml

Incorporating the Revolution Slider jQuery plugin within a Vue.js environment

Currently, my goal is to transform an html project into a vue application. The initial project utilizes a jquery plugin for Revolution slider by including them through script tags in the body of the html file and then initializing them: <script type= ...

javascriptnode.jsvue.jsnpmrevolution-slider

NumericError on /post_create/ unrecognizable numeric value: 'manish'

I have a unique vision: I want to create posts with different authors in separate models def post_creation(request): author, initiated = Author.objects.get_or_create(name=request.user.username) form = CreationForm(request.POST or None , request.FILES or ...

javascriptjavapythondjango

Inserting an item into ng-model within a dropdown menu

I have a select box populated with data from my backend. This data is an array of objects: [Object { superkund_id="4", nod_id="12068", namn="Växjö Fagrabäck"}, Object { superkund_id="5", nod_id="9548", namn="Halmstad Bågen / Pilen"}] I am using ng-o ...

javascriptangularjs

Three.js has a known issue where lights fail to operate as expected

I've been experimenting with Three.js for some time now, but I'm facing an issue with getting lights to work. Despite trying to add different types of lights to the scene, they don't seem to have any effect. I even copied the code from examp ...

webglthree.js

Tips for sending a PHP JSON array to a JavaScript function using the onclick event

I am trying to pass a PHP JSON array into a JavaScript function when an onclick event occurs. Here is the structure of the PHP array before being encoded as JSON: Array ( [group_id] => 307378872724184 [cir_id] => 221 ) After encoding the a ...

javascriptphpjson

Harnessing the Power of Google Tag Script in Next.js

After researching How to load Google Tag Manager with the next/script component (Next.js 11) and reviewing this documentation page, my issue remains unresolved. I am looking to implement Google Tag on multiple websites developed using nextjs, so I created ...

javascriptnext.js