Three.js properties

[martis 30 Likes (Newbie)]

Hey guys,

 

Sure this has been answered but I am having trouble finding an answer.

 

Working with Three.js and want to condense my tweening.

 

I remember reading about a new way to tween values of properties in one tween.

 

This... 

 

TweenMax.from(sprite.position, 5, {z:40})

 

 

versus...

 

TweenMax.from(sprite, 5, {position:{z:40}})

 

[martis 30 Likes (Newbie)]

Figured it out... attr:{ }

 

Err nm this doesn't work for what I am trying to do

[Carl 9,066 Likes (Superhero)]

Sorry, it's a bit unclear what you are referring to or trying to do.

The first code snippet is valid, the second would only work if there was a position plugin that could parse objects.

 

 

 

[martis 30 Likes (Newbie)]

Hi Carl,

 

I am trying to avoid having to write a line of code for each property....

 

TweenMax.from(sprite.position, 5, {z:40});
TweenMax.from(sprite.scale, 5, {y:2});

 

and write it in one line...

 

[GreenSock 8,117 Likes (Superhero)]

I just whipped together a quick plugin for you that should help: 

var _gsScope = (typeof module !== "undefined" && module.exports && typeof global !== "undefined") ? global : this || window;
(_gsScope._gsQueue || (_gsScope._gsQueue = [])).push(function () {
    "use strict";
    var _xyzContexts = "position,scale,rotation".split(","),
        _contexts = {x:"position", y:"position", z:"position"},
        _DEG2RAD = Math.PI / 180,
        _degreesToRadians = function(value) {
            return (typeof(value) === "string" && value.charAt(1) === "=") ? value.substr(0, 2) + (parseFloat(value.substr(2)) * _DEG2RAD) : value * _DEG2RAD;
        }, i, p;
    for (i = 0; i < _xyzContexts.length; i++) {
        p = _xyzContexts[i];
        _contexts[p + "X"] = p;
        _contexts[p + "Y"] = p;
        _contexts[p + "Z"] = p;
    }
    var ThreePlugin = _gsScope._gsDefine.plugin({
        propName: "three",
        priority: 0,
        API: 2,
        version: "0.0.1",
        init: function (target, values, tween, index) {
            var context, axis, value, p, i, m;
            for (p in values) {
                context = _contexts[p];
                value = values[p];
                if (typeof(value) === "function") {
                    value = value(index || 0, target);
                }
                if (context) {
                    i = p.charAt(p.length-1).toLowerCase();
                    axis = (i.indexOf("x") !== -1) ? "x" : (i.indexOf("z") !== -1) ? "z" : "y";
                    this._addTween(target[context], axis, target[context][axis], (p.indexOf("rotation") !== -1) ? _degreesToRadians(value) : value, p);
                } else if (p === "scale") {
                    this._addTween(target[p], "x", target[p].x, value, p + "X");
                    this._addTween(target[p], "y", target[p].y, value, p + "Y");
                    this._addTween(target[p], "z", target[p].z, value, p + "Z");
                } else if (p === "opacity") {
                    m = (target.material.length) ? target.material : [target.material];
                    i = m.length;
                    while (--i > -1) {
                        m[i].transparent = true;
                        this._addTween(m[i], p, m[i][p], value, p);
                    }
                } else {
                    this._addTween(target, p, target[p], value, p);
                }
                this._overwriteProps.push(p);
            }
            return true;
        }
    });

}); if (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); }

 

Just load that once and then you'll be able to put everything in a "three:{}" object, like:

 

TweenMax.to(sprite, 2, {three:{scaleX:2, scaleY:1.5, x:200, y:100, opacity: 0.5}, ease:Power2.easeInOut});

 

I haven't done a ton of testing, but it should support: 

• x, y, z (like position.x, position.y, position.z)
• scaleX, scaleY, scaleZ, or just "scale" to do all 3 at once (like scale.x, scale.y, scale.z)
• rotationX, rotationY, rotationZ (like rotation.x, rotation.y, rotation.z) - IMPORTANT: as a convenience, you define them in degrees, not radians!
• opacity
• supports function-based values. 

Is that what you're looking for? 

[PointC 8,599 Likes (Superhero)]

@GreenSock You're sure 'whipping together' a lot of plugins today. 

[Carl 9,066 Likes (Superhero)]

It's Plugin Plursday!

 

hmm... maybe not.

 

 

[martis 30 Likes (Newbie)]

Wow, thanks Jack! So far so good, will let you know if I run into any hiccups!

 

 

[martis 30 Likes (Newbie)]

Is there anyway you could add in .visible to this?

[GreenSock 8,117 Likes (Superhero)]

Hm, that's a little tricky in Three.js, but I think this'll do it: 

