Showrooms easy to generate from data of a construction drawing or dimensional sketch - now on Github

2022 - now on GitHub - hofk/SHOWROOM: Showrooms easy to generate from data of a construction drawing or dimensional sketch.

Try it out. You look in the mirror first. Walk around. SHOWROOM

You will find a whole range of tools for displaying buildings and rooms along with their furnishings. Among them are both firmly defined and interactive ones.

In this case, the basis for the design of flexibly configurable rooms is a construction drawing or a simple dimensional sketch.

The data is written in compact form in a simple text file (.js) according to a given scheme. For optional values you can define the defaults yourself. After each new entry you can see the result immediately after updating the page. So you can react immediately in case of an incorrect entry.

On the other hand you can simply put two slashes // in front of a line and remove elements temporarily.

The compact form of the data initially requires increased concentration during input. After a little bit of practice you can quickly play through different scenarios.

By specifying less data, lighting, mirrors and 3D models are also integrated.
With the definition of colors and the assignment of materials and multi-materials, the rooms can be designed individually.

See description
showroomDesignEN.pdf (367,8 KB) or showroomDesignDE.pdf (370,2 KB)
and example files
showroomDesign.js (12,7 KB) materials.js (4,8 KB)
for the pictures.

The program has a modular structure and can easily be expanded with additional elements and effects as required. Most things are implemented as self defined non-indexed BufferGeometry.

So far the following things are available:
lighting, floors and ceilings (with individual level also ramps and roof slopes), walls with openings (extra materials) and soffits, archways, round walls, components with variable shell function, mirrors, frames (to be generated with ConstructFrameShowroom.html, an adjusted Vaiante of ConstructFrame.html, see Construction of frames with contour/profile), placement of 3D objects (Gltf and Obj/Mtl), environment texture.

The structure of the program:

see also Jerky camera movement with many objects

The movement of an viewer in the showroom is done with a specially designed control or the keyboard (cursor keys, number pad). The gaze can be directed up and down. You define the accessible areas in the form of adjoining or overlapping rectangles, circles and triangles.
See Circular control used for walkable areas control

The absolute size of the control can be changed with the display size of the browser. The 3D scene is not affected. The center circle of the control is used to move the control. A double click on it shows the forward speed in the new version. This can be changed with the slider. Another double-click on the center of the control hides the speed again.

The Gltf 3D model of the viewer can look at his feet and see himself completely in the mirror.

Separate folders are available for materials, 3D objects, frames, environment texture.

The sample images often show the control texture. Here you can see the variants of the determination of the uv-values for the use of sections of a texture. The few other textures were either downloaded (free), photographed by myself or created with the graphics program Krita . Since I am not a painting artist, they are quite simple.

start position and angle, viewer(girl) in the mirror

as seen from the outside


Hm… I like this idea, but the final presentation seems to kinda sabotage it. On the screenshots, it’s just a bunch of sharp shapes, disconnected floors, and placeholder textures.

Wouldn’t it be better to present for example a virtual recreation of a car dealership, or an art showroom? (Most, even tiny, cities have at least 1 car dealership or cultural gallery of some kind - should be enough to take a few pictures and based on them create a virtual preview :thinking: )

1 Like

I can understand this opinion. In my German forum someone wrote (translation ) “Please remove all rainbow-colored areas and dimensioned pictures from the demos. That’s the only thing that still bothers Normalos.”

At first I am only interested in the presentation of the concept. If you look at my addons hofk (Klaus Hoffmeister) · GitHub , you will see that I am interested in mathematical structures and interesting algorithms. As I wrote I am not an artist, nor a good photographer.

Exactly for this purpose it is intended that somebody can create and present his own object in a simple form without knowledge of JavaScript (except for the compliance of some rules for brackets, comma and semicolon in the design files).

1 Like

Yup, that’s what I thought. :grin:

1 Like

from 2022

Showrooms easy to generate from data of a construction drawing or dimensional sketch.

now on GitHub - hofk/SHOWROOM: Showrooms easy to generate from data of a construction drawing or dimensional sketch.

see original post
Try it out. SHOWROOM