Creating an Augmented Reality Web Page. Blender and Three.js

Model the house base in blender by adding a cube, extruding edges to create two floors and a roof, using metric units and precise edge lengths.

Select the roof faces and extrude them upward along the global z axis. Extend the selected area, then extrude outward to shape the base.

Prepare door and window areas; insert vertical loop cuts with Ctrl R. Make the door area about 1 m, add two cuts 0.5 m from center, then split rooms vertically.

Select the faces for the windows, inset them individually, and set the windows' height to about 1 meter for your augmented reality web page with Blender and Three.js.

Create door and window frames for an augmented reality web page by selecting edges and faces in Blender and applying a bevel to both door and window frames.

Add volume to door and window frames by extruding outward from the front frame, using shift left-click and E, repeat on each side with numpad 1, 3, and 9.

Create an attic with two windows in Blender by intruding, beveling, and extruding faces, then form a chimney by intruding the roof and extruding upward for a complete Three.js scene.

Detail a house design by inserting loop cuts, extruding faces outward, and assigning materials; divide windows with two horizontal loop cuts and select the upper faces for material.

Add four empty objects to mark camera positions around the house in augmented reality scene, using top view and axis moves to place them at north, south, east, and west.

Add a point light, adjust its power in three.js, clone it, and place two lights southeast and northwest of the house from a top view, then move them up.

Initialize the electron project by running npm init -y, then install electron, qrious for QR code generation, and jsqr for reading QR codes.

Create the electron entry point main.js, configuring app lifecycle, BrowserWindow, and ipcMain; set a 1200x900 window with preload, hide the menu bar, load index.html, and handle activation and window close.

Create index.html with base html structure, electron security metadata, and style.css, then add a header, header/footer inputs, and buttons for add, remove, image, check, and save QR code.

Import preload.js modules such as QRious and jsQR, and ipcRenderer to emit signals to the main process, then initialize and reference the canvas, title, bottom, and ctx on DOMContentLoaded.

Define and utilize the AddSection function to dynamically build a form that collects data for QR code with labels and inputs, appending to divs and wire the click event.

Implement the RemoveSection function, collect all div blocks inside properties_section, delete the last element if present, and wire the Remove button to trigger RemoveSection on click.

Create the CreateImage function, loop through properties_section divs to build a dynamic data object, then clear the canvas and render a QRious image with header and footer text.

Create the CheckImage function, capture image data with ctx.getImageData, run jsQR on imgData, and send the decoded code to the main process via ipcRenderer after clicking the Check button.

Modify main.js to receive preload messages via ipcMain.on and display them with dialog.showMessageBox. Enable saving code with ipcMain.on(save), showSaveDialog, and fs.writeFile with base64 encoding.

Apply the style sheet to a black-background page with Verdana text and a flex layout. Configure header, main, and sections with padding, rounded borders, and a scrollable white text interface.

Modify package.json to set the main input file for electron, add a private flag to prevent publication, and create a start script to run the app with npm start.

Adjust preload.js by adding size, padding, and full_size variables to define the code area; use a base size of 500px and 100px padding to satisfy QRious configuration.

Experience a live demonstration of how the augmented reality web page application works and learn to generate your first code as you run the app.

Initialize a web application for augmented reality by installing webpack, jsqr, and three.js. Install aframe and ar.js to manage 3d models in AR, noting compatibility considerations between aframe and ar.js.

Create the project structure for an augmented reality web page using Blender and Three.js, organizing dist and src, adding index.js, index.html, style.css, and a Models folder with the glb file.

Build the index.html structure with metadata, link webpack-generated main.js and style.css, and add an a-scene with arjs, an a-camera reads rotation, and a button to capture images for QR codes.

Style the button with position:absolute in the upper left (top:0, left:0) and apply padding, border, border-color, border-radius, background, font-weight, font-size, and color, while hiding the arjsDebugUIContainer with display:none.

Import three.js tools, use jsQR to read QR codes, load a 3D model with GLTFLoader, create a-scene, camera, and group, then connect MyButton with Scan and initialize on DOMContentLoaded.

Create the scan function to access the arjs-video camera, obtain image data, run jsQR, and loadGLBWithData when a QR code is found; otherwise prompt to try again.

Implement GetVideoImageData by creating a canvas sized to video_element, getting a 2d context, drawing camera data with ctx.drawImage at full width and height, and returning image data via ctx.getImageData.

Load a glb model with loadGLBWithData, clear and reload the scene on each QR read, traverse to set point and look_at, then MoveRotateCamera to reposition the camera.

Create the MoveRotateCamera function to compute new_position and look_at_position with getWorldPosition, set camera.object3D.position.set to new_position, and compute y_rotation from current_direction and target_direction using acos and cross product via look-controls.

Modify the package.json to delete main:index.js, add private:true to prevent publishing, and add a build:webpack script to generate main.js with npm run build.

Set up an https security certificate for local hosting of the augmented reality web page by navigating to the dist folder and generating the certificate with openssl.

Create and configure a webpack.config.js by defining a path variable, importing path, exporting module configuration, and specifying entry and output with the input file, plus setting the target to node.

Fix bugs in index.js, add point and look_at variables, then build main.js with npm run build; if successful, main.js appears in the dist folder.

Prepare QR codes for real scenario testing by printing them on letter size sheets. Secure the codes on a cork board to keep them in place for reliable use.

Showcases how an augmented reality web page works in a real scenario, with flexible location choices at the city edge to maximize space and minimize conflicts with cars and people.

Complete the course and master the basic steps to create your own augmented reality application, with downloadable code, 3D model, and instructions in this chapter.