# Where is threshold measured from in LOD?

**URL:** <https://discourse.threejs.org/t/where-is-threshold-measured-from-in-lod/81339>\
**Category:** Questions\
**Tags:** drei, lod, react-three-fiber\
**Created:** [April 17, 2025, 2:45pm UTC](https://discourse.threejs.org/t/where-is-threshold-measured-from-in-lod/81339 "2025-04-17T14:45:46Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jim\_Rend](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jim_rend/32/56245_2.png) [@Jim\_Rend](https://discourse.threejs.org/u/Jim_Rend)\
**Post date:** [April 17, 2025, 2:45pm UTC](https://discourse.threejs.org/t/where-is-threshold-measured-from-in-lod/81339/1 "2025-04-17T14:45:46Z")

</div>

I’m doing LOD rendering for multiple objects. Im confused about where the threshold is measured from.

I have a demo that works except the high and low resolution meshes are swapped out for both the red and blue dots at the same camera position, despite them having different bounding areas and origins.

```javascript
import { Canvas } from "@react-three/fiber";
import { generateCubePoints } from "./generateCubePoints";
import {
  CameraControls,
  PerspectiveCamera,
  Detailed,
  GizmoHelper,
  GizmoViewport,
} from "@react-three/drei";

export const ITEMS_PER_ROW = 3;

const mockBounds = {
  minX: -40,
  maxX: 40,
  minY: -40,
  maxY: 40,
  minZ: -40,
  maxZ: 40,
};
const mockBounds1 = {
  minX: mockBounds.minX,
  maxX: 0,
  minY: mockBounds.minY,
  maxY: mockBounds.maxY,
  minZ: mockBounds.minZ,
  maxZ: mockBounds.maxZ,
};
const mockBounds2 = {
  minX: 0,
  maxX: mockBounds.maxX,
  minY: mockBounds.minY,
  maxY: mockBounds.maxY,
  minZ: mockBounds.minZ,
  maxZ: mockBounds.maxZ,
};

const mockPoints = [
  {
    color: "red",
    bounds: mockBounds1,
    points: [
      generateCubePoints({
        bounds: mockBounds1,
        numPoints: 1000,
      }),
      generateCubePoints({
        bounds: mockBounds1,
        numPoints: 100,
      }),
    ],
  },
  {
    color: "blue",
    bounds: mockBounds2,
    points: [
      generateCubePoints({
        bounds: mockBounds2,
        numPoints: 1000,
      }),
      generateCubePoints({
        bounds: mockBounds2,
        numPoints: 100,
      }),
    ],
  },
] as const;

function App() {
  return (
      <Canvas>
        {mockPoints.map((pGroup, pGroupI) => {
          return (
            <Detailed distances={[0, 100]} key={pGroupI}>
              {pGroup.points.map((p, pI) => {
                return (
                  <points key={`${pGroupI}-${pI}`} renderOrder={0}>
                    <bufferGeometry>
                      <bufferAttribute
                        attach="attributes-position"
                        args={[p, ITEMS_PER_ROW]}
                        count={p.length / ITEMS_PER_ROW}
                      />
                    </bufferGeometry>
                    <pointsMaterial size={4} color={pGroup.color} />
                  </points>
                );
              })}
            </Detailed>
          );
        })}
      </Canvas>
  );
}

```

[https://codesandbox.io/p/devbox/damp-rgb-forked-57783t?workspaceId=ws\_ER7skizgVvGCRcwppmiBu](https://codesandbox.io/p/devbox/damp-rgb-forked-57783t?workspaceId=ws_ER7skizgVvGCRcwppmiBu)

I got it working by setting `position` on the `Detailed` component, however this moved the points. So I then needed to set the negative of these values as the `position` on `points`:

```javascript
{mockPoints.map((pGroup, pGroupI) => {
          const position = [
            (pGroup.bounds.minX + pGroup.bounds.maxX) / 2,
            (pGroup.bounds.minY + pGroup.bounds.maxY) / 2,
            (pGroup.bounds.minZ + pGroup.bounds.maxZ) / 2,
          ] as const;
          const positionNegative = [
            -position[0],
            -position[1],
            -position[2],
          ] as const;
          return (
            <Detailed distances={[0, 100]} key={pGroupI} position={position}>
              {pGroup.points.map((p, pI) => {
                return (
                  <points
                    key={`${pGroupI}-${pI}`}
                    renderOrder={0}
                    position={positionNegative}
                  >

```

[https://codesandbox.io/p/devbox/damp-rgb-forked-r2z2fw?workspaceId=ws\_ER7skizgVvGCRcwppmiBu](https://codesandbox.io/p/devbox/damp-rgb-forked-r2z2fw?workspaceId=ws_ER7skizgVvGCRcwppmiBu)

This seems to work but feels messy. Is there a better way?

Also I’m very concerned my performance. My real scene has over a million points and I’m really pushing the limits of what the browser can handle. So any performance savings I can do would be a great help.

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [April 17, 2025, 2:59pm UTC](https://discourse.threejs.org/t/where-is-threshold-measured-from-in-lod/81339/2 "2025-04-17T14:59:03Z")

</div>

> Where is the threshold measured from in LOD?

From [camera world position to object world position](https://github.com/mrdoob/three.js/blob/ec16a14d52577b907a499903c0052129019f52c3/src/objects/LOD.js#L259).

> [@Jim\_Rend](#):
>
> despite them having different bounding areas and origins.

Only the origin matters - and “origin” in this case means the world position of the LOD object itself (not the objects contained as children of that LOD level.) Bboxes are irrelevant.

---

<div class="post-metadata">

**Author:** ![Jim\_Rend](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jim_rend/32/56245_2.png) [@Jim\_Rend](https://discourse.threejs.org/u/Jim_Rend)\
**Post date:** [April 17, 2025, 3:27pm UTC](https://discourse.threejs.org/t/where-is-threshold-measured-from-in-lod/81339/3 "2025-04-17T15:27:09Z")

</div>

So is the world position of the LOD object ( in my case) always the centre of the scene by default?

If that is the case, is it possible to set its origin without moving its contents?

This feels like strange DX to me but I’m quite new to three.js.

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [April 17, 2025, 3:50pm UTC](https://discourse.threejs.org/t/where-is-threshold-measured-from-in-lod/81339/4 "2025-04-17T15:50:08Z")

</div>

> [@Jim\_Rend](#):
>
> This feels like strange DX to me but I’m quite new to three.js.

That’s how LODs work everywhere - the distance is measured from the origin / centre of gravity of a mesh.

 ![maxresdefault](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/2/92682c7dac9043586fb8f548d99aedb1f1f0957a.jpeg)

> [@Jim\_Rend](#):
>
> centre of the scene by default

Unless you set `position` prop in `Detailed` - yup.

> [@Jim\_Rend](#):
>
> If that is the case, is it possible to set its origin without moving its contents?

The way you’re doing it - ie. setting position of `Detailed` to actual position, then subtract the offset by setting the negative of that value in `<points position />` would be the correct way. Alternatively, subtract that offset directly during points’ calculations - since it shouldn’t have been there in the first place 👀