求推荐支持本地360度视频/图片拖拽浏览的React库（无需VR）

一、360度图片实现（基于Three.js + React Three Fiber） #

1. 依赖安装 #

npm install three @react-three/fiber @react-three/drei

2. 实现组件 #

import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';
import { useRef } from 'react';
import * as THREE from 'three';

const PanoramaImage = ({ imageUrl }) => {
  const sphereRef = useRef();

  return (
    <Canvas camera={{ fov: 75, position: [0, 0, 0.1] }}>
      <ambientLight intensity={1} />
      <mesh ref={sphereRef} rotation={[0, Math.PI, 0]}>
        <sphereGeometry args={[50, 64, 64]} />
        <meshBasicMaterial 
          map={new THREE.TextureLoader().load(imageUrl)} 
          side={THREE.BackSide} 
        />
      </mesh>
      <OrbitControls
        enableZoom={false}
        enablePan={false}
        enableRotate={true}
        rotateSpeed={0.5}
      />
    </Canvas>
  );
};

// 使用示例：将本地图片放在public/images目录下
// <PanoramaImage imageUrl="/images/360-panorama.jpg" />

核心说明：

• 把全景图贴在球体内壁（设置side={THREE.BackSide}），模拟沉浸式浏览环境
• 通过OrbitControls禁用缩放、平移，仅保留旋转拖拽，适配鼠标和触摸操作

二、360度视频实现（基于Three.js生态） #

1. 依赖同图片方案 #

2. 实现组件 #

import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';
import { useRef, useEffect } from 'react';
import * as THREE from 'three';

const PanoramaVideo = ({ videoUrl }) => {
  const videoRef = useRef(null);
  const textureRef = useRef(null);

  useEffect(() => {
    if (videoRef.current && textureRef.current) {
      textureRef.current.needsUpdate = true;
      videoRef.current.play();
    }
  }, []);

  return (
    <>
      <video 
        ref={videoRef} 
        loop 
        muted 
        playsInline 
        src={videoUrl} 
        style={{ display: 'none' }} 
      />
      <Canvas camera={{ fov: 75, position: [0, 0, 0.1] }}>
        <ambientLight intensity={1} />
        <mesh rotation={[0, Math.PI, 0]}>
          <sphereGeometry args={[50, 64, 64]} />
          <meshBasicMaterial side={THREE.BackSide}>
            <videoTexture attach="map" args={[videoRef.current]} ref={textureRef} />
          </meshBasicMaterial>
        </mesh>
        <OrbitControls
          enableZoom={false}
          enablePan={false}
          enableRotate={true}
          rotateSpeed={0.5}
        />
      </Canvas>
    </>
  );
};

// 使用示例：将本地视频放在public/videos目录下
// <PanoramaVideo videoUrl="/videos/360-video.mp4" />

核心说明：

• 隐藏的<video>元素用于加载本地视频，通过VideoTexture将视频内容映射到球体内壁
• 设置playsInline避免移动端自动全屏，muted满足浏览器自动播放策略

三、关键注意事项 #

• 本地资源路径：图片、视频建议放在React项目的public目录下，直接用相对路径引用
• 触摸兼容性：OrbitControls默认支持触摸拖拽，无需额外配置
• 性能优化：高分辨率360内容需提前压缩，可降低球体分段数（sphereGeometry后两个参数）减少渲染压力

内容的提问来源于stack exchange，提问作者magikarp