ifcjs/docs

TOC | documentation | demo | community | npm package

That Open Docs

This library contains the official docs for all the libraries of That Open Company.

• It uses docusaurus to build them.
• It gathers code from our repos and build the API docs using TypeDoc.
• It gathers the HTML examples from our repos and build the tutorials.

If you see anything outdated in the docs page, feel free to open an issue. If the issue is specific to a specific repository, please open the issue in that repository!

If you have any questions, you can also ask around in our community.

docs's Issues

Creating Components Tutorial, Retrieve Tools outdated.

Describe the bug 📝

In this tutorial the retrieval of tools is explained like this:

const hwTool = await components.get(HelloWorldTool.uuid);

but it works with the tools attribute and without the uuid like this:

const hwTool = await components.tools.get(HelloWorldTool);

Also the tutorial should note, that the retrieval only works, if the components constructor doesn’t get other parameters than OBC.Components. If the class needs more to function, I would recommend to write a setup() Method that takes everything else.

Reproduction ▶️

No response

Steps to reproduce 🔢

No response

System Info 💻

Not needed since the error is in the content of the docs

Used Package Manager 📦

npm

Error Trace/Logs 📃

No response

Validations ✅

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a repository issue and not a framework-specific issue. For example, if it's a THREE.js related bug, it should likely be reported to mrdoob/threejs instead.
• Check that this is a concrete bug. For Q&A join our Community.
• The provided reproduction is a minimal reproducible example of the bug.

Doesnt shows my IFC fiñe

Describe the bug 📝

I'm trying to use the package of IFC.js but it doesn't works for my IFC file, I'n not sure what could be happening because it works with others viewers. But I'm using it with others IFC files and it works

Reproduction ▶️

No response

Steps to reproduce 🔢

No response

System Info 💻

nO

Used Package Manager 📦

npm

Error Trace/Logs 📃

No response

Validations ✅

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a repository issue and not a framework-specific issue. For example, if it's a THREE.js related bug, it should likely be reported to mrdoob/threejs instead.
• Check that this is a concrete bug. For Q&A join our Community.
• The provided reproduction is a minimal reproducible example of the bug.

SimpleScene documentation is outdated

Original posted in ThatOpen/engine_components#141, by Maozerhouni

Hi,

Exploring the different tutorials, it seems it is non-compliant with what should be done.
For example, Simple scene tutorial :

const container = document.getElementById('container');

const components = new OBC.Components();
components.scene = new OBC.SimpleScene(components);
components.renderer = new OBC.SimpleRenderer(components, container);
components.camera = new OBC.SimpleCamera(components);
components.raycaster = new OBC.SimpleRaycaster(components);

Wouldn't be enough. Scene shall be initialised. Code should be more like :

const viewer = new OBC.Components()

const sceneComponent = new OBC.SimpleScene(viewer)
sceneComponent.setup()
viewer.scene = sceneComponent

const viewerContainer = document.getElementById("app") as HTMLDivElement
const rendererComponent = new OBC.SimpleRenderer(viewer, viewerContainer)
viewer.renderer = rendererComponent

const cameraComponent = new OBC.SimpleCamera(viewer)
viewer.camera = cameraComponent

const raycasterComponent = new OBC.SimpleRaycaster(viewer)
viewer.raycaster = raycasterComponent

Please enable search through documentation

Given the growing amount of components, APIs, and tutorials, it would be very handy to have a search through the documentation.

Setting up a nav cube tutorial is broken

