"Integrating Cannon.js Body into Three.js Mesh results in a Vec3 error when interacting with groups and multiple shapes

I have successfully created a group consisting of 2 meshes in Three.js and a Body containing 2 Shapes in Cannon. Everything looks good individually, but when I attempt to apply physics by copying the Body position to the meshes, the code breaks. Nothing is displayed on the screen, and upon checking the positions, everything seems fine for the Body, but the mesh shows up as undefined.

(Eventually, the goal is to replace the mesh with the model)

Any help would be greatly appreciated. Here is the relevant code:

import './style.css'
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
import * as dat from 'lil-gui'

import * as CANNON from 'cannon-es'

// More code here...
javascriptthree.jscannon.js

Answer №1

// How can we access the attributes of boxBody?
gun.position.copy(boxBody.position);
gun.quaternion.copy(boxBody.quaternion);
console.log(gun.position.x)

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

Show two line graphs with data that commence at separate intervals

Is it possible to create a line graph using two data sets with shared labels, where one dataset is smaller than the other? For example: label1: ['8-20', '8-21', '8-22', '8-23'] data1: [100, 120, 150, 170, 150] lab ...

javascriptjquerychart.js

Tips for adjusting the button icon size based on the size of the page

I need some assistance with resizing an icon in my HTML page that is inside a container with a transparent button. This is how the div is declared in my HTML file: <div class="container button"> <div class="col-xs-10 col-sm-70"> & ...

javascripthtmlcssbootstrap-4

Loading FBX files with Textures in Three.js

After obtaining a fbx file with textures from this link, I attempted to open it using three.js: var loader = new THREE.FBXLoader(); loader.load('models/fbx/myfile.fbx', function(object) { scene.add(object); }, (ev) => { console.log(e ...

javascriptthree.js

Merge the inverse property and inverse class selector with the current selector for enhanced specificity

I was looking at this jQuery code snippet: $("#Filter ul input:checked").each(function () { if (!$(this).prop("disabled") && !$(this).hasClass("ignoreInput")) { Is there a way to simplify this into just one selector? It seems like I'm ha ...

javascriptjquerytypescript

JavaScript loop to process form submissions

Running a for loop through data retrieved from the Facebook API, my goal is to store this data in my own database for use on other websites. The issue arises during the submission process, as it seems I can only submit once. The culprit appears to be the ...

javascriptphpformsloopssubmit

Encountering an issue while attempting to retrieve information from Vuex store

I recently encountered an issue while trying to store my water data in Vuex. I followed the implementation below, but when I attempted to access my data array, it did not show up as expected. const store = new Vuex.Store({ state: { categories: ...

javascriptvue.jsvuexvuex4

Transferring information between a pair of input fields using ngModel

There are two input fields named input1 and input2. An event has been created where anything typed in input1 is displayed in input2. However, if something is manually changed or typed into input2, the event should not trigger. I think I may need to use a ...

javascriptangular

Error: PHP is showing an undefined index error when trying to decode JSON, even though the value

I am feeling quite puzzled. I transferred a key value pair object from jQuery to PHP and successfully alerted it back out. However, when I visit the PHP page, it indicates that the data is either null or an undefined index. Here is my jQuery code: $(&ap ...

javascriptphpjqueryjsonajax

The Angular User Interface Router is a versatile tool for managing

Managing a large application with over 1500 pages can be challenging. I have opted to use angular UI Router for routing. I am interested in learning about the best practices for handling routing in such a vast application. Should I define all routes in ...

javascriptangularjs

Enhancing Three.js interaction with the DOM (using linkify.js)

Having trouble making the click event work and linking a sphere with a URL using the latest version of three.js. Here is my code: // Code snippet will be here Any help or suggestions would be greatly appreciated. I'm still new to this! ...

javascriptthree.js

The jQuery equivalent for selecting the progress bar value in Webkit would be `$('progress

I'm looking to adjust the transition time for an HTML5 <progress> bar using JavaScript (jQuery), but I've been struggling to find the correct selector in jQuery to achieve this. Here are my current attempts: CSS: progress::-webkit-progre ...

javascriptjqueryselectorcss-transitionsprogress

flylatex is struggling to locate some modules

When I try to run flylatex from github on Debian and Ubuntu, I encounter the following Error. I'm not sure if there's an issue with my nodejs setup or if flylatex itself has an error. To troubleshoot, I initially ran npm install -d in the working ...

javascriptnode.js

Attempting to gather elements and save them in an array by utilizing jQuery

My HTML structure looks like this: <tr> <td>NC</td> <td><%= @subscriptions.where("users.ranking = 'NC'").count %></td> <td><input type="checkbox" name="my-checkbox" class="checkbox-ranking ...

javascriptjqueryhtml

Ionic 2's NavParams Feature

I've been attempting to transfer a specific data from one page to another using NavParams, however, I'm consistently receiving an 'undefined' result in the console. I'm struggling to identify what the issue might be. Here is the sn ...

javascriptangularionic2navparams

Issue with Laravel Jetstream + Inertia: Flash message not showing up after redirecting to the same page

I'm currently facing a problem with displaying flash messages in my Laravel Jetstream application using Inertia.js. Below is the relevant code snippet: In AppLayout.vue <script setup> import { usePage } from "@inertiajs/vue3"; import F ...

javascriptlaravelvue.jsinertiajslaravel-jetstream

What causes my input field to lose focus in React.js after typing just one character?

My react.js component is experiencing an issue where the input field loses focus whenever a character is typed. To continue typing or editing, I have to click on the input field again. What could be causing this problem? Below is the code snippet in quest ...

javascriptreactjsdom-events

Storage Options for Keeping Data Locally: Local Storage and Session

Here is the HTML code snippet I'm working with: <h2>Welcome User!!!</h2> <form class="container" action="/product"> <div> <label for="mail"><b>Email ID: [(ngModel)]</b> ...

javascripthtmlcssangularlocal-storage

What are some strategies for handling analytics tracking in Flux architecture?

Imagine I'm working on a cutting-edge single page application similar to Airbnb. One essential aspect of such an application is keeping track of when someone signs up for an account. There are numerous services available to assist with tracking, incl ...

javascriptreactjsreduxanalyticsreactjs-flux

excessive load on Array parameter

As a fervent Python enthusiast, I have a strong distaste for JavaScript's lack of elegance. Fortunately, I have found a solution to adapt it to my liking. import { createApp } from 'vue' import App from './App.vue' var array_len_ ...

javascriptarraysvue.jsprototype

The script file (.js) isn't showing up on the PHP or HTML webpage

Experiencing a peculiar issue and seeking advice on alternative solutions due to my limited experience in this matter. The Issue: I currently have the following script running smoothly: <script type="text/javascript" id="myscript" src="http://piclau ...

javascriptphpjqueryhtmlangularjs