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
Install Visual Studio Code from https://code.visualstudio.com/download
Start VS Code, click the 'Extensions' button, and install the 'Live Server' extension. It will add a button to the status bar.
Start Live Server by clicking the button in the status bar, and take note of the port number (default = 5500)
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.'
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:Performs backlight switching
Switches render-target to the framebuffer for 2D mode and the single offscreen render-target for lightfield mode.
Perform change to Three.js scene-graph to enable/disable multiple cameras.
Last updated