Swapping Out Models in Three.js: A Guide to Replacing Object3D Models

I'm attempting to swap out an object3D for a character model, while retaining all of its attributes like the position.

var object = new THREE.Object3D( );
object = models.character[0].clone( );
object.position.set( 100, 230, 15 );
scene.add( object.scene );

const clip = THREE.AnimationClip.findByName( object.animations, 'idle' );
var action = mixer.clipAction( clip );
action.play();

//...later on, replace the model, keeping its original position

object = models.character[1].clone( );

What is the best method to switch the model of a THREE.Object3D( )?

javascriptthree.js

Answer №1

An Object3D does not come with a model since it lacks geometry or materials. The code snippet provided is redundant as the Object3D instance is immediately replaced:

var object = new THREE.Object3D();
object = models.character[0].clone();

I suggest using a Mesh instead, which is a subclass of Object3D. If you wish to change the "model" of a Mesh, you can access its .geometry property and assign a new one:

// Original geometry
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(100, 230, 15);

// Assigning a new geometry to the Mesh
mesh.geometry = someOtherGeometry;

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

Fixing the department display list in React Hook: A step-by-step guide

{ roomDept.map((item, index) => ( <div key={index} className="flex flex-col pb-2 items-center"> <div className="flex pb-2 w-full"> <SelectPick ...

javascriptreactjsreact-hooks

Learn the process of transmitting data from middleware to components and APIs in Next.js version 13

I've been experimenting with the Next Js 13 middleware feature and I'm a bit confused about how to pass data from the middleware to components/pages/api. For example, when trying to pass payload data or determine who the currently logged-in user ...

javascriptnext.jsmiddleware

php utilizing javascript to generate encrypted data for a hidden file

Within my MVC application, I have implemented Raty for rating images. Below is the code snippet: <div class="container"> <form method="post" class='form' role='form' action="?section=photo&view=addVote"> <input t ...

javascriptphpmodel-view-controllerraty

Create queries for relays in a dynamic manner

I'm using Relay Modern for my client GraphQL interface and I am curious to know if it is possible to dynamically generate query statements within Relay Modern. For example, can I change the original query structure from: const ComponentQuery = graphq ...

javascriptreactjsgraphqlrelayjs

Exploring the differences between JavaScript destructuring and assignment

In my code, I initially used this line: const availableDays = status.availableDays; However, a suggestion was made to replace it with this line: const { availableDays } = status; Both options achieve the same result in one line of code, but I am curious ...

javascriptecmascript-6object-destructuring

Deactivate radio buttons when the table value is greater than or equal to one

On my webpage, there are radio buttons for 'Yes' and 'No'. When 'Yes' is selected, a hidden <div> appears where users can fill in fields. Upon clicking the 'Add' button, the information is displayed in a table. ...

javascriptjqueryhtml

Prevent legend strike-through on click in Vue Chart.js

Recently, I made the transition from vue 2 to vue 3 on my website and part of that process involved updating vue-chartjs and chartjs too. However, after modifying the legend text of my pie chart using the generateLabels option (as seen below), the striket ...

javascriptvue.jschart.jsvuejs3vue-chartjs

A method for assigning a single event listener to multiple events in a React component

I find myself in a situation where I have two events, onClick and onSelect, both of which share the same event handler. I am wondering what the most efficient way to handle this scenario would be - should I create a common method and then call the event ...

javascriptreactjs

Is there a way to resolve the execution order dependency of JS-CF using a server-side callback function?

Is there a way to display a form as a pop-up window, with input fields and a submit button, and then retrieve the user's selection from the session? The challenge lies in integrating JS code for the pop-up window with CF server-side code, leading to t ...

javascriptajaxcoldfusion

How can I use React to switch the visibility of a nested component from the parent container component?

Objective I am in the process of replicating a List Control Component using React and Redux, following the guidelines outlined in Google Material Design layout. This list control will enable users to create, rename, and delete items within the list witho ...

javascriptreactjsredux

The Problem of Unspecified Return Type in Vue 3 Functions Using Typescript

Here is the code snippet I am working with: <template> <div> <ul v-if="list.length !== 0"> {{ list }} </ul> </div> </template> < ...

javascripttypescriptvue.jsvuejs3

A single pledge fulfilled in two distinct ways

My code ended up with a promise that raised some questions. Is it acceptable to resolve one condition with the token string value (resolve(token)), while resolving another condition with a promise of type Promise<string>: resolve(resultPromise); con ...

javascripttypescriptpromiseresolve

Tips for resolving the "unsafe-eval" issue in Vue3 on the client-side platform

My app is built using Express, cors, and helmet. I have incorporated Vue3 on the client-side only, with the library file being self-hosted in the public folder. To add the module to the client-side, I simply include the following script: <script type=&q ...

javascriptexpressvuejs3content-security-policy

Encountering an infinite $digest() loop in AngularJS 1.4.8 while using ngOptions in a select when setting the model programmatically before the option is available in ngOptions

When upgrading from version 1.2.14 to 1.4.8, I encountered a problem that worked fine in the former but resulted in an infinite $digest() loop in the latter. To demonstrate this issue, you can view the following Fiddle. The Fiddle provides a clearer visual ...

javascriptangularjsng-optionsangularjs-ng-model

Performing a Protractor test on an Angular 5 application

We're in the process of transitioning our ui-library from AngularJS to Angular 5. I'm encountering challenges with the protractor tests. I need guidance on how to update the old AngularJS test to align it with Angular 5. If anyone has dealt wit ...

javascriptangularjsangularprotractormigrating

The type does not contain a property named `sort`

"The error message 'Property sort does not exist on type (and then shoes4men | shoes4women | shoes4kids)' pops up when attempting to use category.sort(). I find it puzzling since I can successfully work with count and add a thousand separato ...

javascripttypescriptvue.jsvuejs2

Boosted - Automated Observable with controlled Update alert

Is there a way to create a ComputedObservable in knockout that is computed from non-observable values and manually trigger the Notification? ...

javascriptknockout.jsdata-binding

Having trouble reaching the upload file in PHP

I am attempting to transfer files to a remote server using JavaScript, with PHP as the backend. The JavaScript code seems to be functioning properly, but on the PHP side, the $_FILES and $_POST arrays are empty. However, the $_SERVER array contains some da ...

javascriptphphtmlajaxupload

"AngularJS makes it easy for the logged-in user's information to be accessible and available across

I need to ensure that user information is accessible across all views after logging in. How can I adjust the code to be able to retrieve the pseudonym from another view? Could you provide an example as well? Below is my login controller: app.controller ...

javascriptangularjsangularjs-scopefirebase-realtime-databasefirebase-authentication

Delete the element that was generated using jQuery

Is there a way to add and remove an overlay element using JavaScript? I am struggling to get JavaScript to remove an element that was created with JavaScript. Any suggestions? Check out this JS Fiddle example Here is the HTML code: <div id="backgroun ...

javascriptjqueryhtmlappend