This part of the tutorial uses HTML elements to place labels at the compass points (east, west, north, south), as well as up and down. The purpose is to demonstrate how to place content near the user, such that it moves with them but has a fixed orientation relative to the earth, as well as demonstrating creating HTML content on the fly.
This example also demonstrates how to decouple the render update listener from Argon so that it runs in response to requestAnimationFrame() and shows how to leverage CSS to hide/show HTML content when the Argon-enabled web page looses/gains focus (i.e. another web page is selected and brought to the front or this page is selected again).
The structure of the code for this examples is very similar to previous parts of the tutorial, so most of the standard setup code is not repeated here. This example uses the CSS3D and HUD renderers and moves the “description” text in the
index.html file into the HUD (as previous examples did).
One addition to the CSS embedded in the HTML file fades out the “description” text when the web page loses focus (referred to as blur) and fades it back in when the application gains focus. To do this, the example leverages the
.argon-no-focus classes, which Argon adds and removes to its view element in response to blur and focus events.
You can also explicitly listen for the
app.blurEvent similarly to the update and render events.
The six directional objects are HTML elements rendered using the CSS3D renderer introduced in part 2 of the tutorial. (Part 6 places 3D text at these locations using WebGL, as part of demonstrating how to illuminate virtual content with light coming from the direction of the Sun and/or Moon).
The elements are located relative to the user’s location (where the phone is) by adding them to the
userLocation object, rather than being absolutely located in the world. In previous parts of the tutorial, the user’s current location was copied to the three.js
userLocation object using code similar to this:
Notice that only the position of the
userPose is copied to
userLocation, not the orientation. The default orientation is the identity matrix, orienting the user with its parent frame, which in this case is the local reference frame. The result is that the
userLocation object is positioned where the user is, but does not rotate with the user.
The six direction elements are created on the fly:
These six HTML elements are used to create six
CSS3DObjects, which are positioned along their respective axes, and attached to the
userLocation object. The objects are positioned in the local reference frame around the user location, using the EUS (east, up, south) system. Each object is also rotated, where necessary, to face the user.
The update and render event listeners are similar to those in the previous parts of the tutorial.
One important change in this example is that the render event listener is decoupled from the actual rendering using
requestAnimationFrame(renderFunc). This is useful in two ways. First, the DOM will only be repaired once after
renderFunc() completes (assuming you do not do anything to force a repair during rendering). Applications with significant HTML content, especially content that changes frequently, will see better performance using this approach. Second, while not applicable in this example, if the application has a slow render update listener, decoupling the renderer from the update callback can help the application degrade more gracefully.
Notice that the render event listener will not call
requestAnimationFrame(renderFunc) until the previous rending has completed and
rAFpending is reset to