Can we somehow access a ThreeJs instance?

How To
1

Playing around with some 3D stuff and it’d be neat to be able to access a scene created by the 3D Module, instead of setting up all the boilerplate stuff from scratch.

Wouldn’t mind too much doing it by hand but before I go all in, maybe there is a way to access and manipulate them in a similar way that we can access bricks splide instances?

2

Check bricksforgeData.models. You should find what you search there :sunglasses:

1 Like
3

Ha, I knew you’d have a lil trick up your sleeve for this one :smiley: Now I just gotta figure out how to make it work the way I want it to haha.

1 Like
4

Hehe :smiley: I’m just extending the Bricksforge Panel to the possibility to create GSAP Animations also for 3D Models. Very exiting!

5

Can’t wait, and maybe, if I don’t (once again) get sidetracked tinkering with other stuff, I’ll try to set up a cool example with it so we can finally put something in the empty examples section of the docs :stuck_out_tongue:

One more question though… when I log bricksforgeData in the console, all is fine. Once I do it on the page or by enqueuing a script, it’s not defined. I tried loading it after “bricksforge-three-js-js” but no success.

wp_enqueue_script( 'main-js', get_stylesheet_directory_uri() . '/main.js', array('bricksforge-three-js-js'), '1.0.0');

as soon as I add any of the bricksforge scripts as a dependancy, my file doesn’t load at all. Feeling stupid rn haha I’m sure I’m overlooking something. Just kinda stumped cause it loads if I use some native bricks script as a dependancy.

1 Like
6

Could you try it with some delay / timeout?

Depending on when your JS is fired, the variable may not yet be available. I assume that you are consideringDOMContentLoaded or window.onload events.

7

Remvoing the dependancy and adding a timeout instead worked, thanks :slight_smile:

1 Like
8

So i’ve been playing around with this a bit but threejs in general gives me headaches haha so for now it’ll be eassier for me to build this stuff in react where I don’t have to fight WordPress all the time.

Nevertheless, I figured I could share some ideas to be considered over the next 10 versions or so since I know it’s a pita to implement haha.

I guess only few people would need this so I’d completely understand if this kinda stuff never even makes it onto the roadmap haha, just kinda thinking out loud :wink:

  1. Have an option to use the camera from the gltf file (exported from blender or whatever)
  2. Integrate something like GitHub - markuslerner/THREE.Interactive: Fast and simple interaction manager for three.js for enabling mouse and touch events on 3D objects and find a way (simple code field?) to individually target meshes so we can create fun interactions
  3. Similar to two, possibly the same, add a way to individually modify meshes (materials, etc.)
  4. Absolute cherry on top, a field to assign vertex shaders to meshes.

Here is a very ugly and barebones example of what I’ve managed to create so far haha (inspired by Creative WebGL Image Transitions | Codrops)

Idea was to have a screen on some object and a slider on the screen with some fancy webgl transition using shaders:

1 Like