pmndrs / react-three-csg Goto Github PK

The three-bvh-csg package was recently published to npm 🎉

We should update this package to use it as a dependency.

edit: doh, typo, wrong package name

When updating to the latest r3f this package breaks.

three-bvh-csg has been updated to version 0.0.8 while this package leans on 0.0.5

in three-bvh-csg r153 of three js is used, which has no export for sphereBufferGeometry

I'm getting this error when trying to use the cgs library, here is the codesandbox link

TypeError: Cannot read properties of undefined (reading 'count')
at Module.ensureIndex (/next/static/chunks/node_modules_three-bvh-csg_src_7fbc42..js:41:53)
at Brush.prepareGeometry (/next/static/chunks/node_modules_three-bvh-csg_src_7fbc42..js:1128:186)
at Evaluator.evaluate (/next/static/chunks/node_modules_three-bvh-csg_src_7fbc42..js:2179:11)
at /next/static/chunks/node_modules_022a0c..js:2041:43
at /next/static/chunks/node_modules_022a0c..js:2070:188
at commitHookEffectListMount (node_modules_react-reconciler_7f1098..js:11966:42)
at commitLayoutEffectOnFiber (node_modules_react-reconciler_7f1098..js:12057:41)
at commitLayoutMountEffects_complete (node_modules_react-reconciler_7f1098..js:13280:25)
at commitLayoutEffects_begin (node_modules_react-reconciler_7f1098..js:13269:21)
at commitLayoutEffects_begin (node_modules_react-reconciler_7f1098..js:13255:29)
at commitLayoutEffects (node_modules_react-reconciler_7f1098..js:13219:13)
at commitRootImpl (node_modules_react-reconciler_7f1098..js:15434:17)
at commitRoot (node_modules_react-reconciler_7f1098..js:15330:17)
at finishConcurrentRender (node_modules_react-reconciler_7f1098..js:14728:25)
at performConcurrentWorkOnRoot (node_modules_react-reconciler_7f1098..js:14592:21)
at workLoop (/next/static/chunks/node_modules_022a0c..js:280:48)
at flushWork (/next/static/chunks/node_modules_022a0c..js:259:28)
at MessagePort.performWorkUntilDeadline (/next/static/chunks/node_modules_022a0c..js:487:35)

Code:

"use client";

import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import { Base, Geometry, Intersection } from "@react-three/csg";

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <Canvas>
        <ambientLight />
        <OrbitControls />
        <pointLight position={[10, 10, 10]} />
        <mesh>
          <meshNormalMaterial />
          <Geometry>
            <Base>
              <mesh position={[0, -1, 0]} rotation={[0, 45, 0]}>
                <boxGeometry args={[1, 1, 3]}></boxGeometry>
                <meshNormalMaterial />
              </mesh>
            </Base>
            <Intersection>
              <mesh position={[0, -1, 0]} rotation={[90, 0, 0]}>
                <cylinderGeometry args={[0.5, 0.5, 3, 32]}></cylinderGeometry>
                <meshNormalMaterial />
              </mesh>
            </Intersection>
          </Geometry>
        </mesh>
      </Canvas>
    </main>
  );
}

Hi, I've tested the different operators and it works like a charm. Except when I try to use it with my loaded models. I loaded them in a jsx file. Is that the problem? Is there a workaround?

I've noticed that the models seem to clip if you use an orthographic camera with default settings. Seems like it's just not supported - is that true, or is there some settings / configuration to fix it?

https://codesandbox.io/s/csg-orthographic-house-c78cim?file=/src/App.js

error: TypeError: Cannot read properties of undefined (reading 'count')
when try to put <Text3D> from @react-three/drei

What I did was to create a of three (obsolete). Also working with text in CSG takes a lot of real-time processing.

codesandbox here : https://codesandbox.io/s/fervent-diffie-qr140c?file=/src/App.js

Hi, the title says everything. If you visit the sandbox and display the console, you will see inputs for the geometry and the bounding box dimensions as three sees it:

