Three.js进阶——在网页中渲染3D模型

[mwjuan]

安装环境

three
@react-three/fiber - Threejs的React 渲染器
@react-three/drei – react-three-fiber 的助手，包含鼠标操作功能

完整代码

// Suspense的作用见参考
import React, { Suspense } from 'react'
/**
 * Canvas设置了Scene和Camera，这是渲染所需的基本构建块,
 * 每帧渲染场景，不需要传统的渲染循环。
 * Canvas 适应父节点，因此可以通过更改父节点的宽度和高度来控制它的大小
 * 
 * useLoader模型文件加载器
 */ 
import { Canvas, useLoader } from '@react-three/fiber'
/**
 * Environment提供场景环境属性，OrbitControls提供旋转缩放功能
 */
import { Environment, OrbitControls } from "@react-three/drei";
/**
 * GLTFLoader加载.gltf格式的文件，OBJLoader加载.obj格式的文件，FBXLoader加载.fbx格式的文件 
 */
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'

// 以下为加载各种后缀的模型文件
const GlbModel = () => {
  const glb = useLoader(GLTFLoader, "./room.glb");
  return (
    <>
      <primitive object={glb.scene} />
    </>
  );
};
const GltfModel = () => {
  const gltf = useLoader(GLTFLoader, "./roomWithSurface.gltf");
  return (
    <>
      <primitive object={gltf.scene} />
    </>
  );
};

function ObjModal() {
  const obj = useLoader(OBJLoader, '/chair.obj')
  return <primitive object={obj} />
}

function FbxModal() {
  const fbx = useLoader(FBXLoader, '/chair.fbx')
  return <primitive object={fbx} />
}

function App() {
  return (
    //全屏显示
    <Canvas style={{ height: '100vh' }}>
      <Suspense fallback={null}>
        {<GltfModel />}
        {/* <GlbModel /> */}
        {/* <ObjModal /> */}
        {/* <FbxModal /> */}
        <OrbitControls />
        <Environment preset="apartment" background />
      </Suspense>
    </Canvas>
  );
}

export default App;

延伸扩展
@react-three/gltfjsx – 加载gltf格式的模型，将 GLTF 转换为 JSX 组件
@react-three/postprocessing - 效果处理库
@react-three/flex – 用于 react-three-fiber 的 flexbox，控制元素位置
@react-three/xr – VR/AR 控制器和事件
@react-three/cannon - 基于物理的钩子
@react-three/a11y - 为您的场景提供真正的 a11y
zustand – 状态管理
react-spring - 基于弹簧物理的动画库
react-use-gesture - 鼠标/触摸手势
leva - 在几秒钟内创建 GUI 控件

参考：

1. react-three/postprocessing库的使用总结
2. Suspense对React的意义在哪里?
3. Environment preset：

export const presetsObj = {
  sunset: 'venice/venice_sunset_1k.hdr',  //日落
  dawn: 'kiara/kiara_1_dawn_1k.hdr',        //黎明
  night: 'dikhololo/dikhololo_night_1k.hdr',    //晚上
  warehouse: 'empty-wharehouse/empty_warehouse_01_1k.hdr', //仓库
  forest: 'forrest-slope/forest_slope_1k.hdr',  //森林
  apartment: 'lebombo/lebombo_1k.hdr',   //公寓
  studio: 'studio-small-3/studio_small_03_1k.hdr',  //工作室
  city: 'potsdamer-platz/potsdamer_platz_1k.hdr',  //城市
  park: 'rooitou/rooitou_park_1k.hdr',   //公园
  lobby: 'st-fagans/st_fagans_interior_1k.hdr',  //大厅
}