Render to Three JS Canvas Texture

[IRobot1]

Can you provide an example of how a zim canvas can be mapped into a three js canvas texture?

I tried getting the canvas from the Frame and using it in THREE.CanvasTexture, but ZIM wants to take up the full screen. I want it to appear as a texture in the plane

Here's the codepen Thanks

import zim from "https://zimjs.org/cdn/02/zim";

const z = new Frame(FILL, 256, 256, light, dark, ready);
function ready() {

    F.makeIcon(null,dark)
        .sca(2)
        .centerReg()

    F.madeWith().pos(40,40,RIGHT,BOTTOM);

} // end ready

import { } from "https://unpkg.com/three";

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// ****
const canvastexture = new THREE.CanvasTexture(z.canvas)

const geometry = new THREE.PlaneGeometry();
const material = new THREE.MeshBasicMaterial({ map: canvastexture });

const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
const animate = () => {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
};
animate();```

[IRobot1]

Here's a couple of threejs examples using canvas texture and VR sandbox using underlying HTMLMesh

[danzen]

We want to do that too @IRobot1. Here is a solution - you can set the F.canvas.style.display = "none". You also need to move the threejs code into the ready event as the canvas needs to be ready. If you are animating then you need to add cube.material.map.needsUpdate = true; in the render loop. If you were not animating and not using the needsUpdate then you need to S.update() before doing the threejs code so there is something on the canvas when you add it. Note, we imported our three version... optional - which also has orbitcontrols.

<script type="module">

    import zim from "https://zimjs.org/cdn/014/zim_three";

    new Frame(FIT, 256, 256, light, dark, ready);
    function ready() {

        F.makeIcon(null,dark)
            .sca(2)
            .centerReg()
            .animate({
                props:{scale:1},
                rewind:true,
                loop:true
            })            

        F.canvas.style.display = "none";

        // S.update(); // if not animating, make sure to update the stage before applying texture

        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(
            75,
            window.innerWidth / window.innerHeight,
            0.1,
            1000
        );

        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // ****
        const canvastexture = new THREE.CanvasTexture(F.canvas)

        const controls = new OrbitControls(camera, renderer.domElement);

        const geometry = new THREE.PlaneGeometry();
        const material = new THREE.MeshBasicMaterial({ map: canvastexture });

        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);
        camera.position.z = 2;
        const animate = () => {
            requestAnimationFrame(animate);
            // ***** if animating this is needed
            cube.material.map.needsUpdate = true;
            renderer.render(scene, camera);
        };
        animate()

    } // end ready

</script>

[danzen]

Test file: https://zimjs.com/test6/three.html

[danzen]

https://zimjs.com/editor/view/Z_FFZ7D