How to animate a threeJS object using GSAP?

Questions
,
1

I have been learning threeJS just recently and can’t get passed a problem. I tried to animate a extruded triangle using the GSAP library. It is just a simple animation to have the triangle move to the right but it seems I did something wrong. Any help is much appreciated.

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Create Triangles

var material = new THREE.MeshPhongMaterial({
  color: 0xf6c12a,
  shininess: 70
});

var shape = new THREE.Shape();
shape.moveTo(0, 0);
shape.lineTo(2, 3);
shape.lineTo(4, 0);
shape.lineTo(0, 0);

var extrudeSettings = {
  steps: 5,
  depth: 1,
  bevelEnabled: true,
  bevelThickness: 0.3,
  bevelSize: 0.5,
  bevelOffset: 0,
  bevelSegments: 1
};

var geometry = new THREE.ExtrudeBufferGeometry(shape, extrudeSettings);

// Sets the origin to the center of geometry for rotation
geometry.center();

var mesh = new THREE.Mesh(geometry, material);

mesh.position.x = 0;
mesh.position.y = 0;
mesh.position.z = -5;
mesh.scale.set(1.5, 1.5, 1.5);

scene.add(mesh);

gsap.to(mesh, { duration: 2, x: 300 });

camera.position.z = 5;

// Background
var geometry = new THREE.PlaneGeometry(1000, 1000, 1);
var material = new THREE.MeshPhysicalMaterial({ color: 0x444444 });
var plane = new THREE.Mesh(geometry, material);
plane.position.z = -50;
scene.add(plane);

// Lighting
var ambientLight = new THREE.AmbientLight(0xffffff, 0.55);
scene.add(ambientLight);

var pointLight1 = new THREE.PointLight(0xf9eac8, 1, 100);
pointLight1.position.set(5, 10, 0);
pointLight1.castShadow = true;
pointLight1.shadow.camera.top = 20;
scene.add(pointLight1);

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();

Codepen

2

Try it like so: Edit fiddle - JSFiddle - Code Playground

You have to use mesh.position instead of mesh. So:

gsap.to(mesh.position, { duration: 2, x: 300 });
3

/cc

If you ask the same question at other places, please share respective links in your topics. If I had seen that someone else had already answered your question at stackoverflow, I could have saved myself quite a bit of time writing a redundant answer!

4

Apologies @Mugen87

Your answer was still helpful and I could make it run now. Thanks.