react-three-fiber学习记录

资源篇

可下载模型的网址:sketchfab
react-three-fiber学习记录_第1张图片

工具篇:

  1. 将模型文件自动转换为jsx
    gltfjsx
    gitHub地址:
    https://github.com/pmndrs/gltfjsx
  2. 模型库
    https://github.com/KhronosGroup/glTF-Sample-Models
  3. @react-three/drei
    https://github.com/pmndrs/drei
    react-three/drei 中常用组件 Loader,展示一个loading指数加载过渡场景
    useGLTF 可用来加载模型文件
    react-three-fiber学习记录_第2张图片
开发中注意:
  1. 使用gltfjsx或者useGLTF时,模型文件必须放在public目录下。
  2. 模型导入时,一般是黑色的。需要添加灯光,常见的灯光有环境光、平行光、点光源。平行光类似于太阳光,可以投射阴影。

你可能感兴趣的:(three.js,React,react,three,three.js)