Clipping geometry weird when setting constant

Questions
,
1

Hello guys,

I want to slice a sphere according to the clipping plane normal. Everything looks normal when setting constant = 0. But when setting constant not 0, for example constant = 0.4, when rotating the clipping plane (set normal = [1,1,0]), the direction is Ok, but the clipping plane position is not right. I want to keep clipping plane at [0.4,0,0], I tried to set position at clipping plane to 0.4 , but it does not work. How could I get the right slicing sphere when constant is not 0, like yellow line labeled blow pictures. Thanks in advance.

clipping1
clipping1817×615 41.7 KB

clipping2
clipping2816×519 55.5 KB

my code snippet

function Sphere({ constant, normalx, normaly, normalz }) {
  const mesh = useRef();
  const plane = useRef();

  return (
    <mesh ref={mesh} castShadow position={[0, 0, 0]}>
      {/* <boxGeometry attach="geometry" args={[1, 1, 1]} /> */}
      <sphereGeometry attach="geometry" args={[1, 32, 16]} />
      <meshPhongMaterial
        color={0x80ee10}
        shininess={100}
        side={THREE.DoubleSide}
        clipShadows
      >
        <plane
          ref={plane}
          attach="clippingPlanes-0"
          normal={[normalx, normaly, normalz]}
          constant={constant}
          //position and translate do not work
          //   position={[-0.4, 0, 0]}
          //   translate={[-0.4, 0, 0]}
        />
      </meshPhongMaterial>
    </mesh>
  );
}

CodeSandBox: crazy-jackson-18y593 - CodeSandbox

2

This doesn’t look like three.js?

3

Ture, it is React three fiber, I found it was more difficult using react three fiber than using pure three.js :sob:

4

I think the problem here is that there are just too many points of failure.

If an example works on a certain version then it can at least be narrowed down to your code. This has a whole different layer of indirection. Anything can be happening within these jsx components is my understanding. Now one needs to know what happens in two different libraries before narrowing it down to your code :frowning: