@angular-three VR Examples

[IRobot1]

If you need examples of doing VR with @angular-three, see this repo and demo

Some of the functionality will eventually be moved into reusable @angular-three/webxr library.

[IRobot1]

Added ng3-webxr for easily adding Web VR or AR functionality to an NGT project.

[IRobot1]

Updated VR Demo to include example of movable cameras and texture that shows the output of a camera.

Use left controller to grab and move the cameras around.
Use right controller to teleport around the room.

[IRobot1]

Updated VR Demo to include paint example.

Pull trigger to paint
Joystick up and down to increase or decrease brush tip size

paintbrush is a directive that can be added to vr-controller and dynamically enabled or disabled.

[IRobot1]

Updated VR Demo to include HTML GUI example.

Use pointer to interact with geometry properties inside a HTML Mesh panel.

[IRobot1]

Updated VR Demo to include model scaling example.

Pull trigger on left and right controllers to start scaling model.
Move controllers closer to reduce scale.
Move controllers apart to increase scale.

Note the model does not appear correctly when visiting the room a second time. Bug report pending.

[nartc]

@IRobot1 Hey, I have just released a beta version for v6, 6.0.0.beta-0, to add support for Angular 14 (14.1) and THREE 0.142.0

I don't have VR so can you try it out on VRs?

[IRobot1]

Sure can

[nartc]

Make sure to upgrade Angular to 14.1

[IRobot1]

Updated VR Demo to include interactive buttons

Buttons highlight/unhighlight on mouse or pointer hover.
Click or pull trigger to click button.
Animation is an optional directive that can be enabled on button.
Button can contain optional text and scaled as needed.

[IRobot1]

Updated VR Demo to include interactive wall

Wall is an image converted to instance mesh of cubes colored to match pixels.
Click or pull trigger to explode image
In VR, point at wall to highlight pixels. When exploded, highlighted pixels are returned to wall

[IRobot1]

Updated VR Demo to include hierarchical diagram using force directed graph.

Network hierarchy uses ngraph graph and forcelayout to layout the diagram. Nodes and links are rendered via NGT using position data from forcelayout. NGT objects are gradually added to the scene to avoid stutter when in VR.

Network diagram is standalone component with options to adjust labels, font, size, colors and animation.

Data was taken from Highcharts network diagram sample code. I highly recommend using Highcharts for any professional charting work. License price is reasonable and nice company to work with.

[IRobot1]

Updated VR Demo to include basic 3D spirograph drawing.

Drawing is done by rotating two arms. One arm is attached to end of the other. The pen tip is at the end of the second arm. A tube mesh is generated.

GUI allows

