Render to Three JS Canvas Texture

[danzen]

Render to Three JS Canvas Texture

[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