Jump to content
Search Community

Addressing a variable with TextPlugin

JFP test
Moderator Tag

Recommended Posts

Hello there, Im trying out three.js combined with the gsap TextPlugin.

Ive got a variable called message that Im trying to change the text of.

I cant seem to figure out how to talk to a gsap selector / target when it isnt an html object with an id or a class. Would that even work?


Your help would be really appreciated.
 
                const tloader = new THREE.FontLoader();
                tloader.load('url_to_fonts/helvetiker_regular.typeface.json', function (font) {
                    const color = 0xffffff;
                    const matDark = new THREE.LineBasicMaterial({
                        color: 0x006699,
                        side: THREE.DoubleSide
                    });
                    var select = e => document.querySelector(e);
                    var message = select('message');
                    var message = 'gsap animated text test';
                    var mw = new TimelineLite({ repeat: -1});
                    mw.add(TweenMax.to(message, 1, { text: 'boop' }));  
                    mw.add(TweenMax.to(message, 1, { text: 'blort' }));
              

                    
                    const shapes = font.generateShapes(message, 100);
                    const geometry = new THREE.ShapeGeometry(shapes);
                    geometry.computeBoundingBox();
                    const xMid = - 0.5 * (geometry.boundingBox.max.x - geometry.boundingBox.min.x);
                    geometry.translate(xMid, 0, 0);
                    // make shape ( N.B. edge view not visible )

                    const text = new THREE.Mesh(geometry, matDark);
        
                    text.position.set(+0, -200, -80);
                    text.scale.multiplyScalar(0.65);
                    scene.add(text);

                });

 

 
 


 

 

Edited by JFP
It was a big mess
Link to comment
Share on other sites

Yeah, GSAP can animate literally anything that JavaScript can touch. Without a minimal demo, it's pretty tough to troubleshoot (and I'm not a Three.js guy) but here are a few quick things I noticed:

  1. Your double-setting "message" (first to an element, then to a literal text string). 
  2. When you pass in a string as the target, GSAP interprets that as selector text but obviously in your case that's not what it is. If you're trying to tap into TextPlugin (which is for DOM elements), you could just use a proxy with an onUpdate to apply it: 
    // pseudo code:
    var proxy = document.createElement("div");
    proxy.innerText = "gsap animated text test";
    gsap.to(proxy, {
      text: "beep", 
      onUpdate: function() {
        yourObject.text = proxy.innerText;
      }
    });

     

  3. You were using the old syntax. I'd strongly recommend updating. The new GSAP 3 syntax is much more concise:
    // OLD
    var mw = new TimelineLite({ repeat: -1});
    mw.add(TweenMax.to(message, 1, { text: 'boop' }));  
    
    // NEW
    var mw = gsap.timeline({ repeat: -1 });
    mw.to(message, 1, { text: 'boop' });  

     

I hope that helps. 

Link to comment
Share on other sites

Dear Jack, thank you very much for replying. It throws errors but I'm sure that's because I'm doing something wrong. I've been going at this and a different thing since yesterday afternoon and now it's well into the next morning, and my head is swimming. I don't have the wherewithall to make a codepen right now, I need to catch a quick bunch of z's. I hope that's okay, sorry to wimp out like this right now. If it's okay I'll come back later with one, I'm really done.

Link to comment
Share on other sites

Oh man, seems like no matter how I try to get three.js imported (npm or script tags) on a gsap template or other codepen it throws between 68 and 72 error messages even when the page is blank over there. The cross origin policies arent letting me do anything with three.js on codepen. Would it help to link to a demo on my own server instead? But I mean that won't be editable either.

So for what its worth, here's how it looks:

https://www.jopl.de/underConstruction/4.html


 

And here's the code part that deals with the text

 


 