• adjusting rotation direction and rate of each arm
• adjust speed of redrawing mesh
• Saving mesh to either PLY or STL formats (GLTF format isn't working for some reason). Leave VR to see downloaded files in browser.
• Model color (when not in VR)

Lots of possibilities to improve this demo.

[IRobot1]

Updated VR Demo to include artificial life

In VR, use pointer to adjust the gravity between particle color interactions

Original idea from this YouTube video

[IRobot1]

Updated VR Demo to include loading SVG icons into extruded meshes.

Icons change every 30 seconds. Based on data from simple icons

[nartc]

@IRobot1 Dude, I have absolutely no words to describe my appreciation to what you've done. This is amazing. Time has been a luxury for me to tend to Angular Three and man, seeing you putting out examples using it puts a smile on my face and sets my motivation high. Thank you for doing what you do.

[IRobot1]

Updated VR Demo to include directed acyclic graph example.

Limited to 2D, but better layout management than forced layout. Forced layout works best for tree structured data.
DAG is the underlying technology used by mermaid diagraming and D3

[IRobot1]

Updated VR Demo to include object bounded collisions example

Use left controller to pop boxes, right controller to pop spheres.

This demonstrates having collision groups where the user's hand/finger is the source of collisions within a group. Box collisions are object bounded instead of axis align bounded for more precise overlap detection.

Dispatch events fire on both meshes when collision beings, while colliding and when collision ends. Angular events fire on VR controller on collision begin and end.

This is the foundation for creating a UI (buttons, sliders, menus) within a three scene without the need for physics collisions. Collision manager does not require VR, but does require something to keep calling Check Collisions method regularly.

[IRobot1]

Updated VR Demo to include UI components and draggable/resizable windows

Controls include label, button, icon button, radio button, check box, toggle slider, number, text, drop-down list.
Input methods include color picker, keyboard, number pad and list.
Panels contain controls and can be dragged and resize. They can also be collapsed to save resources and expanded when needed.

In browser view, use touch and mouse to interact with controls. Dragging is only along x and y axes.

In VR mode, use pointer to interact with controls. To drag, highlight title and pull trigger to grab. Click button to expand and collapse.

Close button is not implemented since there's no way to reopen, but you get the idea.

This is a foundation for other flat UI controls. Multi-line text box, chips, date/time pickers, tabular grid, tabs, stepper and tree should all be possible. Theming should also be possible and might be added in a future update.

Use vertical-layout directive to automatically stack groups or controls vertically. No need for manual positioning. Similarly, use horizontal-layout directive to automatically position horizontally. Both directives support an optional margin (x for horizontal and y for vertical) to add spacing between controls.

[IRobot1]

Major performance improvement. Now uses shared materials to improve resource usage. Geometry and Materials can be overridden for custom look. Drag panel (window) can now be resized.

Next up, layout improvements and adding support for table/data grid.

[IRobot1]

Updated VR Demo to include some animated loading shapes

Shapes, colors, materials and animation speeds can be customized.

[IRobot1]

Updated VR Demo to include NGT version of lil-gui

NGT

Original lil-gui

So far, supports basic example. Works in browser and VR mode.

[IRobot1]

Updated VR Demo to include in-scene stats panel.

Each specific panel can be added to a scene.

Stats can also be placed in a UI for easy movement and interaction around the scene

Click to change between FPS, MS and MB.

[IRobot1]

Updated VR Demo to include UI tab and data grid components. Grid supports optional pagination component. Header, footer and data cells configured using ng-templates.

[IRobot1]

Updated VR Demo to include a basic Kanban board. Uses new card, avatar, divider and material icon UI components and updated list and button components using ng-template. Task cards can be dragged and dropped between columns.

The number of columns can be customized
The type of tasks, color and icons can be customized
The avatar icons can be customized

Would still require a lot more effort to make it fully re-usable.

[IRobot1]

Updated VR Demo to include examples of jdenticon and DiceBear Avatars. jdenticon's can be rendered to a texture or SVG geometry. Avatars demonstrate SVG geometry only due to overlapping shapes.

[IRobot1]

Updated VR Demo to include path editor that works booth in browser and VR. This was inspired by SvgPathEditor (yqnn.github.io)

Uses new mini menu UI component for choosing next curve type. Menu buttons support either text label or material icon.

The following keyboard shorts are supported

• L - add line
• V - add vertical line
• H - add horizontal line
• C - add cubic curve (2 control points)
• Q - add Bezier curve (1 control point)
• Del - delete current path command

There's options to show/hide the grid and points, preview as extruded and lathed geometry.

[IRobot1]

Updated VR Demo to include examples of using Pexels API to search and show photos and videos.

UI supports entry of key before API can be used. Use the paste icon to paste key and Enter to continue. Key is saved as a cookie.

Works on desktop and in VR. Sound works on video. Controls to mute and loop a video.

Using this as a foundation, should be possible to create image galleries (carousel) or video media player with controls and sound effects.

[IRobot1]

Updated VR Demo to include charts. Pan around and zoom in for closer look.

Bar charts using Angular templates allows customizing axis text and labels above bars. Chart supports custom geometry for each bar.
Stacked bar charts support flat or pointed top and shape
Line plot supports showing markers and live value updates
Area plot supports live value updates
Pie chart supports adding space between segments
Components for grid and simple axis presentation. Both support custom width and height.

All charts allow customizing materials/colors. None are interactive.

The following image was used as inspiration for creating these basic chart components

[nartc]

Hi @IRobot1, are you good with recording videos on the VR stuffs as maybe not a lot of people have VR set to check out these examples?

[IRobot1]

Most don't require a VR headset to full use. However, they're best experience is with a headset. I'll make it clearer which one's required a headset.

As for recording videos, I haven't done this for years. Its on my to do list. This may all change with your new version. so I'll holding off until all the examples and project are migrated to the new version.

I was planning on doing some walk throughs on re-creating some of the examples from scratch and cover some does and don'ts.

In the mean time, if you want to mention the examples in a future video, that might be a good place to start. Its a huge body of work with lots of working examples and variety of technologies in one place.