var _gsScope = (typeof module !== "undefined" && module.exports && typeof global !== "undefined") ? global : this || window;
(_gsScope._gsQueue || (_gsScope._gsQueue = [])).push(function () {
    "use strict";
    var _xyzContexts = "position,scale,rotation".split(","),
        _contexts = {x:"position", y:"position", z:"position"},
        _DEG2RAD = Math.PI / 180,
        _visibleSetter = function(target, start, end) {
            var time = end ? 0 : 0.999999999;
            return function(ratio) {
                var value = (ratio > time) ? end : start;
                if (target.visible !== value) {
                    target.visible = value;
                    target.traverse(function (child) {
                        child.visible = value;
                    });
                }
            };
        },
        _addFuncPropTween = function(tween, func) {
            var proxy = {setRatio: func},
                backward = !!tween.vars.runBackwards,
                pt = {_next:tween._firstPT, t:proxy, p:"setRatio", s:backward ? 1 : 0, f:1, pg:0, n:"setRatio", m:0, pr:0, c:backward ? 0 : 1};
            tween._firstPT = pt;
            if (pt._next) {
                pt._next._prev = pt;
            }
            return pt;
        },
        _degreesToRadians = function(value) {
            return (typeof(value) === "string" && value.charAt(1) === "=") ? value.substr(0, 2) + (parseFloat(value.substr(2)) * _DEG2RAD) : value * _DEG2RAD;
        }, i, p;
    for (i = 0; i < _xyzContexts.length; i++) {
        p = _xyzContexts[i];
        _contexts[p + "X"] = p;
        _contexts[p + "Y"] = p;
        _contexts[p + "Z"] = p;
    }
    var ThreePlugin = _gsScope._gsDefine.plugin({
        propName: "three",
        priority: 0,
        API: 2,
        version: "0.0.2",
        init: function (target, values, tween, index) {
            var context, axis, value, p, i, m;
            for (p in values) {
                context = _contexts[p];
                value = values[p];
                if (typeof(value) === "function") {
                    value = value(index || 0, target);
                }
                if (context) {
                    i = p.charAt(p.length-1).toLowerCase();
                    axis = (i.indexOf("x") !== -1) ? "x" : (i.indexOf("z") !== -1) ? "z" : "y";
                    this._addTween(target[context], axis, target[context][axis], (p.indexOf("rotation") !== -1) ? _degreesToRadians(value) : value, p);
                } else if (p === "scale") {
                    this._addTween(target[p], "x", target[p].x, value, p + "X");
                    this._addTween(target[p], "y", target[p].y, value, p + "Y");
                    this._addTween(target[p], "z", target[p].z, value, p + "Z");
                } else if (p === "opacity") {
                    m = (target.material.length) ? target.material : [target.material];
                    i = m.length;
                    while (--i > -1) {
                        m[i].transparent = true;
                        this._addTween(m[i], p, m[i][p], value, p);
                    }
                } else if (p === "visible") {
                    if (target.visible !== value) {
                        _addFuncPropTween(tween, _visibleSetter(target, target.visible, value));
                    }
                } else {
                    this._addTween(target, p, target[p], value, p);
                }
                this._overwriteProps.push(p);
            }
            return true;
        }
    });

}); if (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); }

 

Does that work for you? 

[Dipscom 2,815 Likes (Superhero)]

How did I not come across this before?!?!?

 

Must set aside time to deconstruct this plugin and understand it.

 

MIGHTY CODEGOD! WE THANK THEE BOUNTIFUL!

 

*bow*, *bow*, *bow*

[Acccent 358 Likes (Leader)]

a second ago I was just googling to see if some people had dabbled with mixing three.js and gsap, in preparation for troubles I might run into soon.

now I'm lying on the floor, dead from reading "I just whipped together a quick plugin" followed by an ACTUAL THREE.JS PLUGIN JUST CASUALLY POSTED ON THE FORUMS LIKE IT'S NOTHING

 

okay I'm good now and have bookmarked the page. whoa

[Visual-Q 586 Likes (Leader)]

Quote

now I'm lying on the floor, dead from reading "I just whipped together a quick plugin" 

 

It's insane what he comes up with.

[Dipscom 2,815 Likes (Superhero)]

I would like to welcome the two of you to the Shock 'n Awe Club - Which I am the president.

 

We do a lot of skulking around and a lot of falling off our chairs by simply reading the posts here.

[PointC 8,599 Likes (Superhero)]

GreenShock
/ɡrēn ˌSHäk/

 

noun: GreenShock

1.  psychological condition caused by prolonged exposure to the GreenSock Animation Platform, especially the use of Club GreenSock plugins. "I’m in GreenShock after witnessing Jack Doyle ‘whip up’ a new plugin and casually post it in the forum."

