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