JFP

Hi there, oh. Thank you both, I already looked around.. couldnt find any as cool as what I see you guys doing. Thanks for your thoughts anyhow.

Hi there! Im trying to use the gsap-pixi colormatrix filter plugin on images that are mapped to geometry in my three.js module, but I dont know exactly how to tell pixi that its talking to a three.js image map, or if that is even possible. Might help to show how Im loading the images onto the geometry in three const vidTxt1 = new THREE.TextureLoader().load( 'txtrs/welcome.png' ); // load png, have three recognize it as 'vidTxt1' var plane2 = new THREE.Mesh( // makes a new mesh called plane2 new THREE.PlaneGeometry(2.08, 1.55, 2.2), // dimensions of the new mesh plane new THREE.MeshBasicMaterial({ // new material called vidTxt1 hereby added to plane2 map: vidTxt1 }) ); plane2.position.set(0.1, 1, 0); // position plane2 in space scene.add(plano2); // add plane2 to scene // alrighty.. heres where I'm lost? // I would have thought to proceed like this: var image1 = new PIXI.Sprite.from( vidTxt1 ); gsap.timeline({ repeat: -1 }) .to(image1, { pixi: { colorize: "red", colorizeAmount: 1 } }) .to(image1, { pixi: { hue: 180 } }) .to(image1, { pixi: { saturation: 0 } }) // but the console tells me Uncaught TypeError: PIXI.Sprite is undefined // Any idea how I could tell pixi that I want it to mess with vidTxt1 ? Your insights would be really helpful. :)

Yeah that works great, thanks a ton. Here's what happened with that help. Probably not good on mobile - freezes my browser up there. But desktop is fine. https://www.jopl.de/underConstruction/11b.html Next I'll try to figure out how to make this kind of thing interactive so you can grab stuff and spin it. I should add whats slowing it down is most probably my clumsy use of three's post processing, not gsap.

Cool I'll check that out! Question, could I technically write a function into any gsap timeline item, a function that manipulates the values of the godrays over time, nested in that timeline until the next timeline item gets called and I can manipulate them back to what they were before? Like I dunno, animate a change of the colors of the sun and the godrays to different values and then back again?

Alright well it needs tweaking, wouldnt recommend this on mobile right now cuz theres too much goin on for smoothness unless your phone is superpowerful I guess, but bam! Woohoo https://www.jopl.de/underConstruction/4d.html Some garbage collection issues maybe, or just too much going on for browsers runtime to handle when the text gets too long, probably tweak some 3d parameters or take them out completely, or just generally make it leaner it but it works! Chrome runs it smoothest on desktop. Ohoho.. and it crashed my Chrome after about ten minutes. Those godray shaders and the fact that theres bevels on the text, I can give it less curvature and a lot of those little blue ball flying thingies and other stuff can still be reduced in complexity for smoother performance. Thanks a lot for your help! p.s. I referr to you as "the dudes from greensock" this file doesnt mean anything and is intended purely to make itself happen. No other reason. This is just the first things that came into my head. If you find it uncool then I can change it. Whatever. I ...correct me if Im wrong but isnt it kind of a big deal that you guys can give three.js a timeline? Opens up whole other ways of using three in my mind. I don't think it had that capacity before. Least I never saw it, but Ive been totally out of the loop for a long time.

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.

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.

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.

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

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.

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

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?

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”). 4c.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." ?

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.

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.