const tloader = new THREE.FontLoader();
                tloader.load('url/jsm/fonts/helvetiker_regular.typeface.json', function (font) {
                    const color = 0xffffff;
                    const matDark = new THREE.LineBasicMaterial({
                        color: 0x006699,
                        side: THREE.DoubleSide
                    });


                    // Your help yesterday
                    var message = "gsap text test";

                    var proxy = document.createElement("div");
                    proxy.innerText = "gsap animated text test";
                    gsap.to(proxy, {
                        text: "beep", delay: 2,
                        onUpdate: function () {

                            // it didnt know what to do with object.text
                            object.text = proxy.innerText;
                        }
                    });
                    // My attempts from yesterday w/ old syntax before you helped


                        var message = 'gsap TextPlugin Text';
                        var mw = new TimelineLite({ repeat:-1});
                                 mw.add(TweenMax.to(message, 1, { text:'boop'}));
                                 mw.add(TweenMax.to(message, 1,{ text: 'blort' }));



                    // Bounding Box

                    const shapes = font.generateShapes(message, 100);
                    const geometry = new THREE.ShapeGeometry(shapes);
                    geometry.computeBoundingBox();
                    const xMid = - 0.5 * (geometry.boundingBox.max.x - geometry.boundingBox.min.x);
                    geometry.translate(xMid, 0, 0);

                    // position, scale and add text

                    const text = new THREE.Mesh(geometry, matDark);

                    text.position.set(+0, -200, -80);
                    text.scale.multiplyScalar(0.65);
                    scene.add(text);


                });

 

 

Obviously help would be awesome but under the circumstances I understand completely if you're like.. dude, get a codepen workin. I tried for like an hour without a greensock template and an hour with one and couldn't get the inspector to stop throwing three.js cross origin redness at me. Did it just like in the video you guys have but it was like nope.

I stopped being interested in the web after flash bowed out and it started to get boring in my opinion so I went and learned 3D animation instead but now Im back because Im starting to see new possibilities that I didnt see five years ago. Might have missed a lot of stuff. Like erm how to make a codepen that defies cross origin requests.. fr'instance. Much to my current chagrine.

Link to comment
Share on other sites

51 minutes ago, OSUblake said:

How do you change the text in three.js? That's all he was showing with object.text. Not that object.text is actually in your code, but how to apply the changes from the proxy.innerText to something else.


