ZIM TextureActives for VR

danzen · September 24, 2023, 1:15am

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!

danzen · September 24, 2023, 2:43am

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">
	<head>
		<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">    
    </head>
	<body>

    <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({
            width:window.innerWidth, 
            height:window.innerHeight, 
            cameraPosition:new THREE.Vector3(0,0,1),
            textureActive:true,
            xr:true
        });

        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;
        scene.add(floor);

        const controls = new OrbitControls(camera, renderer.domElement); // for non-vr
        
        const xrControllers = new XRControllers(three); // for vr
        xrControllers.on("xrconnected", () => {            
            const xrMovement = new XRMovement({
                three:three, 
                XRControllers:xrControllers, 
                radiusMax:40
            });
            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
        canvasWindow.position.set(0,0,-5);
        scene.add(canvasWindow);

    }

		</script>
	</body>
</html>

danzen · November 5, 2023, 4:08pm

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