主页 / coding / 问题 / 77726294
Accepted
Quicksilver
Asked: 2023-12-28 18:24:56 +0800 CST

使用 React 三纤维制作顶点上有点的网格

  • 772

我正在尝试使用 React 三纤维制作一个带有点的网格。我尝试使用 LineDashedMaterial，但它并不完美。我是 Threejs 新手。知道如何使用网格或平面制作带有点的表面吗？

<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>

代码沙箱：这里

我想要实现的目标是这样的

在此输入图像描述

three.js

1 个回答

  1. Best Answer

    尝试这个

    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

相关问题