r3f学习笔记

[NemoZhong]

最近几个月都在沉迷《八方旅人2》，由于最近比较空闲，想把“卡斯蒂”卡妈妈在海里的小船里漂荡的画面用react-three-fiber绘制出来。于是去网上找了个非常贴切的模型 作者只卖船，不卖海😭

[NemoZhong]

物料(模型，材质，全景图)资源地址 ✈️

[NemoZhong]

模型✈️

[NemoZhong]

虽然下载了船的模型，但是使用.obj和.mtl文件后渲染并不正确（猜测3dmax建模导出obj模型和贴图出问题了），因为.obj和.mtl文件全是配置项，故学习一下.mtl文件

• .mtl文件语句解析✈️

newmtl name 材质名称 Ka r g b a-Ambient Light-环境光反射 - r,g,b取值范围[0,1] 对应[0,255] Kd r g b d-Diffuse Lighting-漫反射光照 - Ks r g b s-Specular Lighting-镜面反射光照 -

• 😅 ,渲染出来颜色很奇怪就是因为.mtl文件里 kd漫反射加了颜色(初中知识：我们看到的物体五颜六色是因为什么？-漫反射)

• 解决方案：把kd删了，加上材质贴图 渲染出来是这样的

• 😅 实际上这个.obj文件也非常错乱，独立部件命名都和船身一样了，贴图自然也一个颜色了

[NemoZhong]

Ns 反光度 取值范围[0,1000] 用于描述镜面光照强度 illum 光照模型，取值 0-10 0 Color on and Ambient off 1 Color on and Ambient on 2 Highlight on 3 Reflection on and Ray trace on 4 Transparency: Glass on Reflection: Ray trace on 5 Reflection: Fresnel on and Ray trace on 6 Transparency: Refraction on Reflection: Fresnel off and Ray trace on 7 Transparency: Refraction on Reflection: Fresnel on and Ray trace on 8 Reflection on and Ray trace off 9 Transparency: Glass on Reflection: Ray trace off 10 Casts shadows onto invisible surfaces

😅 反射这些可以通过后期处理，实际上完全可以只要贴图。。。

[NemoZhong]

• 关于使用r3f渲染模型，使用.obj加 .mtl 加图片和 .glb 文件哪个性能好？

.glb和.gltf

• 总结，.glb省事，.obj加材质，图片资源和 非自包含的.gltf文件可单独对图片资源等进行压缩处理。实际上在建模的步骤上，把纹理图片进行压缩也一样。。。

[NemoZhong]

import { Canvas } from '@react-three/fiber';

• canvas内置了相机并且初始配置是 { fov: 75, near: 0.1, far: 1000, position: [0, 0, 5] }，所以不需要自定义相机的时候，不需要在drei中引入相机了

[NemoZhong]

import { useLoader } from '@react-three/fiber'; (常用的模型加载方式)

useLoader第四个参数回调是加载进度onProgress?: (event: ProgressEvent) => void

• obj & mtl

  const Board = () => {
  const objModel = useLoader(OBJLoader, '/models/board.obj', (loader: any) => {
  const objMaterial = useLoader(MTLLoader, '/models/board.mtl');
  loader.setMaterials(objMaterial);
  });
  useEffect(() => {
  // 设置模型初始位置大小旋转方向等
  if (objModel) {
    objModel.scale.set(0.5, 0.5, 0.5);
    objModel.position.set(0, 0.3, 0);
    objModel.rotation.set(Math.PI / 2, Math.PI, Math.PI);
  }
  }, [objModel]);
  
  return <primitive object={objModel} />;
  };

• glb & gltf

  
  export function Car() {
  const [gltf] = useLoader(GLTFLoader, ['/models/car/scene.gltf']);
  
  useEffect(() => {
  gltf.scene.scale.set(0.005, 0.005, 0.005);
  gltf.scene.position.set(0, -0.035, 0);
  gltf.scene.traverse((obj) => {
    if (obj instanceof Mesh) {
      obj.castShadow = true;
      obj.receiveShadow = true;
      obj.material.envMapIntensity = 20;
    }
  });
  }, [gltf]);
  
  return <primitive object={gltf.scene} />;
  }