How do I use PointNodeMaterials in React Three Fiber?

[Ludobico]

Hello,
I've come across some source code that implements a GLTF model animated with ThreeJS as a PointCloud.

When I tried to change it to react format with this code and use it, I got this error.

Uncaught TypeError: Cannot read properties of undefined (reading 'value')

and this is the code that i used

import * as THREE from 'three';
import { uniform, skinning, PointsNodeMaterial } from 'three/examples/jsm/nodes/Nodes.js';

const GltfModel = () => {
  let scene, mixer;
  const gltf = useLoader(GLTFLoader, '/models/Michelle.glb');
  mixer = new THREE.AnimationMixer(gltf.scene);
  const action = mixer.clipAction(gltf.animations[0]);
  scene = new THREE.Scene();

  action.play();
  gltf.scene.traverse((mesh) => {
    if (mesh.isMesh) {
      mesh.visible = false;
      const materialPoints = new PointsNodeMaterial();
      materialPoints.colorNode = uniform(new THREE.Color());
      materialPoints.positionNode = skinning(mesh);

      const pointCloud = new THREE.Points(mesh.geometry, materialPoints);
      scene.add(pointCloud);
    }
  });
  scene.add(gltf.scene);
  useFrame((state, delta) => {
    mixer.update(delta);
  });
  return <primitive object={scene} scale={1} position={[0, 1, 0]} />;
};

const Scene = () => {
  const aspect_ratio = window.innerWidth / window.innerHeight;
  const cameraRef = useRef();
  const cameraHandler = () => {
    // console.log(cameraRef.current);
  };
  const pervPosition = new THREE.Vector3(1.03, 0.95, 1.1);
  return (
    <>
      <directionalLight intensity={5} />
      <OrbitControls enableRotate={true} onChange={cameraHandler} />
      <PerspectiveCamera
        makeDefault
        aspect={aspect_ratio}
        castShadow={true}
        far={1000}
        focus={10}
        fov={75}
        near={0.1}
        position={pervPosition}
        rotation={[-0.71, 0.62, 0.46]}
        ref={cameraRef}
      />
      <Light />
      {/* <PointGltfModel /> */}
      <GltfModel />
      {/* <GeometryScene /> */}
    </>
  );
};

const ThreeContainer = () => {
  return (
    <div className="scene_container">
      <Canvas style={{ width: '100vw', height: '100vh' }}>
        <Scene />
      </Canvas>
    </div>
  );
};

How do I fix it?

I'll also share the code implemented in threejs.

https://threejs.org/examples/?q=point#webgpu_skinning_points

[CodyJasonBennett]

Imperative code should live in effects or a useMemo if pure and reactive.

import { createRoot } from 'react-dom/client'
import { OrbitControls, useGLTF } from '@react-three/drei'
import { extend, useFrame, Canvas } from '@react-three/fiber'
import { useMemo, Suspense } from 'react'
import * as THREE from 'three'
import { uniform, skinning, PointsNodeMaterial } from 'three/nodes'
import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js'

class PointsNode extends THREE.Points {
  constructor(node) {
    const material = new PointsNodeMaterial()
    material.colorNode = uniform(new THREE.Color())
    material.positionNode = skinning(node)
    super(node.geometry, material)
  }
}
extend({ PointsNode })

function Model() {
  const gltf = useGLTF('models/gltf/Michelle.glb')

  const mixer = useMemo(() => new THREE.AnimationMixer(gltf.scene), [gltf])
  useFrame((_, delta) => mixer.update(delta))

  const points = useMemo(() => {
    const _points = []
    gltf.scene.traverse((node) => node.isMesh && _points.push(node))
    return _points
  }, [gltf])

  return (
    <>
      <primitive visible={false} object={gltf.scene} />
      {points.map((point) => (
        <pointsNode key={point.uuid} args={[point]} />
      ))}
    </>
  )
}

createRoot(root).render(
  <Canvas
    frameloop="never"
    gl={(canvas) => new WebGPURenderer({ canvas })}
    camera={{ fov: 50, position: [0, 300, -85] }}
    onCreated={(state) => {
      state.gl.init().then(() => state.set({ frameloop: 'always' }))
    }}
  >
    <Suspense>
      <Model />
    </Suspense>
    <OrbitControls target={[0, 0, -85]} />
  </Canvas>,
)