React+three.js之项目搭建

第一步：创建 React + TS 项目

npm create vite@latest react-three-demo -- --template react-ts
cd react-three-demo
npm install

第二步：安装 three.js 和类型声明

npm install three
npm install @types/three -D

第三步：新建 Three 组件 src/ThreeScene.tsx

three.js核心七步

1. 创建场景（Scene） 2. 创建相机（Camera） 3. 创建渲染器（Renderer） 4. 创建物体（Geometry + Material + Mesh） 5. 添加物体到场景 6. 开启动画循环（animate） 7. 销毁清理（useEffect return）

import { useRef, useEffect } from 'react';
import * as THREE from 'three';

const ThreeScene = () => {
  // 容器DOM
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!containerRef.current) return;

    // 1. 创建场景（放东西的地方）
    const scene = new THREE.Scene();

    // 2. 创建相机（眼睛）
    const width = containerRef.current.clientWidth;
    const height = containerRef.current.clientHeight;
    const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
    camera.position.z = 5; //退后五步才能看到物体

    // 3. 创建渲染器（画家）把3d场景画到网页上，会生成一个canvas标签
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(width, height);
    renderer.setPixelRatio(window.devicePixelRatio);
    containerRef.current.appendChild(renderer.domElement);

    // 4. 创建物体（形状，皮肤）
    const geometry = new THREE.BoxGeometry(1, 1, 1);//形状
    const material = new THREE.MeshNormalMaterial();//材质
    const cube = new THREE.Mesh(geometry, material);//物体
    scene.add(cube);//把物体放进场景内

    // 5. 动画循环，让画面动起来
    let animateId: number;
    const animate = () => {
      animateId = requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    };
    animate();

    // 6. 窗口自适应
    const handleResize = () => {
      if (!containerRef.current) return;
      const w = containerRef.current.clientWidth;
      const h = containerRef.current.clientHeight;
      camera.aspect = w / h;
      camera.updateProjectionMatrix();
      renderer.setSize(w, h);
    };
    window.addEventListener('resize', handleResize);

    // 7. 组件销毁：释放内存、取消帧动画
    return () => {
      cancelAnimationFrame(animateId);
      window.removeEventListener('resize', handleResize);
      renderer.dispose();
      geometry.dispose();
    };
  }, []);

  return (
    <div 
      ref={containerRef} 
      style={{ width: '100vw', height: '100vh' }}
    />
  );
};

export default ThreeScene;