As the lenght changes, part of the cylinder geometry gets disappeared!

I created a vector with CylinderGeometry, as the length approaches zero it turns to a point at origin. If the length never approaches zero everything works fine but if it’s once zero (and therefore turns to a point) then gets another nonzero value, at the base of the vector, cylinder partially gets disappeared!

the code I’m using to generate the Vector in React:

        <group ref={ref} position={origin}>
            {_mag >= thicknessFacor * HHEIGHT ? (
                <>
                    <Shaft
                        mag={_mag - thicknessFacor * HHEIGHT} 
                        direction={_dir}
                        color={color}
                        opacity={opacity}
                        onPointerDown={onPointerDown}
                        thicknessFactor={thicknessFacor}
                        hover={hover}
                    />
                    <Head
                        position={headPos}
                        direction={_dir}
                        color={color}
                        opacity={opacity}
                        thicknessFactor={thicknessFacor}
                        onPointerDown={onPointerDown}
                        hover={hover}
                    />
                </>
            ) : (
                <Point
                    color={color}
                    position={[ORIGIN.x, ORIGIN.y, ORIGIN.z]}
                    opacity={opacity}
                    transparent={true}
                    pkey={'zero_vector'}
                />
            )}
            {label}
        </group>

Can you please demonstrate the issue by modifying the following live example?

https://jsfiddle.net/0t2153aj/1/

The React code as well as the video are unfortunately not sufficient to investigate the problem.

First I have to figure out the way to make a simple example cause my code is in react and it used react-spring etc. But I investigate the problem further by removing everything other than the orange vector and it gets rendered as expected!

I have other components there with opacity of zero and transparent set to true, but they still somehow influence the rendering of orange vector. I couldn’t however explain why it first gets rendered correctly before it’s animated to zero. Is that the default behavior of transparent components?

Can you try to set the depthWrite material property to false for your transparent objects? Sometimes rendering artifacts can be fixed by applying this simple modification.

1 Like

Thank you for investigating this problem with me. I set the visibility to false whenever opacity is zero and it worked. Setting depthWritte to false also works but I’m not sure about the caveats of this as the object in the scene getting more complex.