大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 react-babylonjs

'react-babylonjs' integrates the Babylon.js real time 3D engine with React

react-babylonjs 让开发者能够使用熟悉的声明性语法构建场景和组件，同时享受可重用组件和 Hooks 的优势。得益于代码生成，Babylon.js API 大部分以声明方式覆盖，甚至自定义 Props 也允许以声明方式添加阴影、物理、3D 模型、将 2D/3D UI 附加到网格等。

react-babylonjs 完全支持 Hooks、 TypeScript，具有元素自动完成和编译时检查。上下文 API 和 Hooks 可轻松访问场景 / 引擎 / 画布。

目前 react-babylonjs 在 Github 通过 MIT 协议开源，有超过 1k 的 star、670 + 的项目依赖量，是一个值得关注的前端开源项目。

如何使用 react-babylonjs

首先需要安装相应的依赖:

$ npm i react-babylonjs @babylonjs/core @babylonjs/gui// 或者用 yarn$ yarn add react-babylonjs @babylonjs/core @babylonjs/gui

同时，如果使用 3D 模型请确保已添加 @babylonjs/loaders NPM。其不是直接依赖项，而是通过导入将加载器注册为插件，具有副作用：

注册所有模型类型： import @babylonjs/loaders;OBJ 导入 '@babylonjs/loaders/OBJ';glTF 导入 '@babylonjs/loaders/glTF';

开发者可以以声明方式一起使用许多功能，比如：Hooks、Shadows 和 Physics。下面的代码示例添加了按钮单击处理程序，并且声明了物理、GUI、照明和阴影。

import React, {useRef} from 'react';// full code at https://github.com/brianzinn/create-react-app-typescript-babylonjsconst App: React.FC = () => { let sphereRef = useRef<Nullable<Mesh>>(); const onButtonClicked = () => { if (sphereRef.current) { sphereRef.current.physicsImpostor!.applyImpulse( Vector3.Up().scale(10), sphereRef.current.getAbsolutePosition() ); } }; return ( <Engine antialias={true} adaptToDeviceRatio={true} canvasId="sample-canvas"> <Scene enablePhysics={[gravityVector, new CannonJSPlugin()]}> <arcRotateCamera name="arc" target={ new Vector3(0, 1, 0) } alpha={-Math.PI / 2} beta={(0.5 + (Math.PI / 4))} radius={4} minZ={0.001} wheelPrecision={50} lowerRadiusLimit={8} upperRadiusLimit={20} upperBetaLimit={Math.PI / 2} /> <hemisphericLight name='hemi' direction={new Vector3(0, -1, 0)} intensity={0.8} /> <directionalLight name="shadow-light" setDirectionToTarget={[Vector3.Zero()]} direction={Vector3.Zero()} position = {new Vector3(-40, 30, -40)} intensity={0.4} shadowMinZ={1} shadowMaxZ={2500}> <shadowGenerator mapSize={1024} useBlurExponentialShadowMap={true} blurKernel={32} shadowCasters={["sphere1", "dialog"]} forceBackFacesOnly={true} depthScale={100} /> </directionalLight> <sphere ref={sphereRef} name="sphere1" diameter={2} segments={16} position={new Vector3(0, 2.5, 0)}> <physicsImpostor type={PhysicsImpostor.SphereImpostor} _options={{ mass: 1, restitution: 0.9 }} /> <plane name="dialog" size={2} position={new Vector3(0, 1.5, 0)}> <advancedDynamicTexture name="dialogTexture" height={1024} width={1024} createForParentMesh={true} hasAlpha={true}> <rectangle name="rect-1" height={0.5} width={1} thickness={12} cornerRadius={12}> <rectangle> <babylon-button name="close-icon" background="green" onPointerDownObservable={onButtonClicked}> <textBlock text={'\uf00d click me'} fontFamily="FontAwesome" fontStyle="bold" fontSize={200} color="white" /> </babylon-button> </rectangle> </rectangle> </advancedDynamicTexture> </plane> </sphere> <ground name="ground1" width={10} height={10} subdivisions={2} receiveShadows={true}> <physicsImpostor type={PhysicsImpostor.BoxImpostor} _options={{ mass: 0, restitution: 0.9 }} /> </ground> <vrExperienceHelper webVROptions={{ createDeviceOrientationCamera: false}} enableInteractions={true} /> </Scene> </Engine> );}

更多关于 react-babylonjs 的用法和示例可以参考文末资料，本文不再过多展开。

参考资料

https://github.com/brianzinn/react-babylonjs

https://brianzinn.github.io/react-babylonjs/

https://www.youtube.com/watch?v=x6baGsEQhcU

https://forum.babylonjs.com/t/babylon-ui-reactjs-dom-or-2d-canvas/600