Load a new STL as geometry will change existed mesh objects

Questions
,
1

Load a new STL as geometry will change existed mesh objects

Hi, I’m learning threejs and having a problem now.

I want to load STL files and use THREE.TransformControls to move and rotate.
But after loading several STLs, the pickers of TransformControls will be changed into the newly loaded geometry.

Here is how it happens:

  1. Load my first cube from STL. Everything seems ok.

    KmZygng.png1272×962 6.28 KB

  2. The red picker for rotating around X became a cylinder after loading the 4th STL(a cylinder).

    8BMmu0e.png1275×965 38 KB

  3. The green picker for rotating around Y became a cone after loading the 6th STL(a cone).

    xrITd3Q.png1276×970 8.05 KB

  4. Finally the blue picker for Z became a cube after loading the 8th STL(a cube).

    kjst5Tu.png1270×968 10.2 KB

Here is my loader:

const THREE = require("three")

class GeometryLoader {
    static loadSTLAsGeometry(buffer) {

        const numberOfFaces = buffer.readUInt32LE(80, true)

        const dataOffset = 84;
        const faceLength = 12 * 4 + 2;

        const geometry = new THREE.Geometry();

        for (let face = 0; face < numberOfFaces; face++) {

            const start = dataOffset + face * faceLength;
            const normalX = buffer.readFloatLE(start, true);
            const normalY = buffer.readFloatLE(start + 4, true);
            const normalZ = buffer.readFloatLE(start + 8, true);

            for (let i = 1; i <= 3; i++) {
                const vertexstart = start + i * 12;
                geometry.vertices.push(new THREE.Vector3(
                    buffer.readFloatLE(vertexstart, true),
                    buffer.readFloatLE(vertexstart + 4, true),
                    buffer.readFloatLE(vertexstart + 8, true)
                ))
            }
            const normal = new THREE.Vector3(normalX, normalY, normalZ)
            geometry.faces.push(new THREE.Face3(face * 3 + 0, face * 3 + 1, face * 3 + 2, normal))
        }
        geometry.computeBoundingBox()
        geometry.mergeVertices()
        return geometry;
    }
}

How could I fix it? Any help would be appreciated!

2

So you don’t use the official STLLoader to load your files, right? If not, what are the reasons? If you write your own loader, it would be helpful for other developers when you provide a live example that shows the problem.

BTW: There is also an official example that shows how you can use STLLoader to load STL files.

https://threejs.org/examples/webgl_loader_stl.html

3

Thanks for reply!

Finally I found what my problem is, but still do not understand why it looks like this.
I will talk about it later.

So you don’t use the official STLLoader to load your files, right? If not, what are the reasons?

No. Since I am new in three.js & nodejs, I studied three’s examples and wrote my own implementation to have a better understanding of them.
(Actually I also use my own camera control based on orbit/trackball control and object control based on transform control. It took me some time to make sure I did not make mistakes in these parts.:confounded:)

So the problem comes from my project structure. It is like:

.
├── tools
│   ├── node_modules
│   ├── package.json
│   ├── GeometryLoader.js
│   ├── index.js
│   └── ...
└── demo
    ├── node_modules
    ├── package.json
    ├── demo1.js
    └── ...

I installed three in both /tools and /demo and loaded different three in GeometryLoader.js and demo1.js.

// GeometryLoader.js
const THREE = require("three")

...

// demo1.js
const THREE = require("three")
const {
    GeometryLoader
} = require("tools")

...

After using the same three, everything works well.

So, Why using different three modules will cause problem like this?:thinking: