Unable to integrate Transform Editor.

CesiumJS
1

1. A concise explanation of the problem you're experiencing.
Hi,

We're trying to integrate the Transform Editor in our project.
For that we use the 3D model from the following example (https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/?src=3D%20Tiles%20Photogrammetry.html) uploaded on our Cesion.ION account.

My access token / AssetID : { in mp if needed }

Our first problem is that our 3D model is in the air when we try to integrate the Transform editor, and the feature doesn't even appear.
Our second problem is if we move away of the model, the camera roll-back and the model disappear (see the following video)

2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.

The code used to integrate it is following the official documentation
-> http://help.agi.com/STKWebVisualizationLibrary/TransformEditor.html

Here is our method to do the transform.

(The container parameter correspond to the div containing the map.)

   initViewer(container) {
    this.viewer = new Cesium.Viewer(container, {
      geocoder: false,
      homeButton: false,
      // baseLayerPicker: false,
      sceneModePicker: false,
      navigationHelpButton: false,
    });

    this.viewer.scene.globe.enableLighting = true;

    let tileset = this.viewer.scene.primitives.add(
      new Cesium.Cesium3DTileset({
        url: Cesium.IonResource.fromAssetId(21024)
      })
    );

    this.viewer.flyTo(tileset);
    
    tileset.readyPromise.then((tileset) => {
      this.transformObject(container ,this.viewer.scene, tileset);
    })

    return this.viewer;
  }

transformObject(container, scene, tileset){
    let transform = new Cesium.TransformEditor({
      container: container,
      scene: scene,
      transform: tileset.modelMatrix,
      boundingSphere: tileset.boundingSphere,
      originalOffset: tileset.boundingSphere.center
    })
  }

We have no error in the console, no undefined parameters in debug or whatever...

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

Our goal is to do the same thing that the 3rd example of this following link
--> https://cesium.com/ion-sdk/

4. The Cesium version you're using, your operating system and browser.

Cesium SDK : 1.57
Angular : 8.0.0
Chrome : 74.0.3729.169 (64 bits)

Thanks in advance for the answers.

bug transform.mov (3.2 MB)

2

It looks like your model is position far from the surface, which is why when you move the camera it disappears (the camera just moves too fast at this height). Can you try using the “Adjust Tileset” tool on ion to move the tileset to a spot on the surface? (It should be a button on the top right in the Cesium ion dashboard when selecting the asset).

I’m not sure if that hosted documentation there on agi.com is up to date. I’d use the documentation provided with the Cesium ion SDK. Run the following command to build it:

npm run generateDocumentation

``

And then when you start the server with npm run start the docs should be accessible at http://localhost:8080/Build/Documentation/index.html.

As for the transform editor, when you’re running the same server as described above, you should also have access to the local Sandcastle code examples. Here’s one on the transform editor:

http://localhost:8080/Apps/Sandcastle/index.html?src=Transform%20Editor.html

Let me know if that helps!

3

Hi, thanks for your answer,

For the first part, if we just display the 3D model, this one is displayed properly on the floor. It's when i add the Transform Editor that the model is loaded far from the surface.

About agi.com i have not found anything. If you have some informations i'm interested.

About the generateDocumentation i have some problems.

- i can't run the npm run generateDocumentation

@analyticalgraphicsinc/cesium@1.57.0 generateDocumentation <my-folder>/src/external/cesium-sdk
gulp generateDocumentation

[11:37:05] Local gulp not found in ~<my-folder>/src/external/cesium-sdk
[11:37:05] Try running: npm install gulp
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @analyticalgraphicsinc/cesium@1.57.0 generateDocumentation: `gulp generateDocumentation`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @analyticalgraphicsinc/cesium@1.57.0 generateDocumentation script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

see below what i have in my package.json

"scripts":{
    "generateDocumentation": "gulp generateDocumentation"
}

So i've installed gulp and it's dependences to execute the script.
Now my error is the following :

npm run generateDocumentation

@analyticalgraphicsinc/cesium@1.57.0 generateDocumentation <my-folder>/src/external/cesium-sdk
gulp generateDocumentation

[11:51:22] Using gulpfile ~/<my-folder>src/external/cesium-sdk/gulpfile.js
[11:51:22] Starting 'generateDocumentation'...
Cannot parse the config file Tools/jsdoc/conf.json: Error: ENOENT: no such file or directory, open 'Tools/jsdoc/conf.json'
Exiting JSDoc because an error occurred. See the previous log messages for details.

[11:51:22] 'generateDocumentation' errored after 335 ms
[11:51:22] Error: Command failed: jsdoc --configure Tools/jsdoc/conf.json
Cannot parse the config file Tools/jsdoc/conf.json: Error: ENOENT: no such file or directory, open 'Tools/jsdoc/conf.json'
Exiting JSDoc because an error occurred. See the previous log messages for details.

    at ChildProcess.exithandler (child_process.js:275:12)
    at emitTwo (events.js:126:13)
    at ChildProcess.emit (events.js:214:7)
    at maybeClose (internal/child_process.js:925:16)
    at Socket.stream.socket.on (internal/child_process.js:346:11)
    at emitOne (events.js:116:13)
    at Socket.emit (events.js:211:7)
    at Pipe._handle.close [as _onclose] (net.js:554:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @analyticalgraphicsinc/cesium@1.57.0 generateDocumentation: `gulp generateDocumentation`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @analyticalgraphicsinc/cesium@1.57.0 generateDocumentation script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Apparently the Tools/jsdoc/conf.json is missing.
Do you have any idea about how and why?
When i try to create it manually it doesn't work neither.

Kindly waiting for your answer.

4

You don’t have to install anything manually (in fact doing so may give you an incorrect build). I would just unzip to a new, clean folder, and then run

npm install

``

Inside that directory, and that should automatically install all of Cesium’s dependencies. Are you able to load this Sandcastle example (http://localhost:8080/Apps/Sandcastle/index.html?src=Transform%20Editor.html) when you have the server running (after npm run start) ?

5

That's works!

I have the API doc and the examples.

Thanks, it might be good to have these informations somewhere in the documentation! (At least I did not find it during my research)

6

Thanks for the feedback! This is definitely something we can improve. We’ve been doing a lot of website redesign the past few weeks, so I made a note to do improve this.