Animating a 3D object's movement using Gsap.js

Recently, I've been experimenting with modules, three.js, and gsap. I'm attempting to animate a 3D object along a path. I found a solution using "common js" that works well here: https://codepen.io/uiunicorn/pen/zYZoYpV

However, when I try to incorporate it into my project using modules, I encountered two errors:

Uncaught TypeError: Cannot read property ‘position’ of undefined
line: 163

Uncaught TypeError: setX is not a function
line: 168

Am I overlooking something? Any guidance on how to resolve these errors would be greatly appreciated. Thank you for taking the time to read this.

javascriptecmascript-6three.jsgsap

Answer №1

After seeking advice on gsap forums, it seems that the motion path plugin may not be the best fit for use with three.js. For those facing a similar issue, I wanted to share this insightful comment I received on gsap:

It appears that the MotionPathPlugin isn't optimized for three.js at the moment, but this functionality may be developed in the future.

Relying on a proxy method may not yield accurate results, as the plugin primarily focuses on 2D position and rotation.

Utilizing the tools and features already available in three.js would likely be a more effective alternative.

However, this doesn't mean that you can't still use gsap to control the animation. In this example, the tubePerc is animated using gsap to manage the movement along the path.

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

Significant Google Maps malfunction detected with API V3

Update: Issue resolved, check out my answer below. The scenario: User interacts with a map-image google maps API V3 is loaded using ajax the map is displayed in a dialog window or lightbox What's going on: The map loads and all features are funct ...

javascriptjqueryajaxgoogle-mapsgoogle-maps-api-3

Experiencing challenges with ng-repeat and the concept of 'distinct'

I'm facing a perplexing issue. When utilizing ng-repeat to iterate through my data and create checkboxes, I encounter unexpected behavior. The result is multiple duplicate items being displayed instead of unique ones. Here's an example: <lab ...

javascriptangularjscheckboxangularjs-ng-repeatangular-ui

Alter a portion of the style using jQuery

After attempting to use jQuery to change the style of a specific element, I was surprised to find that it didn't work as expected. The typical process for changing the style involves the following code: $(document).ready(function(){ $("p").css({" ...

javascripthtmljquerycss

Strategies for analyzing Authorize.net payment responses in Ionic and JavaScript

Despite numerous attempts, I am struggling to parse the response from the authorize.net payment gateway. Below is the primary response from authorize.net: "{"transactionResponse":{"responseCode":"1","authCode" ...

javascriptangularjsangularionic-framework

Effortlessly apply CSS styles to multiple cached jQuery variables without redundancy

Hey there, I've got this piece of code written in Javascript for a classic ASP page. Since there are no CSS classes defined, everything is handled within the Javascript itself. var $a= $('#a'), $v= $('#v'), $s= $('#s'), ...

javascriptjquerycss

How can you showcase individual values within a stacked bar chart on Chart.js?

Having trouble displaying values inside bars using Chart.js library for stacked bars. Currently, the values are shown above the bars, but I need them inside the bars. Here is the code snippet: https://i.sstatic.net/zEZGt.png The code displays numbers on ...

javascriptgraphchart.js

What are the steps to integrating AngularJS with ES6?

Combining AngularJS and ES6 with webpack as the building tool is my current project. I'm seeking advice on how to successfully integrate them - can anyone offer any insights or guidance? ...

javascriptangularjsecmascript-6

How to implement a modal popup in Vue.js using an anchor tag

As a newcomer to Vue.js, I'm facing an issue with creating a link in my navbar component that, when clicked, displays a modal component. I've noticed that the solutions I found are for buttons which use the data target attribute, but this isn&apo ...

javascripthtmlvue.js

Using Async/Await for Timers within a Loop in Javascript

Currently developing a "Timeblocks" style application for university. The main concept involves having a list of subtasks, each with a specified time limit. The goal is to iterate through these tasks, utilizing a timer to countdown the allocated time and t ...

javascriptasync-awaitsetinterval

I struggle to grasp the significance of the scene's positioning

I've been experimenting with some sample code using three.js, where I've created a plane and I want it to rotate around. Here's a snippet of my code: This is the setup for my camera: var camera = new THREE.PerspectiveCamera(70, window.inner ...

javascriptthree.js

When I click on the left side menu, it should automatically scroll upwards

How can I make the right side page scroll go up when clicking on the left side menu? Please assist me with this issue. https://i.sstatic.net/doamN.jpg ...

javascriptjqueryhtml

Acquire data from an HTML Element

I was provided with the following div that was already created for me: <div data-sudo-slider='{"slideCount":1, "moveCount":1, "customLink":"#slider-nav a", "continuous":true, "updateBefore":false, "effect":"sliceRevealDown", "auto":true, "speed":1 ...

javascriptjquery

Combining arrays to append to an array already in place

I have implemented the rss2json service to fetch an rss feed without pagination support. Instead of a page parameter, I can utilize the count parameter in my request. With this setup, I am successfully able to retrieve and display the feed using a service ...

javascriptarraysionic-framework

How can I display the value of a radio button that has been chosen?

Would you mind sharing how to display the selected value of a radio button? I attempted it this way, but unfortunately, it did not work. You can view my code at this link. <mat-radio-group [(ngModel)]="favoriteName"> <mat-radio-button *ngFor="l ...

javascriptangularangular-forms

How to efficiently store data using ajax and php techniques

I'm currently working on sending data via ajax for the user_question and language input fields. Can anyone help me with the correct way to include this element in the ajax JavaScript code so that I can save the table element value in my database? Tha ...

javascriptphpjqueryajax

Display additional information from a JSON file after choosing an ID with AngularJS Select

After saving a JSON file filled with information, I managed to successfully populate a select menu with the names of each element from the JSON data using this code snippet: <select ng-model="car.marca" ng-options="item.brakeId as item.name for item in ...

javascripthtmlangularjsformsmodel-view-controller

What is the reason that when a <div> click on a mobile device includes a jQuery ('#item').fadeOut() function, the CSS of the '#item' element maintains its previous hover state

While creating a mock back to top button, I encountered an issue with my jQuery call to fadeOut() behaving differently on mobile devices (this discrepancy can be observed using any desktop browser simulator). You can find the source code here: https://cod ...

javascriptjqueryhtmlcssmobile

Having trouble with Npx and npm commands not running in the VSCode terminal?

I am currently facing an issue while attempting to set up a react app in vscode using the command npx create-react-app my-app. It seems like the command is not working properly. Can anyone provide guidance on what steps I should take next? Despite watchin ...

javascriptreactjsvisual-studionext.js

What is the best way to output information to a webpage using json_encode in PHP?

I've implemented a button on my webpage that triggers a database call using ajax, so the page can dynamically display the data without requiring a refresh. Oddly, when I click the button and inspect the source and network tab, everything seems to be f ...

javascriptjqueryjsonajax

Is client-side JavaScript executed prior to server-side JavaScript in AJAX?

I'm curious about how client-side code interacts with server-side responses. I have a lengthy and complex piece of code that triggers a function which in turn executes some server-side code using a HTTPRequest Object, returning a string to the calling ...

javascriptajaxclient-sideserver-side