1、獲取素材

免費(fèi)素材（是國外的網(wǎng)站）選擇HDRI下載hdr類型素材膛檀。

2、利用babylon官方提供的工具

工具地址把剛才下載的hdr文件拖拽到里面躲雅，會(huì)自動(dòng)生成.env文件籍凝，這個(gè)文件就是hdr文件壓縮過后的，它的大小是前者的一半黄琼。

3樊销、文件目錄路徑

微信截圖_20230524151653.png

4围苫、代碼實(shí)現(xiàn)

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) //  創(chuàng)建引擎  true 表示需要抗鋸齒
        this.scene = this.CreateScene()  // 創(chuàng)建場(chǎng)景
        this.engine.runRenderLoop(() => {
            this.scene.render()  // 場(chǎng)景更新
        }) //一幀一幀的 渲染

    }
    CreateScene():Scene{ // 創(chuàng)建場(chǎng)景
        const scene = new Scene(this.engine) // 創(chuàng)建場(chǎng)景
        //FreeCamera 這代表一種免費(fèi)類型的相機(jī)。例如撤师，它在第一人稱射擊游戲中很有用剂府。請(qǐng)考慮使用新的UniversalCamera，因?yàn)樗黾恿烁嗟墓δ芴甓埽热缬螒虬濉?        const camera = new FreeCamera('camera',new Vector3(0,1,-5),this.scene) // 創(chuàng)建相機(jī)  name  初始位置 渲染到場(chǎng)景中
        camera.attachControl(this.canvas,true) // 把相機(jī)附屬在 畫布上面腺占， 可以通過 鼠標(biāo)操作 相機(jī) （//  第二個(gè)參數(shù)表示 阻止瀏覽器默認(rèn)事件）
        //半球光模擬環(huán)境光淤袜，因此通過方向是光反射方向，而不是入射方向衰伯。
        const hemiLight = new HemisphericLight('hemiLight',new Vector3(0,1,0),this.scene) // 創(chuàng)建 半球環(huán)境光 
        hemiLight.intensity = 0.5 // 設(shè)置intensity 光線強(qiáng)度 默認(rèn)是1

        const envTex = CubeTexture.CreateFromPrefilteredData('PBR/sky.env',scene) //創(chuàng)建并返回由IBL-Baker或Lys等工具根據(jù)預(yù)過濾數(shù)據(jù)創(chuàng)建的紋理铡羡。
        scene.environmentTexture = envTex //創(chuàng)建 環(huán)境紋理 （在所有pbr材質(zhì)中用作反射紋理的紋理。 正如在大多數(shù)場(chǎng)景中一樣嚎研，它們是相同的（多房間等除外）蓖墅， 這比從所有材料中引用更容易。）
        scene.createDefaultSkybox(envTex,true) //創(chuàng)建新的天空盒

        const ground = MeshBuilder.CreateGround('ground',{width:10,height:10},this.scene)  // 創(chuàng)建地面

        const ball = MeshBuilder.CreateSphere('ball',{diameter:1},this.scene) // 創(chuàng)建一個(gè)球
        ball.position = new Vector3(0,1,0)

        return scene;  // 創(chuàng)建場(chǎng)景對(duì)象并將其返回給調(diào)用者临扮。

    }

}

5论矾、調(diào)用方法

import React, { useRef, useEffect } from "react";
import * as BABYLON from "babylonjs";
import 'babylonjs-loaders'
import { PBR } from './BabylonExamples/PBR/index'  // 這個(gè)是路徑注意（根據(jù)自己的情況）

const width = window.innerWidth;
const heigth =window.innerHeight;

const Home =()=>{
  useEffect(()=>{
    init();
  },[])

  // 初始化
  function init(){
    // 創(chuàng)建canvas 容器
    const canvas = document.createElement("canvas");
    // 設(shè)置 canvas 寬高
    canvas.width = width;
    canvas.height = heigth;
   
    document.body.appendChild(canvas) ;  // 添加到body中

    new PBR(canvas)  // 調(diào)用方法
   
 
  }

  
  return <></>
}

export default Home;