• synonyms: astonishment, surprise, stupefaction, incredulity, disbelief, speechlessness, awe, wonder, wonderment

[Visual-Q 586 Likes (Leader)]

 

6 hours ago, PointC said:

GreenShock
/ɡrēn ˌSHäk/

 

noun: GreenShock

1.  psychological condition caused by prolonged exposure to the GreenSock Animation Platform, especially the use of Club GreenSock plugins. "I’m in GreenShock after witnessing Jack Doyle ‘whip up’ a new plugin and casually post it in the forum."

• synonyms: astonishment, surprise, stupefaction, incredulity, disbelief, speechlessness, awe, wonder, wonderment

 

4

 

LMAO 

[GreenSock 8,117 Likes (Superhero)]

12 hours ago, PointC said:

GreenShock
/ɡrēn ˌSHäk/

 

You guys crack me up. Ha! Brightened my Sunday, that's for sure. Craig, you're definitely developing a style with those clever images with overlaid witty captions. 

[GabeM 1 Likes (Newbie)]

Is it possible to use this when creating a BezierPlugin tween that utilizes "autoRotate"? As far as I know, threejs does not support "rotationX", etc.

 

My goal is to move a model of a fish along a path and have him face forward as he moves.

 

TweenMax.to(myObject3d.position, 4, {
  bezier: {
    type: 'soft',
    values: [
      {
        x: 0,
        y: 0,
        z: 0
      },
      {
        x: 100,
        y: 100,
        z: 100
      }
    ],
    autoRotate: [
      ['x', 'y', 'rotationZ', 0, false],
      ['z', 'x', 'rotationY', 0, false],
      ['z', 'y', 'rotationX', 0, false]
    ]
  },
  ease: Power1.easeInOut
});

 

[OSUblake 9,990 Likes (Superhero)]

53 minutes ago, GabeM said:

Is it possible to use this when creating a BezierPlugin tween that utilizes "autoRotate"? As far as I know, threejs does not support "rotationX", etc.

 

There's no reason you can't make it. Run this code first. I think THREE.Object3D is the base class if you want everything to have those properties.

 

Object.defineProperties(THREE.SomeClass.prototype, {
  rotationX: {
    get: function () { return this.rotation.x; },
    set: function (v) { this.rotation.x = v; }
  },
  rotationY: {
    get: function () { return this.rotation.y; },
    set: function (v) { this.rotation.y = v; }
  },
  rotationZ: {
    get: function () { return this.rotation.z; },
    set: function (v) { this.rotation.z = v; }
  }
});

 

 

[OSUblake 9,990 Likes (Superhero)]

Oops! I just realized you were animating position. 

 

Object.defineProperties(THREE.Object3D.prototype, {
  x: {
    get: function () { return this.position.x; },
    set: function (v) { this.position.x = v; }
  },
  y: {
    get: function () { return this.position.y; },
    set: function (v) { this.position.y = v; }
  },
  z: {
    get: function () { return this.position.z; },
    set: function (v) { this.position.z = v; }
  },
  rotationX: {
    get: function () { return this.rotation.x; },
    set: function (v) { this.rotation.x = v; }
  },
  rotationY: {
    get: function () { return this.rotation.y; },
    set: function (v) { this.rotation.y = v; }
  },
  rotationZ: {
    get: function () { return this.rotation.z; },
    set: function (v) { this.rotation.z = v; }
  }
});

 

 

Then try animating just the object.

 

TweenMax.to(myObject3d, 4, {
  bezier: {
    type: 'soft',
    values: [
      {
        x: 0,
        y: 0,
        z: 0
      },
      {
        x: 100,
        y: 100,
        z: 100
      }
    ],
    autoRotate: [
      ['x', 'y', 'rotationZ', 0, false],
      ['z', 'x', 'rotationY', 0, false],
      ['z', 'y', 'rotationX', 0, false]
    ]
  },
  ease: Power1.easeInOut
});

 

[GabeM 1 Likes (Newbie)]

@OSUblake

Thank you very much for your assistance. The results aren't exactly what I expected, but this is a big step in the right direction (no pun intended)  

[OSUblake 9,990 Likes (Superhero)]

Hi @GabeM

 

Yeah, I forgot to mention that I did not test that code at all, so I don't know how it looks. But if you need more help help, try making a little demo.

[Yaya 4 Likes (Newbie)]

Are there codepens to show this in action? I'm slowly getting a handle on three.js and gsap but also want to see how this awesome three plugin works.

[Dipscom 2,815 Likes (Superhero)]

You know, I never got around to checking this plugin out...

 

Shame, shame, shame...

[Yaya 4 Likes (Newbie)]

@Dipscom hahaha! I'll post one if I figure it out myself. :)