在 Three.js 中，<primitive> 是一个 React Three Fiber (R3F) 提供的组件，用于简化对 Three.js 对象的创建和管理。它允许你将现有的 Three.js 对象作为 React 组件来使用，而不需要手动创建和管理这些对象。

什么是 <primitive>？

<primitive> 组件的主要作用是将一个现有的 Three.js 对象（如几何体、材质、光源等）包装成一个 React 组件，以便在 React 应用中更方便地使用。通过这种方式，你可以利用 React 的状态管理和生命周期方法来管理 Three.js 对象的状态和行为。

基本用法

import * as THREE from 'three';
import { Canvas, useFrame, primitive } from '@react-three/fiber';

const MyPrimitive = () => {
  const mesh = new THREE.Mesh(
    new THREE.BoxGeometry(),
    new THREE.MeshBasicMaterial({ color: 'red' })
  );

  useFrame((state, delta) => {
    mesh.rotation.x += delta;
    mesh.rotation.y += delta;
  });

  return <primitive object={mesh} />;
};

const App = () => (
  <Canvas>
    <MyPrimitive />
  </Canvas>
);

属性

object: 这是 <primitive> 组件最重要的属性，用于指定要包装的 Three.js 对象。它可以是任何 Three.js 对象，如 Mesh、Light、Camera 等。

示例

1. 创建一个旋转的立方体

import * as THREE from 'three';
import { Canvas, useFrame, primitive } from '@react-three/fiber';

const RotatingCube = () => {
  const mesh = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshBasicMaterial({ color: 'blue' })
  );

  useFrame((state, delta) => {
    mesh.rotation.x += delta;
    mesh.rotation.y += delta;
  });

  return <primitive object={mesh} />;
};

const App = () => (
  <Canvas>
    <RotatingCube />
  </Canvas>
);

2. 创建一个带有光源的场景

import * as THREE from 'three';
import { Canvas, useFrame, primitive } from '@react-three/fiber';

const LightSource = () => {
  const light = new THREE.PointLight(0xffffff, 1, 100);
  light.position.set(10, 10, 10);

  useFrame((state, delta) => {
    light.position.x = Math.sin(state.clock.elapsedTime) * 10;
    light.position.z = Math.cos(state.clock.elapsedTime) * 10;
  });

  return <primitive object={light} />;
};

const App = () => (
  <Canvas>
    <LightSource />
    <mesh>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="orange" />
    </mesh>
  </Canvas>
);

优点

复用现有对象：你可以复用已经创建好的 Three.js 对象，而不需要每次都重新创建。

状态管理：通过 React 的状态管理机制，你可以更方便地管理 Three.js 对象的状态。

生命周期管理：利用 React 的生命周期方法（如 useEffect 和 useFrame），你可以更灵活地控制 Three.js 对象的行为。

注意事项

性能：虽然 <primitive> 提供了便利，但在某些高性能要求的场景下，直接操作 Three.js 对象可能会更高效。

类型安全：使用 TypeScript 时，确保你正确地指定了 object 属性的类型，以获得更好的类型检查和开发体验。

通过 <primitive> 组件，你可以更轻松地将 Three.js 对象集成到 React 应用中，从而实现复杂的 3D 场景和动画效果。

Tags：js生命周期