Three.js 3D floorplan and rendering

Hi,

inspired by the topic (Proof-of-concept) Interactive WebGL view with HABPanel & Sweet Home 3D! I wanted to visualize the lights and shadows dependent on the actual item state in a 3D floorplan. Thanks to lots of examples of three.js, sweethome3D Blender and this community I managed to do that.

Features:

  • Ligths and Temperature visualization and GUI
  • Window Sensor
  • Time of Day dependant environment
  • Ground Floor and 1st Floor

I made an additional file with the sweethome3d example so you can play with.
Check out the code on github: https://github.com/helpmeifyoucan/habpanel_threejs
I’m sure there is a lot of possibilities for optimization (and comments)

11 Likes

Hi JL and welcome to the OpenHAB community!!! Very nice first post
Very impressive!

1 Like

:clap:

Hi, that is what I’m searching for so long!

It looks realy great! I would like to reproduce it.

I copied all files according your guide into the folder “three” (openhabian folder). I found the most files in the repository: UNPKG - three

Unfortunalety, I’ve an error:

Effect: No floorplan is loaded:

Maybe something with the declaration in “T.directive.js” line 139:
image

It looks like there is no instance of >>container<<

My Javascript knowledge is not good enough. Can somebody help me?


Operating system: Windows
Openhab version: 2.5.6

Hi @urban4,
probably a different version of the jquery or another lib? Please take a look again at the project in github. Another user added links to the necessary files from different sources. Maybe you can use those files instead.
Another suggestion: you could set the containerwidth & containerheight to default values (e.g. 1000) in line 139/140 & 604/605 to see if the problem still exists (the size of the model is then not fit to your screen)

I got the same problem, no floor plan loaded …

Hi guys (@helpmeifyoucan, @phui)!

With the help of my friend we found out that the $ sign is not recognized by the interpretor.

I changed all directives, starting with $(…) to jQuery(…). After that everything works fine.

I hope this help you too!

Do you mean changing all $(…) to jQuery(…) in T.directive.js ?

Facing same issue but no response from anyone and still searching for some proper solution.

MyAARPMedicare