1、获取素材
免费素材（是国外的网站）选择HDRI下载hdr类型素材。
2、利用babylon官方提供的工具
工具地址把刚才下载的hdr文件拖拽到里面，会自动生成.env文件，这个文件就是hdr文件压缩过后的，它的大小是前者的一半。
3、文件目录路径
我这个项目是用react写的，打包之后静态文件默认在public文件夹里面，所以文件目录如下：
微信截图_20230524151653.png
4、代码实现
import {Scene, Engine,FreeCamera,Vector3,HemisphericLight,MeshBuilder,CubeTexture} from '@babylonjs/core' // babylon TypeScript 类型声明文件
export class PBR {
scene:Scene;
engine:Engine;
constructor(private canvas:HTMLCanvasElement){
this.engine =new Engine(this.canvas,true) // 创建引擎 true 表示需要抗锯齿
this.scene = this.CreateScene() // 创建场景
this.engine.runRenderLoop(() => {
this.scene.render() // 场景更新
}) //一帧一帧的 渲染
}
CreateScene():Scene{ // 创建场景
const scene = new Scene(this.engine) // 创建场景
//FreeCamera 这代表一种免费类型的相机。例如，它在第一人称射击游戏中很有用。请考虑使用新的UniversalCamera，因为它增加了更多的功能，比如游戏板。
const camera = new FreeCamera('camera',new Vector3(0,1,-5),this.scene) // 创建相机 name 初始位置 渲染到场景中
camera.attachControl(this.canvas,true) // 把相机附属在 画布上面， 可以通过 鼠标操作 相机 （// 第二个参数表示 阻止浏览器默认事件）
//半球光模拟环境光，因此通过方向是光反射方向，而不是入射方向。
const hemiLight = new HemisphericLight('hemiLight',new Vector3(0,1,0),this.scene) // 创建 半球环境光
hemiLight.intensity = 0.5 // 设置intensity 光线强度 默认是1
const envTex = CubeTexture.CreateFromPrefilteredData('PBR/sky.env',scene) //创建并返回由IBL-Baker或Lys等工具根据预过滤数据创建的纹理。
scene.environmentTexture = envTex //创建 环境纹理 （在所有pbr材质中用作反射纹理的纹理。 正如在大多数场景中一样，它们是相同的（多房间等除外）， 这比从所有材料中引用更容易。）
scene.createDefaultSkybox(envTex,true) //创建新的天空盒
const ground = MeshBuilder.CreateGround('ground',{width:10,height:10},this.scene) // 创建地面
const ball = MeshBuilder.CreateSphere('ball',{diameter:1},this.scene) // 创建一个球
ball.position = new Vector3(0,1,0)
return scene; // 创建场景对象并将其返回给调用者。
}
}
5、调用方法
import React, { useRef, useEffect } from "react";
import * as BABYLON from "babylonjs";
import 'babylonjs-loaders'
import { PBR } from './BabylonExamples/PBR/index' // 这个是路径注意（根据自己的情况）
const width = window.innerWidth;
const heigth =window.innerHeight;
const Home =()=>{
useEffect(()=>{
init();
},[])
// 初始化
function init(){
// 创建canvas 容器
const canvas = document.createElement("canvas");
// 设置 canvas 宽高
canvas.width = width;
canvas.height = heigth;
document.body.appendChild(canvas) ; // 添加到body中
new PBR(canvas) // 调用方法
}
return <></>
}
export default Home;
