Using Three.js with Framer
See original GitHub issueI’m trying to create a new layer that contains a canvas element:
htmlLayer.html = '<canvas id="threeCanvas></canvas>'
And then attach a Three.js instance to that canvas.
var canvas = document.getElementById("threeCanvas");
var renderer = new THREE.WebGLRenderer({ canvas: canvas });
However, I’m getting the error Uncaught TypeError: Cannot read property 'width' of null
from Three.js. I’m thinking this is because the DOM element has not yet been created by Framer. Is there any way to call my Three.js code after Framer has initialized all of the DOM structure? Anyone had luck with this?
Issue Analytics
- State:
- Created 9 years ago
- Comments:7 (4 by maintainers)
Top Results From Across the Web
3D: Introduction | Framer for Developers
Framer Motion 3D is a simple yet powerful animation library for React Three Fiber. It offers most of the same functionality as Framer...
Read more >Has anyone integrated Framer with three.js /babylon.js ...
Has anyone integrated Framer with three.js /babylon.js / Verold / webgl stuff? How would that work? I'd love to have the 3D model...
Read more >Personal Portfolio build using Next js, Three js, and Framer ...
Personal Portfolio build using Next js, Three js, and Framer Motion · Tech Used · Screenshot · Resource.
Read more >Animation system – three.js docs
Within the three.js animation system you can animate various properties of your models: the bones of a skinned and rigged model, morph targets,...
Read more >Framer Motion layout animation & React Three Fiber
Sign in. Sandbox Info. Framer Motion layout animation & React Three Fiber ... App.js. MotionCanvas.js. Three.js. animation-settings.js. index.js. styles.css.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Ah, sorry. This works for me:
We’ve been using Framer to prototype VR interfaces within the limits of 2D UI and skyboxes. It would be really, really nice if Framer embraced support for libraries such as Three.js with the traditional friendly approach. Sometimes we just need to go to Unity, which sounds a little overkill for many designers.