基于Threejs与Reactjs的USDZ模型网页查看实现求助

方案一：使用React封装库（推荐，适配React生态） #

1. 安装依赖 #

首先安装所需的npm包：

npm install three @react-three/fiber @react-three/drei @loaders.gl/core @loaders.gl/usd

2. 实现查看组件 #

创建一个React组件，集成USDZ加载、灯光和交互控制器：

import React, { useRef, Suspense } from 'react';
import { Canvas } from '@react-three/fiber';
import { OrbitControls, USDZLoader } from '@react-three/drei';

const LidarUSDZViewer = () => {
  const modelRef = useRef(null);

  const handleModelLoad = (model) => {
    modelRef.current = model;
    // 根据模型实际尺寸调整位置和缩放
    model.position.set(0, 0, 0);
    model.scale.set(1, 1, 1);
  };

  return (
    <div style={{ width: '100vw', height: '100vh', margin: 0, padding: 0 }}>
      <Canvas camera={{ position: [0, 5, 20], fov: 50 }}>
        {/* 基础光照系统 */}
        <ambientLight intensity={0.5} />
        <directionalLight position={[10, 10, 5]} intensity={1} />
        
        {/* 带加载状态的模型加载 */}
        <Suspense fallback={<div style={{ textAlign: 'center', marginTop: '20px' }}>加载激光雷达模型中...</div>}>
          <USDZLoader
            url="/lidar-model.usdz"  // 替换为你的模型路径（放在public目录下）
            onLoad={handleModelLoad}
            onError={(err) => console.error('模型加载失败:', err)}
          />
        </Suspense>

        {/* 交互控制器：支持拖拽旋转、滚轮缩放 */}
        <OrbitControls
          enableDamping
          dampingFactor={0.05}
          minDistance={5}
          maxDistance={100}
        />
      </Canvas>
    </div>
  );
};

export default LidarUSDZViewer;

3. 使用组件 #

在你的React页面中引入并使用这个组件即可：

import LidarUSDZViewer from './LidarUSDZViewer';

function App() {
  return (
    <div className="App">
      <LidarUSDZViewer />
    </div>
  );
}

export default App;

方案二：原生Three.js实现（无React封装） #

如果不需要React生态，也可以直接用原生Three.js编写查看页面：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>激光雷达USDZ模型查看器</title>
  <style>
    * { margin: 0; padding: 0; }
    body { overflow: hidden; }
    canvas { display: block; width: 100vw; height: 100vh; }
  </style>
</head>
<body>
  <script type="module">
    import * as THREE from 'three';
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
    import { USDZLoader } from 'three/addons/loaders/USDZLoader.js';

    // 初始化场景、相机、渲染器
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 添加灯光
    scene.add(new THREE.AmbientLight(0xffffff, 0.5));
    const dirLight = new THREE.DirectionalLight(0xffffff, 1);
    dirLight.position.set(10, 10, 5);
    scene.add(dirLight);

    // 添加交互控制器
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.05;
    controls.minDistance = 5;
    controls.maxDistance = 100;

    // 加载USDZ模型
    const loader = new USDZLoader();
    loader.load(
      '/lidar-model.usdz',
      (model) => {
        scene.add(model);
        model.position.set(0, 0, 0);
        model.scale.set(1, 1, 1);
      },
      (xhr) => console.log(`加载进度: ${Math.round(xhr.loaded/xhr.total*100)}%`),
      (err) => console.error('加载失败:', err)
    );

    // 设置相机初始位置
    camera.position.set(0, 5, 20);

    // 动画循环
    const animate = () => {
      requestAnimationFrame(animate);
      controls.update();
      renderer.render(scene, camera);
    };
    animate();

    // 监听窗口大小变化
    window.addEventListener('resize', () => {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    });
  </script>
</body>
</html>

关键注意事项 #

• 模型路径：将USDZ文件放在项目的静态资源目录（如Create React App的public文件夹），确保路径正确，避免跨域问题
• 浏览器兼容性：需要支持WebGL 2.0的现代浏览器（Chrome、Firefox、Safari 15+等）
• 性能优化：激光雷达模型通常包含大量点云/顶点，可通过以下方式优化：
  • 用Blender等工具简化模型顶点数
  • 启用模型的LOD（细节层次）功能
  • 使用Three.js的InstancedMesh处理重复几何体
• 错误排查：如果模型加载失败，打开浏览器控制台查看错误信息，常见原因包括路径错误、跨域限制、模型文件损坏

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