Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
UI UNICORN

Motion paths and 3d objects - gsap.js and three.js

Recommended Posts

So i would like to animate this model along a path: 

https://codepen.io/uiunicorn/pen/abJmVwo

 

but it doesn't seem to work and i am getting this in console:

 

Uncaught TypeError: Cannot assign to read only property 'rotation' of object '#<Group>'
    at Plugin._setterPlain [as rSet] (gsap-core.js:3367)
    at PropTween.render [as r] (MotionPathPlugin.js:301)
    at Tween.render (gsap-core.js:3163)
    at _lazyRender (gsap-core.js:187)
    at _lazySafeRender (gsap-core.js:193)
    at Array.updateRoot (gsap-core.js:2564)
    at _tick (gsap-core.js:1252)

 

and ideas of what the problem is? here is the original pen that works: (my pen uses modules): 

See the Pen zYZoYpV by uiunicorn (@uiunicorn) on CodePen

See the Pen abJmVwo by uiunicorn (@uiunicorn) on CodePen

Link to comment
Share on other sites

Hard to say as you have a lot of code in there and I'm seeing lots of errors with setX. Try to fix that first.

 

image.png

 

 

Link to comment
Share on other sites

11 minutes ago, OSUblake said:

Hard to say as you have a lot of code in there and I'm seeing lots of errors with setX. Try to fix that first.

 

image.png

 

 

Updated post now the pen should only contain the gsap error in console

Link to comment
Share on other sites

And it's probably best to go through this thread and understand what is going on. 

 

It's animating a <div>, and then applying those changes to a three.js object. It is not animating the three.js object directly.

 

var proxy = document.createElement("div");

gsap.to(proxy, {
  duration: 10, 
  repeat: -1,
   ease: "none",
  motionPath: { 
    path, // equivalent to path: path
    autoRotate: true,
    useRadians: true
  },
  onUpdate: updateMesh
});

 

Have you tried just animating your object directly?

 

gsap.to(someThreeObject.position, {
  duration: 10, 
  repeat: -1,
   ease: "none",
  motionPath: { 
    path
  }
});

 

 

  • Like 1
Link to comment
Share on other sites

18 minutes ago, OSUblake said:

And it's probably best to go through this thread and understand what is going on. 

 

It's animating a <div>, and then applying those changes to a three.js object. It is not animating the three.js object directly.

 


var proxy = document.createElement("div");

gsap.to(proxy, {
  duration: 10, 
  repeat: -1,
   ease: "none",
  motionPath: { 
    path, // equivalent to path: path
    autoRotate: true,
    useRadians: true
  },
  onUpdate: updateMesh
});

 

Have you tried just animating your object directly?

 


gsap.to(someThreeObject.position, {
  duration: 10, 
  repeat: -1,
   ease: "none",
  motionPath: { 
    path
  }
});

 

 

i tried:

 

gsap.to(model5.position, {
  duration: 10, 
  repeat: -1,
  ease:Linear.easeNone,
  motionPath: { 
    path, // equivalent to path: path
    autoRotate: true,
    useRadians: true
  },
  onUpdate: updateMesh
});

 

seems i forgot .position now i have no errors but! now my model is gone lol pen: 

See the Pen eYvBpaq by uiunicorn (@uiunicorn) on CodePen

Link to comment
Share on other sites

The onUpdate is for the div, and autoRotate won't work because rotation is another property. Still doesn't look right 🤷‍♂️

 

 

gsap.to(model5.position, {
  duration: 10, 
  repeat: -1,
  ease:"none",
  motionPath: { 
    path, // equivalent to path: path
    // autoRotate: true,
    // useRadians: true
  },
  // onUpdate: updateMesh
});

 

The motion path plugin really doesn't work with 3d paths all that well.

 

You also don't need to import all those eases and TweenLite/Max TimelineLite/Max stuff.

import { gsap } from "https://ui-unicorn.co.uk/game-lesson-1/esm/gsap-core.js";
import { MotionPathPlugin } from "https://ui-unicorn.co.uk/game-lesson-1/esm/MotionPathPlugin.js";

 

Link to comment
Share on other sites

4 minutes ago, OSUblake said:

You also don't need to import all those eases and TweenLite/Max TimelineLite/Max stuff.


import { gsap } from "https://ui-unicorn.co.uk/game-lesson-1/esm/gsap-core.js";
import { MotionPathPlugin } from "https://ui-unicorn.co.uk/game-lesson-1/esm/MotionPathPlugin.js";

 

 

gsap-core.js doesn't include the CSSPlugin, so of course the proxy div wouldn't work correctly. You should be importing the index file.

Link to comment
Share on other sites

6 minutes ago, OSUblake said:

The onUpdate is for the div, and autoRotate won't work because rotation is another property. Still doesn't look right 🤷‍♂️

 

 


gsap.to(model5.position, {
  duration: 10, 
  repeat: -1,
  ease:"none",
  motionPath: { 
    path, // equivalent to path: path
    // autoRotate: true,
    // useRadians: true
  },
  // onUpdate: updateMesh
});

 

The motion path plugin really doesn't work with 3d paths all that well.

 

You also don't need to import all those eases and TweenLite/Max TimelineLite/Max stuff.


import { gsap } from "https://ui-unicorn.co.uk/game-lesson-1/esm/gsap-core.js";
import { MotionPathPlugin } from "https://ui-unicorn.co.uk/game-lesson-1/esm/MotionPathPlugin.js";

 

Here's what i have now as you can see the model kinda floats up and down on Y and the auto rotate is completed screwed: 

 

See the Pen ZEeBQGz by uiunicorn (@uiunicorn) on CodePen

Link to comment
Share on other sites

17 hours ago, OSUblake said:

 

gsap-core.js doesn't include the CSSPlugin, so of course the proxy div wouldn't work correctly. You should be importing the index file.

i've installed that plugin doesn't seem to change anything

https://codepen.io/uiunicorn/pen/ZEeBQGz

Link to comment
Share on other sites

The MotionPathPlugin isn't really designed to work with three.js at the moment. That might come at later date.

 

Using that proxy method just isn't going to be accurate because the plugin really only handles position and rotation in 2d.

 

Using constructs that three.js already provides would be a much better option.

https://observablehq.com/@rveciana/three-js-object-moving-object-along-path

 

That doesn't mean you can't control it with gsap. Like here, the tubePerc is being animated with gsap, which controls the movement along the path.

 

See the Pen WNQYJyM by motionharvest (@motionharvest) on CodePen

 

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×