Jump to content
Search Community

Three.js properties

martis test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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}})

 

Link to comment
Share on other sites

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? 

  • Like 5
Link to comment
Share on other sites

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? 

  • Like 4
Link to comment
Share on other sites

  • 5 months later...
  • 1 month later...

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

  • Like 3
  • Haha 3
Link to comment
Share on other sites

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

30CKnDe.jpg

  • Like 1
  • Haha 10
Link to comment
Share on other sites

 

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 :-D

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

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
});

 

Link to comment
Share on other sites

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; }
  }
});

 

 

  • Like 1
Link to comment
Share on other sites

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
});

 

  • Like 5
Link to comment
Share on other sites

  • 7 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...