Link to Setting up a nav cube tutorial (https://top-docs.vercel.app/docs/Tutorials/CubeMap.mdx) on page https://top-docs.vercel.app/docs/components/tutorial-paths results in error 404

Documentation > Components > Tutorial paths >Making great 3D apps > Setting up a nav cube

Update docs - highlighter.outlinesEnabled

As registered in #22, there is some documentation out of date.

This issue will update the references of highlighter.outlinesEnabled to highlighter.outlineEnabled as we can found in https://github.com/IFCjs/components/blob/main/src/fragments/FragmentHighlighter/index.ts#L85

Documentation is already out of date

Describe the bug 📝

I am attempting to follow the documentation as closely as possible and there have been multiple instances where the documentation has been outright incorrect in regards to types and what is actually available.

Examples of instances of missing documented properties/methods:

• components.scene.setup(), where setup() does not exist
• components.renderer.postproduction.customEffects.outlineEnabled = true, where postproduction does not exist
• The docs say for the highlighter to use highlighter.outlinesEnabled = true, where the actual call is highlighter.outlineEnabled = true.

With running into just these few variances, there have to be multiple more. The variance between the documentation and the actual types can get frustrating and if types are included, they should accurately describe available functionality, methods, and properties.

Reproduction ▶️

No response

Steps to reproduce 🔢

1. Read the docs
2. Attempt to follow instructions exactly using a typescript project
3. Discover missing methods, properties.

System Info 💻

Node, Vite, Typescript, MacOS

Used Package Manager 📦

npm

Error Trace/Logs 📃

No response

Validations ✅

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a IFC.js components issue and not a framework-specific issue. For example, if it's a THREE.js related bug, it should likely be reported to mrdoob/threejs instead.
• Check that this is a concrete bug. For Q&A join our Community.
• The provided reproduction is a minimal reproducible example of the bug.

Links in production docs point to the vercel.app and don't open correctly in the new browser tab

Reposting this issue from the thread: https://people.thatopen.com/c/conversations?message_id=18993632#message_18993632

The documentation is published in vercel.app page, which is then embedded as iframe in the https://platform.thatopen.com/documentation pages. This embed works well until you open internal link to other documentation page in a new browser tab - then you get carried straight to the https://top-docs.vercel.app/docs and lose all of the platform functionality.

Clippin Planes Tutorial link redirects to wrong page

Describe the bug 📝

I was going through the Tutorial Path and realised the link embedeed in the "Create some clipping planes" redirects to the previous SimpleRaycaster tutorial. I'm assuming this is a bug rather than the tutotial being outright unavailable :)

Reproduction ▶️

https://docs.thatopen.com/components/tutorial-paths

Steps to reproduce 🔢

1. Click on "Create some clipping planes" link in the Tutorial Path page (https://docs.thatopen.com/components/tutorial-paths)
2. Gets redirected to the wrong tutorial page (https://docs.thatopen.com/Tutorials/SimpleRaycaster)

System Info 💻

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 5.98 GB / 15.89 GB
  Binaries:
    Node: 16.16.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.11.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.3636.0), Chromium (120.0.2210.61)
    Internet Explorer: 11.0.19041.3636
  npmPackages:
    openbim-components: ^1.2.0 => 1.2.0

Used Package Manager 📦

npm

Error Trace/Logs 📃

No response

Validations ✅

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a repository issue and not a framework-specific issue. For example, if it's a THREE.js related bug, it should likely be reported to mrdoob/threejs instead.
• Check that this is a concrete bug. For Q&A join our Community.
• The provided reproduction is a minimal reproducible example of the bug.

test

Describe the bug 📝

asdf

Reproduction ▶️

asdf

Steps to reproduce 🔢

asdf

System Info 💻

asdf

Used Package Manager 📦

npm

Error Trace/Logs 📃

asdf

Validations ✅

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a IFC.js components issue and not a framework-specific issue. For example, if it's a THREE.js related bug, it should likely be reported to mrdoob/threejs instead.
• Check that this is a concrete bug. For Q&A join our Community.
• The provided reproduction is a minimal reproducible example of the bug.

Missing documentation on how to locally develop

I notice it's not clear how to locally test the library.

I followed this: https://github.com/IFCjs/docs/blob/main/docs/components/contributing.md#start-coding

The issue with the three steps is that is not enough to test my changes locally. My case is that I'm using react to develop/test and not vanila js.

I saw on npm I can use npm link (https://docs.npmjs.com/cli/v10/commands/npm-link) to locally test the changes.

I did it and it works, the only problem is I had to follow the following process:

1. On components execute: npm run build
2. cp package.json dist/
3. npm link
4. Go to the project I'm using for development
5. npm link openbim-components

Step 2 is the one I feel strange, maybe copying package.json inside the dist folder or have a command that does 1,2 and 3?

Besides that, I could work on the documentation to be more clear.

Thoughts?

Update measurements example to delete unused CSS

Describe the bug 📝

Currently, the 3 dimensions examples are using CSS classes (.ifcjs-dimension-label, etc) that has no relevance as the applied styles in components are coming from Tailwind.

Reproduction ▶️

No response

Steps to reproduce 🔢

No response

System Info 💻

N/A

Used Package Manager 📦

npm

Error Trace/Logs 📃

No response

Validations ✅

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a repository issue and not a framework-specific issue. For example, if it's a THREE.js related bug, it should likely be reported to mrdoob/threejs instead.
• Check that this is a concrete bug. For Q&A join our Community.
• The provided reproduction is a minimal reproducible example of the bug.

Update domain and make standalone

Description 📝

Right now the documentation is an iframe in the platform. We want to make it standalone so that we can use all docusaurus features (such as URL paths for each tutorial)

Suggested solution 💡

No response

Alternative ⛕

No response

Additional context ☝️

No response

Validations ✅

• Read the docs.
• Check that there isn't already an issue that requests the same feature to avoid creating a duplicate.

PostproductionRenderer tutorial

Hi, in the tutorial for the PostproductionRenderer we should have the absolute url for the file instead for the relative one.

Thanks.