Accessing Speckle Objects as threejs to load into a separate Viewer

jonathon · February 9, 2023, 4:49pm

mysterybear

hm, it seems if I want to work with a model that I've uploaded to Speckle using Three.js (well, @react-three/fiber) the status quo is that I should basically copy the approach here Can I load a speckle stream in Threejs application? - #35 by chloesun is this right?
Would be very nice to just have like npm install x, import y from x, off you go, kinda workflow; am I missing something? I could make a thread also, lmk!

jonathon

It sounds like you are working with the Speckle viewer, and want to side-load threejs model objects into it but not "uploading models to Speckle". Do I get that right? There is nothing wrong with this, but just wanted to be clear so we help in the best way.

mysterybear

@jonathon hmm no it's actually just that we want to parse out IFC-tagged geometries from IFC files... I know there's web-ifc-three... I saw that Speckle's IFC file importer does a lot of stuff though, so I was hoping to kind of piggyback on that but then have full control of meshes with my own Three code

jonathon · February 9, 2023, 4:49pm

mysterybear

#General discussion

hm this seems relevant Export federated model as a single IFC - #6 by AlanRynne

jonathon · February 9, 2023, 4:50pm

@mysterybear I have move the discussion from the chat to a topic so we can address it more easily

jonathon · February 9, 2023, 5:02pm

To summarise what I think you want to achieve:

Ingest IFC into a Speckle server using the Uploader tool
Access the resultant Speckle stream independently from the Speckle frontend
Access the meshes of those objects and load them into a threejs viewer (similar to the Speckle Viewer)

All this is possible.

Ingestion is simply using the import tool once you have created a Speckle project stream. This is available on our publically accessible speckle.xyz or any other self-hosted instance of the speckle server. Our parser is built out from the IFC.js project. This might also be an avenue for you to explore.

If you want to build your web application to use Speckle data, I recommend spinning up an instance of the Sandbox-Viewer project. If you fork from the speckle-server repo, you’ll be able to see the logic used to access the objects (geometry + data) used there. This sandbox project uses the ObjectLoader packages and the Viewer package that we publish to npm.

The first thread you referenced is to load additional model data into the Speckle Viewer atop the models directly derived from a Speckle server. This may or may not be relevant to you.

As for IFC export, the thread you mention latterly is still the position. There is no mechanism that we are currently building that exports Speckle data as IFC.

mysterybear · April 9, 2023, 11:37pm

Hi there again, thanks for the great response and sorry for the late follow-up, been caught up with other stuff and only got back to this as of late.

I’ve had some success with this, ended up copying a lot of code from GeometryConverter here

github.com

theopensystemslab/buildx-reloaded/blob/f269eed8168eb64b08ba83c93c8fa50b0017608e/app/foo/speckleToThree.ts

import {
  BufferGeometry,
  Float32BufferAttribute,
  Uint32BufferAttribute,
  Vector3,
} from "three"

type InputData = {
  faces: number[]
  vertices: number[]
}

export function convertSpeckleToThree(input: InputData): BufferGeometry {
  const geometry = new BufferGeometry()
  const { faces, vertices } = input
  const indices: number[] = []

  function triangleIsCCW(
    referenceNormal: Vector3,
    a: Vector3,

This file has been truncated. show original

Calling it then with this Zod parser here

github.com

theopensystemslab/buildx-reloaded/blob/f269eed8168eb64b08ba83c93c8fa50b0017608e/app/foo/ifcParser.ts

import { z } from "zod"
import { convertSpeckleToThree } from "./speckleToThree"

const displayValueSchema = z.object({
  speckle_type: z.literal("Objects.Geometry.Mesh"),
  vertices: z.array(z.number()),
  faces: z.array(z.number()),
})

const childSchema = z
  .object({
    type: z.string(),
    "@displayValue": z
      .array(displayValueSchema)
      .length(1)
      .transform(([x]) => x),
  })
  .transform(({ type, "@displayValue": { faces, vertices } }) => ({
    type,
    faces,

This file has been truncated. show original

Always feels unideal to just copy and paste code from upstream. Any plans to separate out and export these functions in a package somewhere @jonathon ? Could maybe submit a PR myself if you’d accept it and would like me to, let me know. Thanks again for the guidance above.