How to animate a threeJS geometry

[gisdirk]

Hi All,

 

I have just started to learn GSAP and can't get passed this problem. I tried to animate a threeJS object with GSAP but can't get it work. I suspect it has something to do with the render function or the positioning of the gsap code? Any help is very 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();

See the Pen NWXRjzY by gisdirk (@gisdirk) on CodePen

[Trapti]

Hey, Welcome to the forum!
I am not pro at GSAP with Threejs combo but someone with this knowledge will help you.
This pen might help. 

See the Pen GRooLza?editors=0010 by ste-vg (@ste-vg) on CodePen

[OSUblake]

Welcome to the forums @gisdirk

 

You can only animate properties that exist on the object you are targeting. There is no x property on a mesh.

 

console.log("mesh x", mesh.x)

 

You would need to use the object with those properties as the target, for example.
 

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

 

[gisdirk]

It works! Many thanks @OSUblake

 

I have expanded the code a bit and now I have three meshes that rotate and move in the scene. 

scene.add(mesh1, mesh2, mesh3);

gsap.from(mesh1.rotation, { duration: 8, ease: "none", x: Math.PI * 0.5 });
gsap.from(mesh1.rotation, { duration: 8, ease: "none", y: -Math.PI * 5 });
gsap.from(mesh1.position, { duration: 8, x: -20, y: -10 });

gsap.from(mesh2.rotation, { duration: 8, ease: "none", x: Math.PI * 0.5 });
gsap.from(mesh2.rotation, { duration: 8, ease: "none", y: Math.PI * 5 });
gsap.from(mesh2.position, { duration: 8, x: 20, y: -10 });

gsap.from(mesh3.rotation, { duration: 8, ease: "none", z: Math.PI * 0.5 });
gsap.from(mesh3.rotation, { duration: 8, ease: "none", x: -Math.PI * 5 });
gsap.from(mesh3.position, { duration: 8, x: 0, y: 10 });

See the Pen BaJLwOm by gisdirk (@gisdirk) on CodePen

 

Would it be possible to include those animations into a timeline but still have them to be animated at the same time? Maybe through some sort of grouping or similar...?

 

The idea is to have them to be animated first, followed by other animations as shown here in the original video.

 

[Cassie]

Sure thing! Take a look at the position parameter.

 

[gisdirk]

@Cassie thanks, works perfectly.

 

I finished the animation but ended up having too many lines of code and probably not organized in the most effective way. Any chance I can combine codes or use a nested timeline structure. I failed doing the latter so any help is appreciated. Here is the code 

  var tl = gsap.timeline();
  // 3D animation ThreeJS
	tl.from(mesh1.rotation, {
    duration: 6,
    ease: "none",
    x: Math.PI * 0.5,
    y: -Math.PI * 5 })

    .from(mesh1.position, { duration: 6, x: -20, y: -10 }, "<")
    .from(
      mesh2.rotation,
      {
      duration: 6,
      ease: "none",
      x: Math.PI * 0.5,
      y: Math.PI * 5 },
      "<")
    .from(mesh2.position, { duration: 6, x: 20, y: -10 }, "<")
    .from(
      mesh3.rotation,
      {
      duration: 6,
      ease: "none",
      z: Math.PI * 0.5,
      x: -Math.PI * 5 },
      "<")
    .from(mesh3.position, { duration: 6, x: 0, y: 10 }, "<")
// HMTL elements animation
    .to(".mainLogo", { duration: 1, opacity: 1 }, "+=1")
    .to(".sword", {duration:1, opacity: 1}, "<")
    .from(".sword", { duration: 0.3, y: -600, ease: "none" })
    .to(".flashWhite", {duration: 0.05, opacity: 1})
    .to(".flashWhite", {duration: 0.05, opacity: 0})
    .to(".flashRed", {duration: 0.05, opacity: 1})
    .to(".flashRed", {duration: 0.05, opacity: 0})
    .to(".flashWhite", {duration: 0.05, opacity: 1})
    .to(".flashWhite", {duration: 0.05, opacity: 0})
    .to(".flashRed", {duration: 0.05, opacity: 1})
    .to(".flashRed", {duration: 0.05, opacity: 0})
    .to(".flashWhite", {duration: 0.05, opacity: 1})
    .to(".flashWhite", {duration: 0.05, opacity: 0})
    .to(".flashRed", {duration: 0.05, opacity: 1})
    .to(".flashRed", {duration: 0.05, opacity: 0})
    .to(".background", {duration: 0.3, opacity: 1}, "<");

Also I failed to make a button element glow/flash using GSAP so I had to fall back on CSS keyframes which I try to avoid. 

 

#play {
  position:absolute;
  top: 50vh;
  left:44vw;
  background-color: rgb(32, 32, 32);
  color: #FFD700;
  font-family: 'VT323', monospace;
  font-size: 35px;
  z-index:10;
}

#play {
  animation: glowing 1300ms infinite;
}

 @keyframes glowing {
  0% {
    box-shadow: 0 0 5px #FFD700;
  }
  50% {
    box-shadow: 0 0 20px #FFD700;
  }
  100% {
    box-shadow: 0 0 5px #FFD700;
  }
}

See the Pen eYydxwa by gisdirk (@gisdirk) on CodePen

 

Thanks in advance

[Cassie]

this may be what you need