breaking changes: node color & plane color issue

Love the library, but using ^ in package.json caused me many headaches and a full day’s work.

Cause: Using "3d-force-graph": "^1.70.17" in my package.json

Fix: Using "3d-force-graph": "1.70.17" in my package.json

Problem: My scenario is similar to https://vasturiano.github.io/3d-force-graph/example/scene/

I stack & space between 2-7 planes on top of each other and fix nodes onto each level. The changes of the new minor release seemed to saturate the entire scene and/or use the wrong colors (more pastel) for nodes/ links/ planes. Seems almost like looking at the scene through a white lens with .5 opacity. Tinkering with my code did make a minor difference. For example, I normally have to rotate a plane 90 degrees after I create it, I found by not rotating it the planes maintained their color.

More precisely, I paint each plane a different color. If I keep my 90 degree rotation, I found 1/7 planes had the color I assigned on top and bottom. The other 6 planes had correct color when viewed from the bottom, but white color when viewed from top.

I also have a scenario where I load a .png onto a plane, the png again turned completely white (view from top) for most colors, other color did paint over the image as desired, but color may have still been off a little.

Other issues are I paint nodes to specific colors depending on their properties, most of the painted node colors were completely wrong. e.g. green node turns yellow, pink node turns purple, etc. & all too light

Tech stack: Angular 14 & Typescript Here is a sample of my code. It shows how I add & create planes, the colors I use, and the rotation I perform which causes the issue for the planes (the other issues I do not know cause):

    let planeColors = [0x3e738c, 0x0b9692, 0x683e8c, 0x8c3e7b, 0x8c3e43, 0x8c803e, 0x337ab7];
    let planeLabels = ['WDM/Fiber Layer', 'Optical Transport Layer', 'IP/MPLS', '4', '5', '6', '7']

    //// Identify the plane dimensions
    let planeGeometry = new THREE.PlaneGeometry(this.planeWidth, this.planeHeight, 1);

    //// Add a plane for each level
    for (let i = 0; i < (this.levelRange.ceil || 7); i++) {

        //// Create a material for plane of color and opacity
        const planeMaterial = new THREE.MeshLambertMaterial({
          color: i <= planeColors.length ? planeColors[i] : planeColors[0],
          side: THREE.DoubleSide,
          opacity: .4,
          transparent: true,
        });

        //// Use the color material and geometry to create the plane
        const plane = new THREE.Mesh(planeGeometry, planeMaterial);
        plane.rotation.x = Math.PI / 2;
        // plane.rotation.set(0.5 * Math.PI, 0, 0);
        plane.position.set(0, (i * 200 - 3) || 0, 0);
        this.threeDGraph.scene().add(plane);
        this.planesForLaterDelete.push(plane);

@DOrsulak-SOLIEL thanks for reaching out. This is most likely due to a change in how color spaces work inside ThreeJS. The change happened in version 0.152 of ThreeJS and you can find more background around that topic in this post: https://discourse.threejs.org/t/updates-to-color-management-in-three-js-r152/50791

Version 1.71 of 3d-force-graph started including versions of ThreeJS after 0.152, that why you see that change, but the real difference is in the ThreeJS version that you're explicitly importing into your app.

I'd also recommend reading about the way colorspaces work in ThreeJS, on this document: https://threejs.org/docs/#manual/en/introduction/Color-management

You might be setting the colors in your material assuming a linear color space, while it's actually being interpreted as "sRGB", leading into a much more saturated look than what you expect.

vasturiano / 3d-force-graph

breaking changes: node color & plane color issue #644