Creating a Virtual Reality Web App with Blender and Three.js

Master blender basics for a virtual reality web app by understanding the axis orientation where Y is front and Z is vertical, and learn common hotkeys for navigation and modeling.

Create the base of a house in Blender with a plane, subdivide to 9 faces, extrude to 4 m, and shape rooms with precise measurements.

Create entrances and windows in a Blender workflow by inserting vertical and horizontal loop cuts, deleting faces, and connecting rooms for a VR web app with Three.js.

Select wall faces with shift left-click. Move in top view, insert loop cuts with Ctrl R, and remove window faces with X to form entrances and windows.

Create the roof and floor by selecting vertices in x-ray view, using edge fill and separation to form faces, then duplicate the roof downward to form the floor.

Extrude the roof in edit mode, scale it along the x and y axes without height change to fit the house outline, adjust uneven faces, then extrude the floor downward.

Design the roof for each room by entering edit mode, selecting roof faces, and extruding upward in front view to form pyramid or cone shapes.

Add width to the walls with Blender's solidify modifier, setting thickness to 0.3, then use complex mode and offset 1 to align with the floor and roof.

Obtain lightweight texture files from Polyheaven and apply them to three-dimensional figures to speed up loading, using the same textures' roughness and normal maps for detail.

Learn to apply wall textures in Blender using image texture and node setup, including roughness and normal maps, UV editing and cube projection.

Assign a second material to the figure to represent the walls inside the house. In edit mode, select interior faces with shift left-click and press assign to apply the material.

Assign a second material to the interior walls by creating and configuring nodes in the shading area, then adjust the vertex size in UV editing by pressing S.

Apply textures to the roof and floor by configuring shading nodes and mapping images to vertices in the UV editing area.

Verify face orientation, recalculate normals to ensure outward surfaces, set origin to the center of mass, and apply scale to finish the house model for the vr web app.

Delete the predefined content, create a cube for the house, apply image textures with roughness and normal maps, and adjust UVs via cube projection to fit the scene.

Import house model into the Blender scene with append, select the .blend file and collection, then position the figures using side and front views along the y and z axes.

Export the adjusted blender scenario to glTF 2.0 for use in other applications. Center the figure, scale with ctrl a, set origin to center of mass, then name and export.

Learn to build a virtual reality web app using Three.js and Aframe by loading glb scenes, applying physics with enable3D or cannon-es, and configuring VR workflows.

Configure a webpack project by initializing with npm, installing webpack and webpack-cli, editing package.json, creating src and dist with index.js and index.html, and adding a build script.

Install three.js, aframe, and enable3d by running npm install commands; add as dev dependencies, noting aframe may take over two minutes.

Edit index.html to configure an aframe scene with webxr using referenceSpaceType local and a sky texture. Build a camera setup with look-control and a central cursor for raycasting.

Import three.js and aframe, set up glb loading with GLTFLoader and physics with AmmoPhysics, and initialize core variables like scene, camera, cursor, gamepad, and clock.

Create the scene_update component using AFRAME.registerComponent, implement a tick function that calls scene_custom_update, and prepare the scene_custom_update function for future use.

Configure the entry point to detect physics libraries with enable3D, load ammo.js via PhysicLoader on DOMContentLoaded, and set up the MainScene and dist/lib with ammo.js files.

Implement the MainScene function to bind index.html's a-frame elements to scene, cursor, camera, and wrapper, initialize AmmoPhysics via Enable3D, and create a white transparent camera physics sphere with constraints.

Learn to load a glb with data using loadGLBWithData and loader.load, traverse glb.scene to identify Mesh objects, and apply physics as static concave models (mass 0, collisionFlags 1) with enable3D.

Implement the scene_custom_update to read the gamepad with navigator.getGamepads, assign the joystick, and trigger movement and desktop rotation when ready; update physics with clock.getDelta() * 1000 and run the debugger.

Create movement function to compute camera direction with THREE.Vector3, derive side direction, read gamepad axes to move, normalize, apply velocity, cap Y, and update wrapper position with camera height.

Implement the desktop_rotation function to rotate the camera on desktops using the second joystick, updating yaw by subtracting Math.PI/100 * gamepad.axis[2] and pitch by adding Math.PI/100 * gamepad.axis[3].

Choose a panoramic image from polyhaven and apply its jpg representation of the HDRI as the background for the virtual reality web app.

Create a texture folder inside dist and drag the image into the folder to set the background texture.

Learn to run a local https server for a virtual reality web app by generating a temporary certificate with openssl and placing key.pem and cert.pem in the dist folder.

Configure a webpack.config.js to set the source and output paths for the VR web app, and add the target = node setting to prevent npm run build issues.

Create the main.js file and run npm run build to generate the dist output for your vr web app. Note that the command may take time to complete.

Run a local server for the virtual reality web app using http-server, navigate to the dist folder, and launch with http-server -S -C cert.pem to obtain two local network addresses.

Open the virtual reality web app in the browser, use a two-stick joystick to explore the scene, verify physics, enter the house only through entrances, and walls block movement.

Create the base object in Blender by modeling a 1x1 frame to hold an image, then inset and extrude to form the front face that will display text on interaction.

Apply image textures by creating a new material and assigning an image texture to the target face; unwrap and rotate UVs to straighten and fit the image.

Add a custom property in Blender 3 or newer, configure a string property named MyText, and set its value to Hello World to display text in the scene.

Adjust the figure by setting its origin to the center of mass, scaling the model, and saving changes for the Blender and Three.js VR app.

Append the frame to the scene by importing from the file and selecting the collection. Place the frame inside the house and move it with the G key.

Re-export the stage as a glb file using glTF 2.0, overwriting the existing file and including custom properties.

Create interactive virtual reality objects with a proxy to trigger events. Set up main_button, its handler, and a proxy that fires when value equals 1 and stores value in target.key.

Create a raycaster interaction in a Three.js scene, using the cursor and intersectObjects to select objects and pass MyText to insert_text_panel, accounting for grouped objects with multiple materials.

Create a text panel in a virtual reality web app by defining text_panel, configuring a plane geometry, color, and text, rotate toward the camera, and remove after four seconds.

Create the action_button function that sets main_button_proxy.value to gamepad.button[0] when main_button.value differs. Use the first detected button for cross-model compatibility and invoke main_button_handler during the scene_custom_update.

Remove the enable3d code that activates the debugger to prevent the raycaster from treating it as an interactive object, ensuring smooth interaction in your VR web app.