Example 2: VSC with Three.js

An example of how to run and debug WebGL applications using Three.js within a Visual Studio Code environment on Windows.

Installing and Running

1. Install Visual Studio Code from https://code.visualstudio.com/download

2. Start VS Code, click the 'Extensions' button, and install the 'Live Server' extension. It will add a button to the status bar.

3. Start Live Server by clicking the button in the status bar, and take note of the port number (default = 5500)

4. Debugging on Windows

   • There is no support for backlight switching on Windows yet. Until support is available, you must comment-out lines that reference the BackLightController variable. Despite no backlight, everything else should work as expected.

   • From 'Run and Debug', select 'Launch Chrome/Edge against localhost.'

5. Running on LumePad

   • Ensure both your Windows and LumeTab systems are on the same WiFi connection.

   • From Windows:

     • Open a command-prompt, run "ipconfig" and take note of the IPV4 address.

     • Ensure the Live Server is running in VS Code.

   • From LumeTab: Start Chrome and enter <Wifi IPv4 Address>:<Live Server Port Number>(e.g. 192.168.1.1111:5500) into the address bar.

Details

This example is a simple port of Example 1 to support easy development within Visual Studio Code.

The ability to switch between regular 2D rendering and multi-view lightfield rendering is supported by clicking on the window canvas.

There are three main functions of interest:

• init(): This function is similar to Example 1. It performs all requires initialization, camera setup, resource allocations, and finally triggers the render loop.

• render(): This function enhances Example 1 with the ability to perform 2D rendering as well as multi-view lightfield rendering.

• onMouseDown(): This function performs three main tasks:

  1. Performs backlight switching

  2. Switches render-target to the framebuffer for 2D mode and the single offscreen render-target for lightfield mode.

  3. Perform change to Three.js scene-graph to enable/disable multiple cameras.