Início / coding / Perguntas / 77726294
Accepted
Quicksilver
Asked: 2023-12-28 18:24:56 +0800 CST

Fazendo uma grade com pontos nos vértices usando React Three Fiber

  • 772

Estou tentando fazer uma grade com pontos usando React três fibras. Tentei usar LineDashedMaterial, mas não é perfeito. Eu sou novo no threejs. Alguma ideia de como fazer uma superfície com pontos usando uma grade ou um plano?

<Canvas frameloop="demand" camera={{ position: [75, 1, 0.1], zoom: 15 }}>
<mesh>
    <gridHelper
        material={
          new THREE.LineDashedMaterial({
            dashSize: 0.1,
            gapSize: 1,
            vertexColors: true,
          })
        }
        rotation-y={[Math.PI / 2]}
        position={[0, 12.5, 0]}
        onUpdate={(grid) => grid.computeLineDistances()}
      />
</mesh>
</Canvas>

Codesandbox: aqui

O que estou tentando alcançar é algo assim

insira a descrição da imagem aqui

three.js

1 respostas

  1. Best Answer

    Experimente isso

    import "./styles.css";
import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import * as THREE from "three";

export default function App() {
  const pointsGeometry = new THREE.BufferGeometry();
  const sideLength = 10;
  const numPointsPerSide = 20;
  const pointsPositions = [];

  for (let i = 0; i < numPointsPerSide; i++) {
    for (let j = 0; j < numPointsPerSide; j++) {
      const x = (i / (numPointsPerSide - 1)) * sideLength - sideLength / 2;
      const y = 0;
      const z = (j / (numPointsPerSide - 1)) * sideLength - sideLength / 2;
      pointsPositions.push(x, y, z);
    }
  }

  pointsGeometry.setAttribute(
    "position",
    new THREE.BufferAttribute(new Float32Array(pointsPositions), 3)
  );

  return (
    <div className="App">
      <Canvas frameloop="demand" camera={{ position: [75, 1, 0.1], zoom: 4 }}>
        <mesh position={[0, 0, 0]}>
          <cylinderGeometry args={[1, 1, 25, 32, 64, false]} />
          <meshBasicMaterial color={0x00ff00} />
          <meshBasicMaterial color={0xff0000} />
          <points
            geometry={pointsGeometry}
            position={[0, 12.5, 0]}
            rotation-y={-Math.PI / 2}
          >
            <pointsMaterial color={0xff0000} size={0.1} />
          </points>
        </mesh>
        <OrbitControls />
      </Canvas>
    </div>
  );
}

    https://codesandbox.io/p/sandbox/grid-test-forked-8dmwy4?file=%2Fsrc%2FApp.tsx%3A6%2C32

    • 1

relate perguntas