[Animate ‘real’ translateZ property]

this seems to work:    

var ten = {value: 0};

  gsap.to((object.translateZ(ten.value), ten), { 
duration: 0.6,  value: -10,
 onUpdate: function() {
     object.translateZ(ten.value);
      },
});   
 console.log(object.translateZ(ten.value));

 

[Animate ‘real’ translateZ property]

 

 

Hi guys so I am looking for a way to animate translateZ ( i use gsap also but doesn't have to be gsap but probably prefered as the rest of my animations use it).

**What i'm trying to do**..... 
so I am trying to have my character face the enemy character on a collision then rotate the player to the opposite rotation of the enemy so its basically facing the opposite way to the enemy character so the player can be repelled backwards when its hit from the enemy... 

**Where im up to....**
so I have managed to do it all basically and it works just fine but without animation:

```

 const dirToPlayer = this._FindPlayer();
 const controlObject = object;
       const controlObject2 = this._target;
 
 
 
      const _R = controlObject.quaternion.clone();
 
      const m = new THREE.Matrix4();
      m.lookAt(
          new THREE.Vector3(0, 0, 0),
          dirToPlayer.negate(),
          new THREE.Vector3(0, 1, 0));
      _R.setFromRotationMatrix(m);
  
      controlObject.quaternion.copy(_R);
    // console.log(dir);
               controlObject.translateZ( -10 );
 

now im not strong in three nor gsap 
so here's what i did to try and animate translateZ: 

let position = new THREE.Vector3();
object.getWorldPosition(position);   
position.add(new THREE.Vector3(0, 0, -10)); 

  gsap.to(object.position, { 
duration: 0.6,  z: position.z,
 onUpdate: function() {
 },
});   

 

the above will work but only goes along the positive z axis so sometimes it gets pushed forwards rather than back  ... 

So what i really need is to animate the TRUE translateZ property any idea's?

thanks

[Pick random color from array animate, repeat, pick a new random color from array?]

So I am using gsap and three js my aim is to animate a light 

I have an array of colors i wish to use i have code set up so 1 of these colors are picked randomly 

now i can get it to pick random colors and repeat infinity ... this is what I want .....

now when I use onCompleteAll: change, this works all good and fine BUT it doesn't animate the colors it just "jumps" to the next color when the duration is done so no animation it just changes straight away when the time is up 

so I thought Oh well easy enough to fix i will use onComplete: change, instead now this never fires tho? so what ends up happening is the colors change and animate perfectly but only 2 of the colors from the array because the change(); function never gets fired so either does the new random value 

Math.floor(Math.random() * std.length)

can anyone spot any obvious mistakes or know of any fixes?

here is my code:

 

 	var std = [new THREE.Color().setHex(0x009dff),
  new THREE.Color().setHex(0x001aff),
  new THREE.Color().setHex(0x4000ff),
  new THREE.Color().setHex(0x7300ff)];

var randomIndex, randomColor, tempColor, camlight3;

randomIndex = Math.floor(Math.random() * std.length); 
     randomColor = std[randomIndex];
     tempColor = randomColor;

// Three.js camera 
    /*  camlight3 = new THREE.PointLight(tempColor, 60, 80, 0.0);
        camlight3.power = 60;
        camlight3.position.x += 10;
	    camlight3.position.y += 25;
		camlight3.position.z -= 120;
        this._camera.add(camlight3); */


gsap.to(camlight3.color,  

{ 
     
  duration: 2,
  r: tempColor.r, g: tempColor.g, b: tempColor.b,
  onCompleteAll: change,
  yoyo: true,
  repeat: -1,
  repeatRefresh: true,
    
});

function change() {
     randomIndex = Math.floor(Math.random() * std.length); 
     randomColor = std[randomIndex];
     tempColor = randomColor;
     camlight3.color = tempColor;
     console.log(tempColor);
  }

 

thanks for any help

 

 

EDIT i should mention I have other animations doing on that use the oncomplete and onupdate if that matters non of the other though call change or are associated with the light

[onComplete never fires or the animation just breaks]

Hi so I am trying to get an on complete call back when the animation is finished but it just won't work when i do this:

   gsap.to(water.position, {

duration: 1.6,
     y: -3,                                          
  ease: Quad.easeOut,                                                                  
 onComplete:console.log('finish'),

});

 

the animation works perfectly but I never get the on complete call back ... something was telling me maybe the oncomplete and ease weren't in the right code block so I did this:

 

   gsap.to(water.position, {
  duration: 1.6,
     y: -3,

},

{                                         
  ease: Quad.easeOut,                                                                  
 onComplete:console.log('finish'),

});

 

funny enough the water moves to the position but it jumps and there isn't an animation but now i get a call back from onComplete?

the synx must be wrong but i don't know where?

 

thanks for reading

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

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

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

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

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

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

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

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

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

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