Unable to manipulate imported objects in three.js, anime.js, and gltfloader - troubleshooting in progress

UPDATE: I have created a new demo to provide more clarity on the issue. This demonstration combines two existing fiddles that exhibit the same problem.

Desired outcome: My goal is for the imported object to be accessible in the same manner as 'cube' is.

Take a look at this scroll animation demo.

Observe how 'cube' is referenced in cube.position within the timeline:

timeline.add({
    targets: cube.position,
    x: 100,
    y: 25,
    z: -50,
    duration: 2250,
    update: camera.updateProjectionMatrix()
})

Here is an object demonstration. It functions as expected.

Now, let's take a look at my combined demo.

In my combined demo, when attempting to replace cube.position with mesh.position in the timeline, it results in an undefined error.

Similar question on three.js forum

javascriptthree.jsgltfanime.js

Answer №1

I achieved my goal through the following steps:

1) Implementing a custom addMesh function and executing it within initThree()

2) Defining a mesh variable as gltf.scene.children

3) Creating a meshGroup based on the mesh variable

4) Incorporating meshGroup into the anime.js timeline for animation effects

     timeline.add({
    targets: meshGroup.position,
    x: 100,
    y: 25,
    z: -50,
    duration: 2250,
    update: camera.updateProjectionMatrix()
  })

You can see the result here.

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

The JavaScript function may fail to work if the AJAX request is not completed

Upon completion of my ajax request, my function does not seem to be functioning as expected. Here is the script I am using: <script> function sendmsg(id,msg){ alert('id is'+id+'and msg is '+msg); } <scr ...

javascriptjqueryhtmlajax

What are the methods to determine if vue-router is being utilized within the present Vue instance?

I am working on creating a library that includes a vue.js component with navigation elements. The goal is for this component to be flexible, able to function both with and without vue router. When used with the router, it will utilize <router-link> ...

javascriptvue.jsvue-componentvue-routervue-sfc

The slicing of jQuery parent elements

Hey there! I recently created a simulated "Load More" feature for certain elements within divs. However, I've encountered an issue where clicking on the Load More button causes all elements in both my first and second containers to load simultaneously ...

javascriptjquerycssjquery-selectors

What is the best way to retrieve a specific value from a JSON file using a numerical identifier?

Imagine a scenario where there is a JSON file structured like this: { "data": [ { "id": "1", "name": "name1" }, { "id": "2", "name": "name2" } ] } If you know the ...

javascriptjson

Is my Javascript experiencing a shortage of asyncIds? (Encountered RangeError in inspector_async_hook.js)

One issue that I frequently encounter while using async/await is the following error: RangeError: Value undefined out of range for undefined options property undefined at Set.add (<anonymous>) at AsyncHook.init (internal/inspector_async_hook ...

javascripttypescriptasynchronouspromiseasync-await

Unexpected absence of Aria tags noticed

I've been working on integrating ngAria into my project. I have injected it into my module and created the following HTML: First Name: <input role="textbox" type="text" ng-model="firstName" aria-label="First Name" required><br> Employee: ...

javascriptangularjswai-aria

Utilizing ng-model with invisible input field

UPDATED: Experimenting with a new approach: <input class="form-check-input deflog-check" type="checkbox" ngTrueValue = "1" ngFalseValue = "0" ng-value="chk_mail"> Now trying to retrieve the value in AngularJS like so: object2Edit.notification = N ...

javascriptangularjs

Passing a leading zero function as an argument in JavaScript

Is there a method for JavaScript to interpret leading zeros as arguments (with the primitive value as number)? I currently have this code: let noLeadingZero = (number) => { return number } console.log('noLeadingZero(00):', noLeadin ...

javascriptleading-zero

linking a div within a navigation bar

I have implemented a template from bootstrap. Here is the navigation bar where you can find the about section. Inside it, there is a bootstrap button: <button type="button" class="btn btn-light">Light</button> When I click on this button, the ...

javascripthtmlcssbootstrap-4

Click event recursion occurs due to the use of $.post

I have a collection of product rows available for customers to select from. Each row is designated with the class "product-line". Upon clicking on a row, I aim to visually indicate its selection status by toggling the "product-checked" class, and subsequen ...

javascriptjqueryajax

Creating arrays in JavaScript with or without the use of jQuery

In my JavaScript script, I am defining this array: var status=[ { "name":"name1", "level":0 }, { "name":"name2", "level":0 }, { "name":"name3", "level":0 }, { "name":" ...

javascriptarrays

The lightbox fails to display in IE when a synchronous ajax request is triggered

I have a piece of code that displays a lightbox with the message 'Please Wait', followed by a synchronous ajax request that removes the lightbox once it's completed. This setup works perfectly in most browsers, but in Internet Explorer, the ...

javascriptjqueryajaxinternet-explorer

How to maintain the focus within a jQuery dialog box

Exploring the world of jQuery dialog, I'm eager to incorporate it into my latest side project. My goal is to enhance accessibility by adding tabindex to the divs within the dialog for easy tab navigation. However, I encountered an issue where the focu ...

javascriptjqueryjquery-ui

Using jQuery.ajax to manage caching and manipulating timestamps

Currently, I am utilizing the jquery.ajax techniques to transmit GET-requests to the server, with caching disabled by setting cache to false. Everything seems to be working fine so far. It appears that jQuery automatically includes a timestamp (likely epo ...

javascriptjqueryajaxcaching

socket.io - verify if a user is located in a particular chatroom

I am trying to determine if a client is subscribed to a specific room. I have an array where sockets are saved with usernames as indexes. I have an if statement, but it doesn't seem to be working: if(io.sockets.manager.rooms['/' + data.to]. ...

javascriptsocketssocket.iosocket.io-1.0

Choose several identifiers that possess strikingly similar titles

I am dealing with a form that is dynamically generated by a third-party provider and unfortunately I am unable to modify it... However, I am looking for a solution to select all IDs that begin with the same string, such as: easi_fielddiv_LastName, easi_fi ...

javascriptjqueryhtml

IE Compatibility with CSS 3 Text Shadow

Currently, I am implementing a CSS 3 text shadow to mimic a bevel and emboss effect on my web application. Unfortunately, when viewed on IE 10, the shadow appears distorted which is quite frustrating. I have not yet tested it on IE 9. Is there a solution t ...

javascriptinternet-explorercssweb

Ways to implement shader on a THREE.Object3D that has been loaded using OBJMTLLoader

After loading a model with THREE.OBJMTLLoader, I want to add a vertex and fragment shader to it. var loader = new THREE.OBJMTLLoader(); loader.addEventListener('load', function(event) { var mesh = event.content; scene.add(mesh); }); load ...

javascriptthree.jswebglshader

Challenges with browsing navigation in Selenium WebDriver

Recently, I began my journey of learning selenium WebDriver. In an attempt to automate the task of logging into an account using the Firefox browser, I encountered a discrepancy. Manually opening the browser and clicking on the login link from the homepag ...

javascriptjavaseleniumselenium-webdriverautomated-tests

jQuery tabs with carousel navigation

I am looking to enhance my jQuery tabs with a prev/next navigation in the form of a carousel. However, I am unsure of how to go about implementing this feature. Here is a snippet of my current code: Javascript <script type="text/javascript> ...

javascriptjqueryhtmljquery-ui-tabs