0.45 0.45 0.3 w 1.0399999618530273 h 0.6951998419106007 l 1.2901498079299927
1 1 1 w 1.0001001192212104 h 1.0001001192212104 l 1.0001001192212104

Second line is ok, component with inputs 1,1,1 has bounding box with all dimensions 1
But component with inputs 0.45 0.45 0.3 has bigger bounding box which is wrong.
This happens only for some inputs and for example if you change "const e" value, this also affects the bounding box.

codesandbox

I have a problem since I need to implement the structure of a house to then perform the subtraction of the windows and doors, only that the structure is quite complex when using group within groups and then the mesh to generate the walls and so on.

The question is what would be the ideal way to generate the model and then add the subtraction of the windows and doors.

I currently design this structure but it does not work for me as it should be as it is originally generated

The structure of the code to generate the original house is the following:

<group ref={group} dispose={null} {...props}> <group position={scene.position} scale={scene.scale} rotation={scene.rotation}> <group position={walls.position} scale={walls.scale} rotation={walls.rotation}> {walls.children.map((child, index) => { return <Select enabled={selected === index ? true : false}> <mesh key={index} onClick={() => { selectedWall(index); setSelected(index) }} position={child.position} scale={child.scale} rotation={child.rotation} geometry={child.geometry} material={child.material} /> </Select> })} </group> <group position={roofs.position} scale={roofs.scale} rotation={roofs.rotation}> {roofs.children.map((child, index) => { return <mesh key={index} position={child.position} scale={child.scale} rotation={child.rotation} geometry={child.geometry} material={child.material} /> })} </group> </group> </group>

I'd like to to subtract text geometry from a mesh but I have not been able to get it to work. I get this error:

TypeError: Cannot read properties of undefined (reading 'count')
at ensureIndex (buildFunctions.js:13:1)
at buildTree (buildFunctions.js:737:1)
at buildPackedTree (buildFunctions.js:791:1)
at new MeshBVH (MeshBVH.js:164:1)
at Brush.prepareGeometry (Brush.js:68:1)
at Evaluator.evaluate (Evaluator.js:137:1)
at index.js:68:1
at index.js:91:1
at commitHookEffectListMount (react-reconciler.development.js:14669:1)
at commitLayoutEffectOnFiber (react-reconciler.development.js:14781:1)

I tested useGroups, to get different matrials before exporting my mesh. In three renderer everything looks right but after exporting the whole mesh has the color of the Subtraction. I checked it in Blender and it has two materials but they are simply on top of each other. Here you can see how it looks in Blender:

I read that your library is built around three-bvh-csg and there is an option to consolidate groups. Could this be the problem, that the materials are merged somehow?

Hi!
the library doesn't support morphTarget updates on property?
I need to update my morphs influences but seems that the library does not support this..

<Base 
      position={[0, 0, 0]} 
      geometry={geo.nodes.Main.geometry} 
      morphTargetDictionary={geo.nodes.Main.morphTargetDictionary}
      morphTargetInfluences={geo.nodes.Main.morphTargetInfluences}
>
    <meshStandardMaterial transparent />
  </Base>

You can do high quality modelling this way .

https://github.com/donalffons/opencascade.js/

These functions can be described with xml dom and so usable in this project

Another use case if pipelining many xml model descriptions to a final aggregated model using a highly effecisnt binary format.

the users edits the xml models and the binary representation up dates via the pipeline.

this pipeline can run in web workers to keep the gui thread lively.

you can then extend to server wasm for really massive models

I am seeing the WARNING: Multiple instances of Three.js being imported. message in console. I narrowed it down to this dependency. If I remove the component which uses it, the warning goes away. I am on 1.1.7.

Package.json deps :

"dependencies": {
    "@react-three/csg": "^1.1.7",
    "@react-three/drei": "^9.32.3",
    "@react-three/fiber": "^8.8.7",
    "lamina": "^1.1.23",
    "leva": "^0.9.34",
    "r3f-perf": "6.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^5.0.1",
    "three": "^0.145.0",
    "three-stdlib": "^2.20.3",
    "zustand": "4.0"
  },