Oh, yeah it did work a little. I was trying to use a gsap timeline and the TextPlugin to animate that bright blue text beneath the 3D logo with the purple godrays on the link I just added, something like this (I know my syntax is rough here, just trying to get it to work inside three.js though - I was having trouble finding out how to reference the selector / target because the var doesn't have an id or a classname in my js file. In my three.js file, its just called 'message', it can be a const or a var but I cant seem to get the gsap timeline to recognize it so that I can animate whatever words I want to write into it using the TextPlugin. That's what I was trying to ask for advice on yesterday.
 

var mw = new gsap.timeline({ repeat:-1 });
    mw.add(TweenMax.to(message, 1, { alpha: '1', text: 'Asset Creation', ease: 'power4.inOut', delay: '3' }));
    mw.add(TweenMax.to(message, 1, { text: '2D Animation', ease: 'power4.inOut', delay: '3' }));
    mw.add(TweenMax.to(message, 1, { text: '3D Animation', ease: 'power4.inOut', delay: '3' }));
    mw.add(TweenMax.to(message, 1, { text: 'Exhibit Concepts', ease: 'power4.inOut', delay: '3' }));
    mw.add(TweenMax.to(message, 1, { text: 'Final Cut', ease: 'power4.inOut', delay: '3' }));
    mw.add(TweenMax.to(message, 1, { text: 'Video Editing', ease: 'power4.inOut', delay: '3' }));
    mw.add(TweenMax.to(message, 1, { text: 'Voice-over Narration', ease: 'power4.inOut', delay: '3' }));
    mw.add(TweenMax.to(message, 1, { text: 'Voice-over Narration', ease: 'power4.inOut', alpha: '0', delay: '3' }));

 

Link to comment
Share on other sites

Well let's start by getting rid of that .add syntax.

 

Also, you don't need delays. That's what the position parameter is for.

 

You also need to make sure you are loading the text plugin.

 

var mw = gsap.timeline({ 
  repeat:-1, 
  onUpdate: updateText,
  defaults: {
    ease: "power4.inOut"
    duration: 1
});
  
mw.to(proxy, { text: "foo" })
  .to(proxy, { text: "bar" })
  .to(proxy, { text: "baz" });

function updateText() {
  myThreeJsTextObjectThatYouCanSetTheTextOn = proxy.innerText;
}
    

 

31 minutes ago, JFP said:

I was having trouble finding out how to reference the selector / target because the var doesn't have an id or a classname in my js file. In my three.js file, its just called 'message', it can be a const or a var but I cant seem to get the gsap timeline to recognize it so that I can animate whatever words I want to write into it using the TextPlugin

 

Don't quite understand what you mean. You don't need to an id or classname. The proxy is the element.

 

 

 

  • Like 1
Link to comment
Share on other sites

See now that sounds awesome. Im gonna try that and get back to you. It sort of worked yesterday but I didnt know to call the target 'proxy'. That's awesome dude, thank you. You guys are some of the coolest people on the web, Im not even kidding.

  • Thanks 1
Link to comment
Share on other sites

Hi. One little thing about importing to module, Im goin

 

            import * as TextPlugin from 'https://www.url/jsm/gsap/src/TextPlugin.js';
            import * as gsap from 'https://www.url/jsm/gsap/src/index.js';

(also tried to import all.js as gsap, then tried different combinations of importing from umd or esm, but in the above code it seems like its importing stuff but inspector throws "gsap.to is not a function" { which was "Uncaught TypeError: setting getter-only property "window"" before when I was importing from umd}).

So.. like, where are timelines defined in the source files? I used to have to import timelineLite.as or timelineMax to get em workin, but I don't know what js file contains/defines them now? Or does TextPlugin already have that in it and Im doing something else wrong? Wait, gsap.to isnt timeline, its core, no? Tried gsap-core.js.
 

Link to comment
Share on other sites

13 minutes ago, JFP said:

like, where are timelines defined in the source files? I used to have to import timelineLite.as or timelineMax to get em workin

 

Those are deprecated. Just import gsap and any plugins. Did you see the installation page?

https://greensock.com/docs/v3/Installation

 

import {gsap} from 'https://www.url/jsm/gsap/src/index.js';
import {TextPlugin} from 'https://www.url/jsm/gsap/src/TextPlugin.js';

gsap.registerPlugin(TextPlugin);

 

Make sure those files are the modules files. You should exports at the bottom of the file.

 

Link to comment
Share on other sites

Hmm, I tried that, as a result it wont load any of the three.js files either. I put the gsap folder inside the three folder - could that be whats causing it?

 

 

GEThttps://www.url/jsm/gsap/src/gsap.js[HTTP/2 404 Not Found 85ms]
Loading module from “https://www.url/jsm/gsap/src/gsap.js” was blocked because of a disallowed MIME type (“text/html”).
Loading failed for the module with source “https://www.url/jsm/gsap/src/gsap.js”. 4c.html:13:1
Loading failed for the module with source “https://www.url/jsm/build/three.module.js”. 4c.html:13:1
Loading failed for the module with source “https://www.url/jsm/libs/stats.module.js”. 4c.html:13:1
Loading failed for the module with source “https://www.url/jsm/controls/OrbitControls.js”. 4c.html:13:1
Loading failed for the module with source “https://www.url/jsm/shaders/GodRaysShader.js”. 4c.html:13:1
Loading failed for the module with source “https://www.url/jsm/loaders/FBXLoader.js”. 4c.html:13:1
Loading failed for the module with source “https://www.url/jsm/gsap/src/TextPlugin.js”.


To avoid misunderstandings this is what my import part looks like, its at the top of the file:

 

        <script type="module">

            import * as THREE from 'https://www.url/jsm/build/three.module.js';
            import Stats from 'https://www.url/jsm/libs/stats.module.js';
            import { OrbitControls } from 'https://www.url/jsm/controls/OrbitControls.js';
            import { GodRaysFakeSunShader, GodRaysDepthMaskShader, GodRaysCombineShader, GodRaysGenerateShader } from 'https://www.url/jsm/shaders/GodRaysShader.js';
            import { FBXLoader } from 'https://www.url/jsm/loaders/FBXLoader.js';
            import { gsap } from 'https://www.url/jsm/gsap/src/gsap.js';
            import { TextPlugin } from 'https://www.url/jsm/gsap/src/TextPlugin.js';

            gsap.registerPlugin(TextPlugin);
 			console.log('imported all'); 


    
         

 
I dont exactly get what you meant when you said "Make sure those files are the modules files. You should exports at the bottom of the file." ?
Link to comment
Share on other sites

Sounds like a server error. It doesn't load when I put the file directly in the address bar.

https://www.url/jsm/gsap/src/gsap.js

 

You can import from a cdn if you want.

import { gsap } from 'https://unpkg.com/gsap@3.6.1/index.js?module';
import { TextPlugin } from 'https://unpkg.com/gsap@3.6.1/TextPlugin.js?module';

gsap.registerPlugin(TextPlugin);

 

Link to comment
Share on other sites

Yeah that url's been doctored, its not actually "url" I just.. I dunno I didnt put in the full path here. But I get the same thing when I do use the right url. Okay so its not a problem to use three.js locally and gsap over cdn, okay. Justtried and no errors, thank you.

Incidentally, using gsap over cdn .. yeah, see, I live in Germany, and they changed the laws and theres people getting sued by these crazy toxic lawyers for pulling google fonts from google servers instead of pulling fonts locally off their own servers. Its about some kind of tracking issues. So my quesiton there is, crazy as it sounds, does gsap do any location tracking or store any kind of user data when pulled off a cdn?

Link to comment
Share on other sites

4 minutes ago, JFP said:

So my quesiton there is, crazy as it sounds, does gsap do any location tracking or store any kind of user data when pulled off a cdn?

 

No, gsap doesn't manage any CDNs, so you would have check with the actual CDN.

Link to comment
Share on other sites

Alright I will, thanks. Im still getting errors here, it cant set the property "text" on the string " stuff ". Ive tried a bunch of stuff, nothing I know seems to work.  Both the single use one I uncommented here and the timeline approach throw the same error.


 

                    var message = "stuff";

                    // text animation
                    var proxy = document.createElement("div");
                    proxy.innerText = message;

                //    gsap.to(proxy, 2, { text: "beep", delay: 2, onUpdate: function () {
                //            message.text = proxy.innerText;
                //        }
                //    });

                    var mw = gsap.timeline({ onUpdate: updateText, defaults: { ease: "power4.inOut", duration: 1 } });
                    mw.to(proxy, { text: "foo" });
                        .to(proxy, { text: "bar" })
                        .to(proxy, { text: "baz" });

                    function updateText() {
                        message = proxy.innerText;
                    }

 

heres the whole error if it helps

 

4c.html:104 Uncaught TypeError: Cannot create property 'text' on string 'stuff'
    at Tween.onUpdate [as _onUpdate] (4c.html:104)
    at _callback (gsap-core.js?module:938)
    at Tween.render (gsap-core.js?module:3172)
    at _lazyRender (gsap-core.js?module:187)
    at _lazySafeRender (gsap-core.js?module:193)
    at Array.updateRoot (gsap-core.js?module:2564)
    at _tick (gsap-core.js?module:1252)

 

I um.. dont mean to bug you with this stuff and Im thankful for your help, defintely renewing my shocking membership if I can get three to work with gsap if that means anything to you guys

 

Link to comment
Share on other sites

The only way for the way to happen is if you are not using that proxy for the target, and using a string instead. Like...

var mw = gsap.timeline({ onUpdate: updateText, defaults: { ease: "power4.inOut", duration: 1 } });
mw.to(message, { text: "foo" })
  .to(message, { text: "bar" })
  .to(message, { text: "baz" });

 

There should be nothing wrong with the code I posted. Just a simple demo showing it working on a canvas element.

 

See the Pen 8655a8000ee046eb43a359e7d5562510 by osublake (@osublake) on CodePen

 

How do you set text in three.js?

 

  • Like 1
Link to comment
Share on other sites

Hi, well after you set up your scene and stuff like camera and lighting, it goes like


         

       // load font
                const loader = new THREE.FontLoader();
                loader.load('fonts/helvetiker_regular.typeface.json', function (font) {


                // set up color
                    const color = new THREE.Color(0x006699);
                // set up material
                    const matDark = new THREE.MeshBasicMaterial( {
                        color: color,
                        side: THREE.DoubleSide
                    } );


                 // message (text content)
                    const message = "   Three.js\n BasicText.";


                 // generate fontshapes
                    const shapes = font.generateShapes( message, 20 );
                    const geometry = new THREE.ShapeGeometry(shapes);


                 // so the camera stays focused on the middle of the text
                    geometry.computeBoundingBox();
                    const xMid = - 0.5 * ( geometry.boundingBox.max.x - geometry.boundingBox.min.x );
                    geometry.translate( xMid, 0, 0 );


               // marry geometry and material, position & add to scene
                    const text = new THREE.Mesh( geometry, matDark );
                    text.position.z = - 150;
                    scene.add(text);

                });

                //end Textload function

 

So maybe this isnt normal text, maybe its some kind of svg abomination (fonts been converted to json before loaded) and thus gsap doesnt see it? No idea how the json gets interpreted as the right characters or all that kind of thing. When I change the const message into const message="blablabla"; that works fine when I upload and look at it.

Oh and Im not using json text because of those legal issues I mentioned earlier, heh, its because thats just the way three.js seems to interpret text far as I know... which, um.. isnt superfar.

That         const shapes = font.generateShapes( message, 20 );      thing - 20 is the size of the text, message is the words you type into the message constant. You could just as well use vars all over that whole thing and it wouldnt make a difference.

Link to comment
Share on other sites

9 minutes ago, JFP said:

thus gsap doesnt see it?

 

GSAP is not interacting with three.js. GSAP is animating a proxy. It's just an intermediary. GSAP is doing work on something else, and then you can read those changes and apply them somewhere else, like three.js. Just like I did with the canvas element.

 

Just ignore gsap for a second. How do you change the text in three.js? This is the question you need to answer. 

 

The text says "Three.js basic shape." Now how would you change text to say something else? Like 1 second later? If you can answer that it should be very easy to plug into that update function.

 

setTimeout(() => {
  // how to change the text to something else in here???
}, 1000);

 

I don't know the best way to do this, that's why I'm asking you.

 

 

  • Like 2
Link to comment
Share on other sites

Well I just type it in the VB Studio editor and then upload it. :) Dunno how that works on the fly.. I know that you can add a timer function and.. Hmmm... actually There is one example file in the three.js docs somewhere where you can type in a different word and it appears in 3d text, I'll go look for / at it and get back to you in a sec

Link to comment
Share on other sites

Alright found it, maybe this can help. In this example file you can change the text by typing on the keyboard

https://threejs.org/examples/#webgl_loader_ttf
 

Theres this stuff in the events section of the code, I know this isn't preformatted text, but maybe some method or so can be taken from this and used somehow? Seems like they're talking to textMeshes and text.substrings

 

                // EVENTS

                container.style.touchAction = 'none';
                container.addEventListener( 'pointerdown', onPointerDown );

                document.addEventListener( 'keypress', onDocumentKeyPress );
                document.addEventListener( 'keydown', onDocumentKeyDown );

            }

            function onDocumentKeyDown( event ) {

                if ( firstLetter ) {
                    firstLetter = false;
                    text = '';

                }

                const keyCode = event.keyCode;

                // backspace

                if ( keyCode === 8 ) {
                    event.preventDefault();

                    text = text.substring( 0, text.length - 1 );
                    refreshText();
                    return false;

                }

            }

            function onDocumentKeyPress( event ) {
                const keyCode = event.which;
                // backspace
                if ( keyCode === 8 ) {
                    event.preventDefault();

                } else {

                    const ch = String.fromCharCode( keyCode );
                    text += ch;
                    refreshText();

                }

            }

            function createText() {

                textGeo = new THREE.TextGeometry( text, {
                    font: font,
                    size: size,
                    height: height,
                    curveSegments: curveSegments,
                    bevelThickness: bevelThickness,
                    bevelSize: bevelSize,
                    bevelEnabled: true

                } );

                textGeo.computeBoundingBox();
                textGeo.computeVertexNormals();

                const centerOffset = - 0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );

                textMesh1 = new THREE.Mesh( textGeo, material );
                textMesh1.position.x = centerOffset;
                textMesh1.position.y = hover;
                textMesh1.position.z = 0;
                textMesh1.rotation.x = 0;
                textMesh1.rotation.y = Math.PI * 2;
                group.add( textMesh1 );

                if ( mirror ) {

                    textMesh2 = new THREE.Mesh( textGeo, material );
                    textMesh2.position.x = centerOffset;
                    textMesh2.position.y = - hover;
                    textMesh2.position.z = height;
                    textMesh2.rotation.x = Math.PI;
                    textMesh2.rotation.y = Math.PI * 2;
                    group.add( textMesh2 );

                }

            }

            function refreshText() {

                group.remove( textMesh1 );
                if ( mirror ) group.remove( textMesh2 );
                if ( ! text ) return;
                createText();

            }

 

