ZIM TextureActives for VR

We can now add ZIM TextureActives to VR. ZIM is a 2D canvas framework that be added to three.js as interactive textures. This raycasts pointer data into ZIM. Now, we can raycast VR Controller data into ZIM - see https://zimjs.com/015 and try the VR link in a VR Headset browser - there is also a video capture link. The ZIM Three helper module now has XRControllers(), XRMovement() and XRTeleport() classes to make these in just a line or two of code!

Thanks three.js and others for making a dream come true. Also see our resource link for TextureActrives here: ZIM TextureActives for Interactive Textures

Please let us know if you have any questions - and if you try it out, let us know how it goes. Cheers!

Here is a sample of what the code looks like. Usually we add more comments - but we stripped it down so you can see easily what is going on:

<!DOCTYPE html>
<html lang="en">
		<title>ZIM VR Template with three.js</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">    

    <script type="module">

    // full template here https://zimjs.com/015/vr_template.html
    import zim from "https://zimjs.com/cdn/015/zim_three";

    new Frame(FIT, 1024, 768, black, black, ready);
    function ready() {
        const panel = new TextureActive(800,500).addTo();
        new Circle(100,blue).center(panel).drag(); 

        const three = new Three({
            cameraPosition:new THREE.Vector3(0,0,1),

        const renderer = three.renderer;
        const scene = three.scene;
        const camera = three.camera;

        const floor = new THREE.Mesh(
            new THREE.CircleGeometry(40, 32).rotateX(-Math.PI / 2),
            new THREE.MeshBasicMaterial({color:0x000000})
        floor.position.y = -4;

        const controls = new OrbitControls(camera, renderer.domElement); // for non-vr
        const xrControllers = new XRControllers(three); // for vr
        xrControllers.on("xrconnected", () => {            
            const xrMovement = new XRMovement({
            new XRTeleport(three, xrControllers, xrMovement, floor, 4);

        // once for array of any TextureActive objects
        const textureActives = new TextureActives([panel], THREE, three, renderer, scene, camera, controls);        

        const canvasWindow = three.makePanel(panel, textureActives, .01); // .05 is scale



Check out MultiPixel - a TextureActive shared pixel board in VR Multi-Pixel - VR Experience with ZIM and three.js - play with friends!