浅谈babylon天空盒实现

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;