Tween Blender 3D

[Robert May]

I've been using GSAP to manipulate SVG for a while and now I would like to expand to 3D. Is it possible to use GSAP to do the operation below, if so how would I write the code. Thanks.

 

m_trans.set_translation(monkey, 0, 0, 1.5);

[GreenSock]

Since GSAP can animate literally any value(s), I'm sure we can wire something up that'd handle what you need but I'm not at all familiar with Blender. Do you have a super-simple example you can share with us in Codepen? It doesn't even really have to work, but perhaps you could set up a simple shape that can be controlled with m_trans.set_translation(...). ? 

[Dipscom]

Are you referring to Blender 3D as in: www.blender.org? If so, GSAP won't be helping you there. Scripting in Blender is done with Python, not JavaScript.

 

If you intend to export your models and use them with ThreeJS or Babylon, or similar library then, yes, you'll be able to work with GSAP.

 

How familiar are you with the world of 3D on the web?

[Robert May]

8 minutes ago, GreenSock said:

Since GSAP can animate literally any value(s), I'm sure we can wire something up that'd handle what you need but I'm not at all familiar with Blender. Do you have a super-simple example you can share with us in Codepen? It doesn't even really have to work, but perhaps you could set up a simple shape that can be controlled with m_trans.set_translation(...). ? 

Jack thanks for quick reply but it appears from Dipscom's post that it can't be done.

[GreenSock]

Yeah, I think I've seen some stuff done where things are exported out of Blender and rendered in ThreeJS. So if it's in ThreeJS or anything JavaScript-based, it should be pretty easy to animate with GSAP. 

 

If you ever wire up a simple demo, we'd be glad to take a peek and offer suggestions. Cheers!

[Dipscom]

6 minutes ago, Robert May said:

Jack thanks for quick reply but it appears from Dipscom's post that it can't be done.

 

Just to reiterate, it can't be done inside Blender. You can export your models out into a web friendly format and use GSAP to animate them.

[Robert May]

4 minutes ago, Dipscom said:

Are you referring to Blender 3D as in: www.blender.org? If so, GSAP won't be helping you there. Scripting in Blender is done with Python, not JavaScript.

 

If you intend to export your models and use them with ThreeJS or Babylon, or similar library then, yes, you'll be able to work with GSAP.

 

How familiar are you with the world of 3D on the web?

His Dipscom, yes it's blender.org along with a plugin called Blend4Web. I'm not familiar with 3D on the web at all, the small amount that I do know, I learned in the last two weeks.

 

Right now I can create a nice short animation with Blender and Bled4Web and everything works fine. I have a link in my main presentation but the user has to click a link to open the 3D HTML  in a new window.

 

What I would like to do is include the 3D in the same webpage as my main presentation and control it with the same timeline.

 

[Dipscom]

I've heard of that plugin, don't know much, though...

 

Tomorrow I'll have a look at it if I find some time and I'll report back.

 

There are certainly a few ways we can approach it, we'll just have to talk it over. 

 

Right now I'm off to bed. Bear with me and we'll work something out.

 

For now, do two me about this presentation of yours, how are you putting it right? Is it an online presentation? Or is it something like PowerPoint?

[Robert May]

Thanks and I really appreciate your help! 

 

The presentation will be viewed from a web browser online. I'll try to put together a code pen for you but I've never done one so I will probably be a little slow. :)

 

Thanks again.

[Shrug ¯\_(ツ)_/¯]

Hi @Robert May

 

I was previously not familiar with the Blend4Web option, but I would maybe suggest using this workflow:

 

Blender --> Export glTF --> Three.js --> GSAP

 

The following links and examples should provide solid insight into that workflow if you're interested.

• https://medium.com/@matthewmain/how-to-import-a-3d-blender-object-into-a-three-js-project-as-a-gltf-file-5a67290f65f2
• https://threejs.org/docs/#manual/en/introduction/Loading-3D-models
• https://threejs.org/docs/#examples/loaders/GLTFLoader
• (glTF , Three.js, Tweenmax, basic example) 

  See the Pen yPPOEg by shshaw (@shshaw) on CodePen

 

Hopefully something from those will maybe help to assist your efforts and desired goals.

 

¯\_(ツ)_/¯

 

PS: I am curiously excited to see what @Dipscom works up after some coffee(s).

[Dipscom]

This Blend4Web is a much bigger thing I thought it was. They seem to have an API and web player as well as its own library. They have an API and all sorts of things (which I did not read into yet). There might be a way to control assets from the outside.

 

I am a bit swamped today to try and write some tests so, let's stay in the theory for now.

 

Why do you need (want?) to animate elements exported using GSAP? It appears the plugin gives you the ability to bake in animations and gives you mouse/touch control from the get-go.

 

In their examples, they show how to iframe the exported assets so, you could in theory, add it to your presentation using that technique. I think your issue is more familiarity with web and this plugin over GSAP. If that's the case, I can see if I can help you iFrame your exported assets into your presentation even though it is not GSAP related. We'll move into a private chat for that, though. I'll lose brownie points if we detour the forums from GSAP related dicussions.

 