Yeah probably not. I dunno. If I knew how to setTimeout in the right place.. I have no idea. Maybe a timer would be a better tool to look at. Your kung fu is way beyond mine dude, Im not aware of timelines in three.js. I mean I see them in fbx animations and I know those files use timer functions. Ill take a look at those but I think that stuff is only used to speed up or slow prebaked 3D animations down.  Three.js seems more like a bunch of constants than variables, but .. you never know, I havent been messing with this stuff for long. Ill take a look.

Link to comment
Share on other sites

51 minutes ago, JFP said:

If I knew how to setTimeout in the right place.. I have no idea. Maybe a timer would be a better tool to look at

 

No. I just suggested that so you would stop focusing on gsap, and address the real issue at hand, how to update text.

 

I'll check out that code you posted later, but it looks like a good start. It seems like you're going to have to remove and recreate the text geometry every time the text changes.

 

Link to comment
Share on other sites

Well I guess .. roughly speaking

I plug this refreshText function into the update function to remove the current message text

 

            function refreshText() {

                group.remove( textMesh1 );
                if ( ! text ) return;
                createText();

            }

That then calls createText from onStart in the next timeline item .. ish.. but so how do I jump to the next timeline item.. or wait I guess that happens automatically? So I guess its either that or a stack of onCompletes that destroyText and then reference a bunch of onStarts that createText. And I guess once I figure out how to do it with whole words then I can start to get into substrings to do it character by character.
 

