基于babylonjs封装的一些功能和插件 ，希望有更多的小伙伴一起玩babylonjs；

欢迎加群：464146715

官方文档 中文文档

Babylonjs案例分享

​

import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
import TemplateBBL from './template.ts';
/*** @description 使用3D页面*/
const TemplateBasicBBL: FC<{ title: string }> = (props) => {const canvasRef = useRef<HTMLCanvasElement>(null);const [my3d, setMy3d] = useState<any>(null);const show3D = useCallback(async () => {const basicScene = new TemplateBBL({canvas: canvasRef.current,});basicScene && setMy3d(basicScene);}, []);useEffect(() => {//使用3Dif (!my3d) show3D();// 在组件销毁时清理资源return () => {my3d && my3d?.dispose();};}, []); // 空数组表示仅在组件挂载时运行一次return <canvas ref={canvasRef} style={{ width: '100%', height: '100%' }} />;
};export default TemplateBasicBBL;

import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
import TemplateBBL from './template.ts';
/*** @description 使用3D页面*/
const TemplateBasicBBL: FC<{ title: string }> = (props) => {const canvasRef = useRef<HTMLCanvasElement>(null);const [my3d, setMy3d] = useState<any>(null);const show3D = useCallback(async () => {const basicScene = new TemplateBBL({canvas: canvasRef.current,});basicScene && setMy3d(basicScene);}, []);useEffect(() => {//使用3Dif (!my3d) show3D();// 在组件销毁时清理资源return () => {my3d && my3d?.dispose();};}, []); // 空数组表示仅在组件挂载时运行一次return <canvas ref={canvasRef} style={{ width: '100%', height: '100%' }} />;
};export default TemplateBasicBBL;

import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
import TemplateBBL from './template.ts';
/*** @description 使用3D页面*/
const TemplateBasicBBL: FC<{ title: string }> = (props) => {const canvasRef = useRef<HTMLCanvasElement>(null);const [my3d, setMy3d] = useState<any>(null);const show3D = useCallback(async () => {const basicScene = new TemplateBBL({canvas: canvasRef.current,});basicScene && setMy3d(basicScene);}, []);useEffect(() => {//使用3Dif (!my3d) show3D();// 在组件销毁时清理资源return () => {my3d && my3d?.dispose();};}, []); // 空数组表示仅在组件挂载时运行一次return <canvas ref={canvasRef} style={{ width: '100%', height: '100%' }} />;
};export default TemplateBasicBBL;