How to use PCD Loader?

[bgyooPtr]

I'm writing a typescript that loads a PCD file.
However, the following error occurs in primitive component.
How can it be solved?

Unknown property 'object' found

my_model.tsx

import React, { FC, Suspense } from 'react';
import { PCDLoader } from 'three/examples/jsm/loaders/PCDLoader';
import { Canvas, useLoader } from '@react-three/fiber';
import { OrbitControls, Environment } from '@react-three/drei';

const Model = () => {
  const obj = useLoader(PCDLoader, 'assets/models/model.pcd');
  console.log(obj);
  return <primitive object={obj} scale={0.4} />;
};

[alec-watts]

Did you ever solve this?

[drcmda]

there's nothing to it

function Foo(props) {
  const obj = useLoader(PCDLoader, 'file.pcd')
  return <primitive object={obj} {...props} />
}

https://codesandbox.io/s/pcdloader-tephow?file=/src/App.js

rule of thumb, everything that works in three works in fiber, every loader works as it always did, or optionally through useLoader, which is preferable as it integrates loading into react suspense.

[PerseyNata]

say me too how resolve

[bgyooPtr]

I don't remember exactly because I wrote this code a long time ago, but I solved it like this.
I hope this code helps you.

const Model = async ({
  url,
  callback,
  loaderType = LoaderType.pcd,
}: {
  url: string;
  callback?: (geometry: ThreeJSDataType) => void;
  loaderType?: LoaderType;
}) => {
  let loader;
  if (loaderType === LoaderType.pcd) {
    loader = new PCDLoader();
    const geometry = await loader.loadAsync(url);
    return geometry;
  } else {
    loader = new STLLoader();
    const material = new MeshPhysicalMaterial({
      color: 0xb2ffc8,
      // envMap: envTexture,
      metalness: 0.25,
      // roughness: 0.1,
      opacity: 1.0,
      transparent: true,
      transmission: 0.69,
      clearcoat: 1.0,
      clearcoatRoughness: 0.25,
    });
    const geometry = await loader.loadAsync(url);
    geometry.scale(0.001, 0.001, 0.001);

    geometry.rotateX(-Math.PI / 2);
    geometry.rotateZ(-Math.PI / 2);

    if (callback) {
      callback(geometry);
    }

    return new Mesh(geometry, material);
  }
};

export const FooComponent: FC<{url: string;}> = ({url}) => {
  const [model, fetchModel] = useAsyncFn((url: string) => {
    return Model({ url: url });
  }, []);
  
  return (
    <div>
      ...
      {model.value && <primitive object={model.value} />}
      ...
    </div>  
}