score:0

look at the source of the library you're using. the key part would be the return statement in the component, which is effectively your render:

return (
    <scene>
      <group ref={group}>
        {/* bounding box that particles exist inside of */}
        {showcube && (
          <boxhelper>
            <mesh name="object">
              <meshbasicmaterial
                attach="material"
                color="white"
                blending={additiveblending}
                wireframe
                transparent
              />
              <boxbuffergeometry attach="geometry" args={[r, r, r]} />
            </mesh>
          </boxhelper>
        )}
        {/* lines connecting particles */}
        {lines.visible && (
          <linesegments
            geometry={linemeshgeometry}
            material={linemeshmaterial}
          />
        )}

        {/* particles */}
        {particles.visible && (
          <points geometry={pointcloudgeometry} material={pointmaterial} />
        )}
      </group>
    </scene>
  );

i would target <scene style={{ position:fixed; }}> based on what i see here. another option might be to feed it through something like styled-components as an hoc.

score:1

this means particlefield may not have style prop. you can either add style as prop for particlefield, or wrap particlefield with a div then use style={{position:fixed}} for that div

<div style={{ position: "fixed" }}><particlefield  /></div>

Related Query

More Query from same tag