web-sdk

This repo is a mono repo containing all threejs related roomle projects such as planner and configurator.

Installing

Use npm install to install all prerequisites -> go grab a coffee, this takes a while.

Building and serving

You can launch the following commands with yarn or npm run:

• "clean": cleans all generated files in the dist folder

• "buildSdkDebug": creates a debug version of the SDK build, includes configurator, planner, glb viewer and material viewer

• "test": start unit tests for all packages

• "dev": build the project in watch mode and start the local server at port 4141, shows only dummy pages

• "plannerUi": build the planner WITH UI in watch mode and start the local server at port 4747

• "configuratorUi": build the configurator WITH UI in watch mode and start the local server at port 4747

Develop Dummy URLs

• HSC: http://localhost:4141/configurator-dummy.html

• HSP: http://localhost:4141/planner-dummy.html

• GLB Viewer: http://localhost:4141/glb-viewer-dummy.html

• Material Viewer: http://localhost:4141/material-viewer-dummy.html

Develop URLs with UI

• HSC: http://localhost:4747

• HSP: http://localhost:4747

Design decisions/ general info

• Common files/classes used by all/multiple projects should be saved in 'packages/common-core'

• Each package has a 'src' directory for classes and a 'public' directory for static files like styles/fonts/etc.

• Using rollup instead of webpack for smaller files/chunks

• Trying to use only rollup plugins for the build process

Batch render glTFs

Steps:

You have to prepare a special render list file, that holds information about assets and camera positions (see example below)

• terminal cd project folder and execute yarn run dev ( alternative npm run dev )

• open http://localhost:4141/glb-viewer-dummy.html

• put the prepared renderlist.json into the upper left textfield

• click "process JSON" and wait for a file named "content.zip" to be created and downloaded

renderlist example file:

{
  "items": [
    {
      "camera": {
        "fieldOfView": 14.652813364164818,
        "position": {
          "x": -1.6141633987426758,
          "y": -2.7860729694366455,
          "z": 1.5453431606292725
        },
        "rotation": {
          "x": 1.2217304706573486,
          "y": 0.0,
          "z": -0.5235987901687622
        }
      },
      "path": "/path/to/asset.glb"
    }
  ]
}

CI

Run a GitHub Actions workflow locally

• Install docker desktop

• Install act (https://github.com/nektos/act)

• Create a .secret file (https://github.com/nektos/act/blob/master/README.md#secrets)

Create a new file websdk.secrets inside the .act dir of this project.

Add this content to the new file:

SSH_HOST=""
SSH_PRIVATE_KEY=""
GH_TOKEN=""
NPM_TOKEN=""
WEB_CI_PRIVATE_TOKEN=""
ROOMLE_UI_ACCESS_TOKEN=""
VUE_APP_DUMMY_USER=""
VUE_APP_DUMMY_PASSWORD=""

Run:

## for current branch
act --container-architecture linux/amd64 -j release --secret-file .act/websdk.secrets
# verbose logging
act --container-architecture linux/amd64 -v -j release -e .act/cd-release-dev.json --secret-file .act/websdk.secrets
# for specific branch
act --container-architecture linux/amd64 -j release -e .act/cd-release-dev.json --secret-file .act/websdk.secrets
act --container-architecture linux/amd64 -j release -e .act/cd-release-test.json --secret-file .act/websdk.secrets
act --container-architecture linux/amd64 -j release -e .act/cd-release-live.json --secret-file .act/websdk.secrets

Notes

Getting static file URLs.

When you want to get the URL of a static asset you need to append the file location with '?no-inline?url' in the same order as shown. Example:

import LIGHT_SETTINGS_SOFA_FILE_NAME from '../../public/predefined_lightsettings/sofa.json?no-inline?url';

When building the SDK, Vite will turn the file location into a relative URL.