Trying to upgrade some very old code based on release 122 (for real, this time)

Questions
1

[Apologies if my initial abortive attempt is visible; typing error.]

My problem is that I have some very old code, which I did not write and know virtually nothing about, which uses three.js, and I’m trying to clear out some technical debt by upgrading as many packages as I can to the current versions. Any help would be appreciated.

The issue I’m facing is that I have a Mesh object which will represent a sphere. It’s initialized as follows:

    const mesh = new THREE.Object3D();
    mesh.add(
      new THREE.LineSegments(
        new THREE.Geometry(),
        new THREE.LineBasicMaterial({
          color: 0xffffff,
          transparent: true,
          opacity: 0.5,
        }),
      ),
    );
    
    mesh.add(
      new THREE.Mesh(
        new THREE.Geometry(),
        
        new THREE.MeshPhongMaterial({
          color: 0x156289,
          emissive: 0x072534,
          side: THREE.DoubleSide,
          flatShading: true,
        }),
      ),
    );

The external changes represent spherical sectors which are modified, and each sector is converted to a SphereGeometry, and merged with a geometry “seed” and then replaced into the existing object:

      var singleGeometry = new THREE.Geometry();
      
      sectors.forEach(function (s) {
        
        const geometry = new THREE.SphereGeometry(/* etc */);
        
        const mahmesh = new THREE.Mesh(geometry);
        singleGeometry.merge(mahmesh.geometry, mahmesh.matrix);
      });
      
      mesh.children[0].geometry.dispose();
      mesh.children[1].geometry.dispose();
      
      mesh.children[0].geometry = new THREE.WireframeGeometry(singleGeometry);
      mesh.children[1].geometry = singleGeometry;

The easy part is to replace the seed geometries with BufferGeometry, but I’m stumped about how to get the visual effect of the mesh preserved from the old version of the code, because I’m not sure how to replace the merge() call. I can collect all the geometries for each sector and call BufferGeometryUtils.mergeGeometries(), but the effect of creating the Mesh for each sector is entirely lost. I took a quick look at the deprecated Geometry example in release 125, but that’s quite old by now and I’m not sure what of it is important.

Thanks again in advance for any guidance.

P.S. Here’s an example of the original rendering:

image
image427×404 66.4 KB

And here’s what it looks like when I just merge all the SphereGeometry instances together:

image
image427×404 13.2 KB

2

If you post the working version of the code (with whatever version of three makes it work) as a codepen or a glitch…
We can probably fix it up for you.

1 Like
3

Thank you for the offer. I think this is a pretty minimal example: https://codepen.io/slbayer/pen/XJWMGYX

4

Maybe some light tweaking?

const lights = [
  new THREE.PointLight(0xffffff, 10, 0, 0),
  new THREE.PointLight(0xffffff, 10, 0, 0),
  new THREE.PointLight(0xffffff, 10, 0, 0)
];
2 Likes
5

That’s more than close enough. Thank you so much!

2 Likes