Circular control used for walkable areas control

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 https://xprofan.net/intl/de/php,html,js/3d-grafik-webgl-mit-three-js/?&pg=14
up to https://xprofan.net/intl/de/php,html,js/3d-grafik-webgl-mit-three-js/?&pg=19 )
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/showroom/CircularControl.js
https://hofk.de/main/threejs/showroom/AreaControl.js

https://github.com/hofk/threejsResources/tree/master/Circular-%20Area-Control


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)
https://hofk.de/main/discourse.threejs/2018/HumanEyesCamera/HumanEyesCamera.html 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.

2020-04-02 21.09.06 2020-04-02 21.12.41 2020-04-02 21.02.15 2020-04-02 21.16.41

See the source code from https://hofk.de/main/threejs/showroom/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/showroom/AreaControl

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.

2 Likes

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.


2020-04-03 15_49_54-Might is Right

Personally I’m a big fan of circular menus :slight_smile:

1 Like

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/.

2 Likes