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

[UI UNICORN 0 Likes (Newbie)]

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

[OSUblake 18,475 Likes (Superhero)]

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.

 

 

 

[UI UNICORN 0 Likes (Newbie)]

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.

 

 

 

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

[OSUblake 18,475 Likes (Superhero)]

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
  }
});

 

 

[UI UNICORN 0 Likes (Newbie)]

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

[OSUblake 18,475 Likes (Superhero)]

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";

 

[OSUblake 18,475 Likes (Superhero)]

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.

[UI UNICORN 0 Likes (Newbie)]

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

[UI UNICORN 0 Likes (Newbie)]

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

[OSUblake 18,475 Likes (Superhero)]

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