Can I load a speckle stream in Threejs application?

chloesun · 14 January 2022 22:06

I’m thinking of building a web-based game that speckle stream can be used as a background model. Can I load a speckle stream in Threejs application?

teocomi · 15 January 2022 10:55

Hi Chloe!

Of course, Speckle’s viewer is built with Three.js and you should be able to easily load Speckle objects in your scene using our Object Loader library.
Our docs on using it are very scarce at the moment but we’re hoping to improve them soon!

dimitrie · 17 January 2022 08:49

Beyond the object loader, you’ll probably also need the converter. We should defintively make this a proper threejs loader in the future to serve this kind of use cases

IIRC, @kgoulding/@haitheredavid actually did wrap the speckle parts in a proper threejs loader! Maybe they can share some of the experience (and pain) of doing so

haitheredavid · 17 January 2022 19:04

We put together a sketch or two that uses react-three-fiber, but I don’t recall if there was anything with just three. This isn’t my area of expertise, so I can’t say much about the process but I remember the result of integrating the a speckle stream with the converter and objectloader was pretty simple. But @kgoulding can shine a bit more light on this since he’s much more familiar with three.

We do have some plans for a sprint in the near future to start building out some goods for speckle and r3f

kgoulding · 18 January 2022 16:22

It wasn’t too painful actually - but did require a bit of a hacky approach. The loader typically requires a URL, but in this case we’re using a JSON-encoded string containing a speckle token alongside a speckle object URL.

ViewerObjectLoader.js (2.6 KB)
SpeckleLoader.js (1.3 KB)

chloesun · 18 January 2022 19:56

Thank you @kgoulding ! I tried to download the files, but can’t…

So I need both(ViewerObjectLoader.js &SpeckleLoader.js) to load a speckle stream? It would be great if you can share some code snippets as examples, thanks!

dimitrie · 18 January 2022 20:00

@chloesun + @kgoulding it might be because uploading js files might trigger discoure’s hax0r radar; we could try with a zip file/embedding them as code snippets

kgoulding · 18 January 2022 21:05

gist.github.com

https://gist.github.com/gouldingken/e91764e3b452b906a1c19c4518306cf9

SpeckleLoader.js

import {
    Group,
    Mesh,
    MeshNormalMaterial,
    Loader,
    SmoothShading
} from 'three';
import ViewerObjectLoader from "../../speckle-objects/modules/ViewerObjectLoader";

class SpeckleLoader extends Loader {

This file has been truncated. show original

ViewerObjectLoader.js

import ObjectLoader from '@speckle/objectloader'
import Converter from './Converter'

/**
 * Helper wrapper around the ObjectLoader class, with some built in assumptions.
 */

export default class ViewerObjectLoader {
  constructor( objectUrl, authToken ) {
    // this.viewer = parent

This file has been truncated. show original

chloesun · 18 January 2022 21:30

import ObjectLoader from '@speckle/objectloader'
import Converter from './Converter'
Guess I also need to include objectLoader and Converter?
These are the correct files?

github.com

specklesystems/speckle-server/blob/main/packages/objectloader/index.js

/**
 * Simple client that streams object info from a Speckle Server.
 * TODO: Object construction progress reporting is weird.
 */


export default class ObjectLoader {

  /**
   * Creates a new object loader instance.
   * @param {*} param0
   */
  constructor( { serverUrl, streamId, token, objectId, options = { enableCaching: true, fullyTraverseArrays: false, excludeProps: [ ] } } ) {
    this.INTERVAL_MS = 20
    this.TIMEOUT_MS = 180000 // three mins

    this.serverUrl = serverUrl || window.location.origin
    this.streamId = streamId
    this.objectId = objectId
    console.log('Object loader constructor called!')

This file has been truncated. show original

github.com

specklesystems/speckle-server/blob/main/packages/viewer/src/modules/converter/Converter.js

import { chunk } from 'lodash'
import * as THREE from 'three'
import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils'
// import { BufferGeometryUtils } from 'three/examples/jsm/utils/BufferGeometryUtils'

import ObjectWrapper from './ObjectWrapper'
import { getConversionFactor } from './Units'
import MeshTriangulationHelper from './MeshTriangulationHelper'

/**
 * Utility class providing some top level conversion methods.
 * Warning: HIC SVNT DRACONES.
  */
export default class Coverter {

  constructor( objectLoader ) {
    if ( !objectLoader ) {
      console.warn( 'Converter initialized without a corresponding object loader. Any objects that include references will throw errors.' )
    }

This file has been truncated. show original

kgoulding · 19 January 2022 02:31

Yes, those look like the ones

chloesun · 19 January 2022 16:37

Thanks @kgoulding , sorry more questions…
How to generate a speckle token, and what is a speckle object URL, something like this serverUrl/streams/streamId? I need to load the entire scene of a stream.

izzylys · 19 January 2022 17:28

hey chloe!

instructions for creating a token can be found here in speckle.guide

an object url is the direct url to the object on your server in the form serverUrl/streams/<streamId>/objects/<objectID> which you can get by clicking into objects from the web

eg: a facade panel on the speckle haus stream looks like this:

https://speckle.xyz/streams/3073b96e86/objects/f4728b31e279dfe2b416a1961963657b

click here to see it in the web

all commits have a root object which is the id you see in the referencedObject field of the commit. you can use this object if you need the whole commit. eg for the above stream, it would be:

https://speckle.xyz/streams/3073b96e86/objects/e05c5834368931c9d9a4e2087b4da670

click here to see this object in the web

chloesun · 19 January 2022 19:15

Thanks a lot @izzylys !

chloesun · 25 January 2022 20:00

const objectUrl = "https://speckle.xyz/streams/3073b96e86/objects/e05c5834368931c9d9a4e2087b4da670";
const speckleToken = "randomtoken";

const model = new SpeckleLoader(objectUrl, speckleToken);
this.scene.add(model);

This is what I tried to load speckle stream, and I got the message error three.min.js:517 THREE.Object3D.add: object not an instance of THREE.Object3D. What could possibly go wrong?

dimitrie · 25 January 2022 20:13

Here’s how we do it in the viewer example/testing ground app (you can test it live by running npm run serve inside the viewer package folder):

import Viewer from './modules/Viewer'
window.v = new Viewer( { container: document.getElementById( 'renderer' ) } ) // note you'll need a div with the id set to renderer in your document

window.loadData = async function loadData() {
  const objUrl = "etc"
  await v.loadObject( url )
}

// in the html somewhere
<button class="" onclick="loadData()">Load Object</button>

Note most of the interaction logic is in app.js if you go digging for it.

Let us know if this is something that works for you!

chloesun · 29 January 2022 20:06

Finally got the stream rendered in the threejs scene. I had to deliberately remove the point and line objects( geometry.boundingSphere is undefined.), otherwise it can’t render( performing a raycast in the render function). How can I place the speckle model in the scene properly, like on top of the grid?

dimitrie · 29 January 2022 20:09

Threejs defaults to Y up; you probably will want to swap to have in your scene Z as up for the camera you use (iirc something like yourCamera.up.set(0, 0, 1);

chloesun · 1 February 2022 20:46

Explore a playful way to showcase projects

dimitrie · 1 February 2022 20:48

You know this begs for a little gif, not to mention a demo link

chloesun · 1 February 2022 20:51

need more development for a demo…wip