Circular control used for walkable areas control

[hofk]

In 2018/2019 I worked to generate showrooms flexibly from dimensions and coordinates in data fields. Some details about this can only be found in my German forum posts
( from PHP, HTML & JavaScript- Forum/3D Grafik - WebGL mit three.js XProfan
up to PHP, HTML & JavaScript- Forum/3D Grafik - WebGL mit three.js XProfan )
Because of the more interesting project
Addon for triangulation of implicit surfaces/ forms with holes
I have interrupted the work and now resumed it.

---

source
https://hofk.de/main/threejs/CircularControl/CircularControl.html
https://hofk.de/main/threejs/showroom/AreaControl.js

threejsResources/Circular- Area-Control at master · hofk/threejsResources · GitHub

---

The walk of a visitor through the room must be controlled.

Collision detection is however quite computationally complex.

Therefore I defined walkable areas. The movement of the visitor should be quite simple with the mouse on a movable control area. Additionally with keys.

Thanks to the help of @prisoner849 I have in the Collection of examples from discourse.threejs.org
(uses keys w s a d and others)
HumanEyesCamera as a template.

For the control panel I first created a flexible configuration to made a selection after tests.

The control panel needs some HTML/CSS. I am not an expert in this, maybe there is something that can be optimized? I did it with Firefox, but it also works with Chrome and Opera. I can’t test Safari.

See the source code from CircularControl
It can be moved with the center circle.

---

Before I continue working on the showroom, a functional test of the walkable areas.

https://hofk.de/main/threejs/CircularControl/AreaControl.html

So that one can see the visitor himself, I have attached a large mirror. The walkable areas are colour-marked circles, rectangles and triangles that border or overlap each other. You can walk around a few colorful test objects. Number pad keys and cursor keys also control the visitor. See the source code.

The camera sits between the eyes in the nose. This is commented out in the code.

---

This is what an example of a showroom created from data currently looks like.

[Usnul]

Looks pretty good! I used something similar for Might is Right. I see you have support for multiple rings. My implementation only supports one ring. Icons and text.

Personally I’m a big fan of circular menus

[hofk]

@Usnul

I see you have support for multiple rings

There is certainly room for improvement. As I wrote, I do not have much overview and practice with HTML/CSS.
I just collected the necessary things and mostly use https://developer.mozilla.org and https://www.mediaevent.de/.

[minimamente]

Love this, thanks for share. I will create an interactive room. I will use your great example.