This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Shane Brown
Posted Jul 28 - Read on Facebook

Has anyone integrated Framer with three.js /babylon.js / Verold / webgl stuff? How would that work? I'd love to have the 3D model for my prototype as somewhat interactive and live (rather than image) within Framer but I'm not sure how I would go about that (I've only tinkered with 3D / WebGL stuff).

6 Comments

Koen Bok

You can just create a canvas layer and target it with any of the frameworks like this:

canvasLayer = new Layer
canvasLayer.html = '<canvas></canvas>'

canvasElement = canvasLayer.querySelectorAll("canvas")[0]

Noam Elbaz

Shane Brown did you ever figure out how to use canvas with framer. I'm using Framer Studio (coffeescript) and I want to animate an arch filling up to be a circle.... any ideas where i can learn about canvas? tutorials?

Shane Brown

Hey Noam, I was working on this for a uni project and ended up running out of time to implement any of the Verold and canvas stuff, so I never actually tried it. Now I'm on uni break I'm actually going through and learning js to better get my head around how framer works (and its something I've been meaning to do for a while!).

Hopefully someone else can point you in the right direction, but this might be a good place to start :).

http://diveintohtml5.info/canvas.html

Noam Elbaz

Koen Bok How can I draw a arc (that will animate to a circle) ? Any easy Framer functions for this? Any links / tutorials (in coffee) that would help me?
I dont know much about <canvas> , but is that the way to go? Any examples of using <canvas> in Framer that I can reference? ---My only real programming experience is in Framer.

Christian Poschmann

Did anyone manage to get a working three.js model into Framer?

Ralph DeMars Gnonlonfoun

Noam Elbaz... You could use svg and here is a Josh Puckett post who tell a bit about how to use svg forms in framer... https://medium.com/framer-prototyping/working-with-svg-paths-in-framer-43d3c2d08adc ... Have a nice day

Read the entire post on Facebook