I'd follow ¯\_(ツ)_/¯ suggestion (jeez why? WHY? WHY? I can't tag you here with that username... -.-) and read over the links referred if you have any interest in learning about 3D in the web, they are very good resources.

 

Speaking of which:

 

9 hours ago, ¯\_(ツ)_/¯ said:

PS: I am curiously excited to see what @Dipscom works up after some coffee(s).

 

Zero pressure, eh?

[PointC]

1 hour ago, Dipscom said:

Zero pressure, eh?

 

[Robert May]

19 hours ago, ¯\_(ツ)_/¯ said:

Hi @Robert May

 

I was previously not familiar with the Blend4Web option, but I would maybe suggest using this workflow:

 

Blender --> Export glTF --> Three.js --> GSAP

 

The following links and examples should provide solid insight into that workflow if you're interested.

• https://medium.com/@matthewmain/how-to-import-a-3d-blender-object-into-a-three-js-project-as-a-gltf-file-5a67290f65f2
• https://threejs.org/docs/#manual/en/introduction/Loading-3D-models
• https://threejs.org/docs/#examples/loaders/GLTFLoader

• See the Pen yPPOEg by shshaw (@shshaw) on CodePen

  (glTF , Three.js, Tweenmax, basic example)

Hopefully something from those will maybe help to assist your efforts and desired goals.

 

¯\_(ツ)_/¯

 

PS: I am curiously excited to see what @Dipscom works up after some coffee(s).

Thanks for the links, I will check them out and see if I can make it work.

[Robert May]

10 hours ago, Dipscom said:

This Blend4Web is a much bigger thing I thought it was. They seem to have an API and web player as well as its own library. They have an API and all sorts of things (which I did not read into yet). There might be a way to control assets from the outside.

 

I am a bit swamped today to try and write some tests so, let's stay in the theory for now.

 

Why do you need (want?) to animate elements exported using GSAP? It appears the plugin gives you the ability to bake in animations and gives you mouse/touch control from the get-go.

 

In their examples, they show how to iframe the exported assets so, you could in theory, add it to your presentation using that technique. I think your issue is more familiarity with web and this plugin over GSAP. If that's the case, I can see if I can help you iFrame your exported assets into your presentation even though it is not GSAP related. We'll move into a private chat for that, though. I'll lose brownie points if we detour the forums from GSAP related dicussions.

 

I'd follow ¯\_(ツ)_/¯ suggestion (jeez why? WHY? WHY? I can't tag you here with that username... -.-) and read over the links referred if you have any interest in learning about 3D in the web, they are very good resources.

 

 

I can and have done the iframe option and that does work but if it can be done, I would prefer to control everything with the single GSAP timeline.

 

I'm creating basic electricity e-learning modules for GE Appliances service technicians. The module I'm working on right now is AC generators. It starts with animating a sine wave and simulating AC current on a wiring diagram... all of this is done by animating SVG. Next step is to play a simple generator animation that illustrates how the generator works.

 

Using the iframe method, the GSAP timeline has to pause, then the generator animation has to play. After it plays, the user has to click play on the GSAP timeline to continue with the main presentation. I want GSAP to control the SVG and 3d animation because it would play both seamlessly.

[Shrug ¯\_(ツ)_/¯]

48 minutes ago, Robert May said:

Next step is to play a simple generator animation that illustrates how the generator works.

 

I'm not sure if it would work in your instance without knowing or seeing the types of things you are hoping to accomplish via animation. But you could also export or create sprite sheets from your Blender model / animation and use GSAP to play through / control that however you would need. This approach may help you in certain instances with your project also.

 

¯\_(ツ)_/¯

[Dipscom]

I did a bit more reading and found some possible leads.

 

But I would say a few things first: The thing with plugins is they are brilliant to do what they are designed to do and a pain to do what they are not designed to do. I am not proffering any judgment here about blend4web at all, just mentioning the nature of plugins.

 

The other side of the story is, creating custom solutions yourself is very time consuming. It might be worth if you are going to be reusing the solution you create over and over again.

 

There are other questions as well. The blender elements, what type of animation are you thinking of using? Going down the self-built custom route, you will not be able to create the animation in Blender and reuse it out of the box, you will probably need to recreate big bits of it yourself after export.

 

Back to the blend4web. They have an API, there is a way to embbed your content without having an iFrame, they appear to have a callback for when the animation created in blender is finished. So, in theory, you could, set it something up where you create the animation in Blender, export it using the plugin, have your GSAP timeline pause when it comes to the 3D section, wait for the 3D animation to complete and continue automatically after it.

 

I really don't have the time to set something up right now, if I find some, I shall try to see if I can make it work. Otherwise, have a look at blend4web's tutorials and documentation, this is certainly more of a blend4web question/problem than it is a GSAP.