I dont know if this is a bug or expected bahaviour, but in this sandbox
https://codesandbox.io/s/csg-house-forked-phdnhl?file=/src/App.js I conditionally add Subtractions only when there is enought space fore it. If the contion is true, everything is fine. But when it is false and only Base component remains, the scale of Base component is Ignored. Simple but stupid fix is to add Addition with zero scale. If this is no bug, how coul I do this in a proper way. Than you.

Hello, I'm using the example https://codesandbox.io/s/mlgzsc, and I just changed the loaded glb file from the rabbit to my own model. However, the program is reporting an error as shown in the title. What should I do?

Hello!
Im trying to implement OnPointerOver like the basic demo of React Three Fiber. Im not super experienced with the CSG part of r3f.

Currently im doing this but with no success, this is a add component that is nested in the geometry.

export default function AddFloor({ position }: AddFloorProps) {
  const addRef = useRef<any>(null!);
  const { update } = useCSG();
  const [hovered, hover] = useState<boolean>(null!);
  console.log(hovered);

  return (
    <PivotControls
      activeAxes={[true, true, true]}
      scale={1}
      anchor={[-1, 1, -1]}
      onDrag={update}
    >
        <mesh>
          <Addition
            position={position}
            ref={addRef}
            onPointerOver={() => hover(true)}
            onPointerOut={() => hover(false)}
          >
            <boxGeometry args={[1, 1, 1]} />
            <meshStandardMaterial color="orange" />
          </Addition>
        </mesh>
    </PivotControls>
  );
}

I've tried placing it on the mesh aswell but with no success. Does anyone have any pointers on what i can do next?

<mesh>
  <Subtraction>
    <Brush
      a
      geometry={nodes.LOD3spShape.geometry}
      material={materials["blinn3-fx"]}
    />
    <Brush b>
      <mesh position={[x, y, z]}>
        <boxGeometry args={[w, h, d]} />
        <meshStandardMaterial color={"#2a8aff"} />
      </mesh>
    </Brush>
  </Subtraction>
</mesh>

Duck Model URL: https://github.com/KhronosGroup/glTF-Sample-Models/blob/master/2.0/Duck/glTF-Embedded/Duck.gltf

Hi there,

Thanks for this awesome addition to the pmdrs framework !

I was already using the three-bvh-csg library in one of my projects when only today I discovered this wrapper.
I tried implementing it but I soon bumped into a limitation that I can't seem to easily resolve...

The thing is that I'm parsing the Additions/Subtractions from an external file and I have lots of them.
In my (working) code I'm currently using a reducer function to do (primarily) subtractions from my base mesh.

An extract:

return workings.reduce<Brush>((currentBrush, subtract) => {
  // do subtraction work...
  const brush2 = new Brush(subtract?.geometry.clone())
  if (subtract) {
    brush2.position.copy(subtract.position)
    brush2.rotation.copy(subtract.rotation)
  }

  brush2.updateMatrix()
  brush2.updateMatrixWorld()

  const result: Brush = csgEvaluator.evaluate(
    currentBrush,
    brush2,
    SUBTRACTION
  )
  return result
}, brush)

Unfortunately this setup is hard to reproduce using this library... Although I'm certain there must be a way of doing this.

I had a go at it in the sandbox below, but that approach does not work for more than 1 subtraction :/

function AccumulativeSubtractions({ children, config }) {
  return config.reduce((base, c) => {
    // console.log(c, base)
    return (
      <Subtraction>
        <Brush a>{base}</Brush>
        <Brush b position={c.position} rotation={c.rotation}>
          <Cylinder config={c} />
        </Brush>
      </Subtraction>
    )
  }, children)
}

Do you see an easy fix for this kind of approach ? I'm happy to contribute and make a pull request, but at the moment I don't really see how this could be implemented...

The code sandbox: https://codesandbox.io/s/react-three-csg-multi-op-test-lnpuy8?file=/src/index.js

Hello developer, I found the errors on the storybook sites.
like: https://csg.pmnd.rs/?path=/story/operations-addition--basic

Here is the screenshot: