3D animation

[MstudioIL]

I need to create animation like on this site https://sketch.london/

it is done with your plugin?

Can someone explain how I can do it?

(hope it is the right forum, it is my first topic) 

[tomek.szalda]

Hi,

 

The 3d scene is built with Threejs library (https://threejs.org) and Tweenmax is used to animate this 3d models.

[MstudioIL]

Thanks, I have checked the Threejs library, but have no idea what example to use.

I could use some simple example to learn from.

Also I checked the Tweenmax, and believe I need some kind of licence, how do I know what kind I need?

 

[PointC]

In many cases you won't need any special license, but It depends on what you'll be creating and how it will be used.

 

Here's some detailed info:

https://greensock.com/licensing

 

Happy tweening.

 

[mikel]

Hi @MstudioIL,

 

Welcome to the GreenSock Forum.

 

This website is fantastic. Fine art of web concept and coding - fits perfectly with the SKETCH.

 

Or with the words of the Michelin Guide: Full of color, energy and vitality. The sophisticated site is ambitious and elaborate in conception and execution. Each page and content element arrives artfully presented.

 

A real challenge to code that ...

 

Kind regards

Mikel

 

 

[MstudioIL]

15 hours ago, mikel said:

Hi @MstudioIL,

 

Welcome to the GreenSock Forum.

 

 

Thank you.

I trying to learn how to do what is in the site I posted, I can understand it from code if I had example, I do not see the code on the example. 

[mikel]

Hi @MstudioIL,

 

There are quite a few good examples on three.js .   (... view source)

 

Happy experimenting ...

Mikel

 

 

[MstudioIL]

Thank you, I found this.

Now I trying to load more objects

I found this https://threejs.org/examples/#webgl_multiple_elements

I do not need so many and they do not have image instead of color

[MstudioIL]

Thanks for help, I manage to create the objects, make them move and link them, now I need to make the carousel (if it is the right word for this).

How I  enable the Tweenmax?

And adding the text?

[mikel]

Hi @MstudioIL,

 

Just try it. If you have specific questions about the use of GSAP, show us a CodePen with your case (reduced).

 

Here is a suggestion of a dynamic pathDataToBezier (maybe helpful):

 

See the Pen gyYWEe by mikeK (@mikeK) on CodePen

 

Best regards

Mikel

 

 

[MstudioIL]

Thanks, I will try it.

Can I post link to want I trying to do? 

(I do not know CodePen)

Can I download and edit the CodePen?

 

I trying to use the example but I need MorphSVGPlugin, I must use it?

Can I create the action without it?

Here is example of what I did so far

http://mstudio.co.il/spin/index4.html

[mikel]

Hi @MstudioIL,

 

Unfortunately, I'm not an expert on Threejs.
Maybe this pen will help you to code the rotation

 

See the Pen yqowk by bartuc (@bartuc) on CodePen

 

Kind regards

Mikel

 

 

[MstudioIL]

Thanks, any help is good.

The only problem stays is with the text

[mikel]

Hi @MstudioIL

 

The magic word is called raycaster.
Maybe this pen will help you

 

See the Pen axxZoz by mikeK (@mikeK) on CodePen

 

and this tutorial.

 

Kind regards

Mikel

 

 

[MstudioIL]

Great, I will check it.

For now this is what I manage to have

http://mstudio.co.il/spin/rotate.html

[MstudioIL]

I think I got most of what I need, how can I add what I did to WordPress page?

I needed it one page (homepage)

[mikel]

Hi @MstudioIL,

 

For wordpress questions please visit appropriate forums, which can help you better.

 

If you get stuck on any GSAP related parts of the project, we're happy to help.

 

Kind regards

Mikel

 

 

[MstudioIL]

Thanks, do you know about forum that can help me?

[mikel]

 

 

https://wordpress.org/support/forums/

[MstudioIL]

Thanks

[MstudioIL]

I manage to add it to the site using JavaScript.

Now I checking to disable the mouse wheel  zoom

[mikel]

Hi @MstudioIL,

 

Please use our forum on any GSAP related parts of your project.

 

For general js topics try e.g. www.w3schools.com.

To remove an eventlistener see this example.

 

Kind regards

Mikel

 

 

[daveo]

Mikel, you have the patience of a saint!