babylonjs入门模版-CSDN博客

本文链接：https://blog.csdn.net/weixin_39452320/article/details/136288029

文章介绍了如何在React应用中使用babylonjs创建3D场景，并提供了封装的FastestScene组件实例，强调了组件的初始化、销毁时资源清理的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于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;