Threejs version to show what's in a div

[marcusx2]

Hi @hiukim, do you know if it's possible to modify the threejs example to show what's on a div instead of a threejs geometry? Basically I have some content in a div on the same page that I want to show in AR.

[hiukim]

There is a method addCSSAnchor instead of addAnchor. But I haven't had the chance to add that tutorial/example yet.

[marcusx2]

How do I use it? I tried this

const anchor = mindarThree.addCSSAnchor(0);
const content = document.getElementsByTagName('canvas')[0];
anchor.group.add(content);

but it didn't work. I keep getting the error

mindar-image-three.prod.js:2 THREE.Object3D.add: object not an instance of THREE.Object3D.

on the line anchor.group.add(content);

[positlabs]

Instead of trying to add the canvas object to a threejs object, you will need to create a texture from the canvas, and apply it to a plane (which subclasses Object3D)