question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using Three.js with Framer

See original GitHub issue

I’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:closed
  • Created 9 years ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
koenbokcommented, May 18, 2014

Ah, sorry. This works for me:

layer = new Layer();
layer.html = "<canvas></canvas>"
renderer = new THREE.WebGLRenderer({canvas: layer._elementHTML.childNodes[0]});
0reactions
noAlvarocommented, Mar 15, 2017

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.

Read more comments on GitHub >

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

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found