Using Three.js with Framer

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?

[koenbok]

Ah, sorry. This works for me:

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

[noAlvaro]

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.