1

i use dependencies

"@react-three/drei": "7.5.1",
"@react-three/fiber": "6.2.3",
"@types/three": "0.128.0",
/* eslint-disable new-cap */
/* eslint-disable no-nested-ternary */
import React, { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
import * as THREE from 'three';
import { useThree } from '@react-three/fiber';
import BMJUA from './BMJUA.json';
import GeometryUtils from './GeometryUtils';

const Particle = ({
  children,
  vAlign = 'center',
  hAlign = 'center',
  size = 40,
  color = '#0000ef',
  ref,
}: any) => {
  const font = new THREE.FontLoader().parse(BMJUA);
  const config = useMemo(
    () => ({ font, size: 40, height: 3, bevelSegments: 5, step: 10 }),
    [font]
  );
  const textGeoRef = useRef<THREE.TextGeometry>();

  return (
    <group ref={ref}>
      <points>
        <textGeometry
          ref={textGeoRef}
          attach="geometry"
          args={[children, config]}
        />
        <pointsMaterial size={1} sizeAttenuation vertexColors color="lime" />
      </points>
    </group>
  );
};

export default Particle;


i tried text with points mesh

But I got the missing points.

my program screen

Why are there no intermediate midpoints?

I want to add a function to adjust the position of the text point.

Please help me

Y Eng
  • 13
  • 3

0 Answers0