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

欢迎加群：464146715

官方文档 中文文档

最小模版

​

代码如下：

在react中使用

import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
import Engine from './fastest.ts';
/**
 * @description 使用3D页面
 */
const BBLFirst: FC<{ title: string }> = (props) => {
  const [my3d, setMy3d] = useState<any>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const show3D = useCallback(async () => {
    const fastestScene = new Engine(canvasRef.current as HTMLCanvasElement);
    fastestScene && setMy3d(fastestScene);
  }, []);

  useEffect(() => {
    //使用3D
    if (!my3d) show3D();

    // 在组件销毁时清理资源
    return () => {
      my3d && my3d?.dispose();
    };
  }, []); // 空数组表示仅在组件挂载时运行一次

  return (
    <canvas
      id="renderCanvas"
      ref={canvasRef}
      style={{ width: '100%', height: '100%' }}
    />
  );
};

export default BBLFirst;

ts部分

import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
import Engine from './fastest.ts';
/**
 * @description 使用3D页面
 */
const BBLFirst: FC<{ title: string }> = (props) => {
  const [my3d, setMy3d] = useState<any>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const show3D = useCallback(async () => {
    const fastestScene = new Engine(canvasRef.current as HTMLCanvasElement);
    fastestScene && setMy3d(fastestScene);
  }, []);

  useEffect(() => {
    //使用3D
    if (!my3d) show3D();

    // 在组件销毁时清理资源
    return () => {
      my3d && my3d?.dispose();
    };
  }, []); // 空数组表示仅在组件挂载时运行一次

  return (
    <canvas
      id="renderCanvas"
      ref={canvasRef}
      style={{ width: '100%', height: '100%' }}
    />
  );
};

export default BBLFirst;