function createText() {

                textGeo = new THREE.TextGeometry( text, {
                    font: font,
                    size: size,
                    height: height,
                    curveSegments: curveSegments,
                    bevelThickness: bevelThickness,
                    bevelSize: bevelSize,
                    bevelEnabled: true

                } );

                textGeo.computeBoundingBox();
                textGeo.computeVertexNormals();

                const centerOffset = - 0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );

                textMesh1 = new THREE.Mesh( textGeo, material );
                textMesh1.position.x = centerOffset;
                textMesh1.position.y = hover;
                textMesh1.position.z = 0;
                textMesh1.rotation.x = 0;
                textMesh1.rotation.y = Math.PI * 2;
                group.add( textMesh1 );

            }


Least... thats what the plan might be very very roughly speaking... on paper. And no plan ever survives first contact with the enemy. Cuz how easing fits in to all that or the correct syntax is pfffsh way beyond me right now. So but whatever, I guess thats the broad strategy. Ish.

Link to comment
Share on other sites

Then this should be all you need to do.

 

var text = "stuff";

// text animation
var proxy = document.createElement("div");
proxy.innerText = text;

// first run?
createText();

var mw = gsap.timeline({ 
  repeat:-1, 
  onUpdate: onUpdate,
  defaults: {
    ease: "power4.inOut"
    duration: 1
});
  
mw.to(proxy, { text: "foo" })
  .to(proxy, { text: "bar" })
  .to(proxy, { text: "baz" });

function onUpdate() {
  text = proxy.innerText;
  refreshText();
}

 

  • Like 1
Link to comment
Share on other sites

Okay that's awesome thanks so much, but it's gonna be a bit more complicated because it turns out that file I got the createText and refreshText functions from loads fonts a bit differently than the one I was using as a reference originally and that seems to have a big impact, so I need to recalibrate a bunch of stuff. By the way the new one can load ttf files directly, apparently. So there's stuff that needs stripping away and stuff that needs adding. There was some vars declared earlier on in the second that are neccessary too. But I'm on it. And I know a lot more now with your help. I'll let you know when something meaningful happens.

  • Like 2
Link to comment
Share on other sites

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...