[BUG]: 在react中使用时，Engine3D.init无法设置canvas

[inOwnTime]

// MyOrillusionComponent.js import React, { useEffect, useRef } from 'react'; import { Engine3D, Scene3D, CameraUtil, View3D, AtmosphericComponent, AxisObject, Object3DUtil, DirectLight, HoverCameraController } from '@orillusion/core';

const MyOrillusionComponent = () => { const canvasRef = useRef(null);

useEffect(() => { // Asynchronously import the Orillusion library since it might not be available as an ES6 module const initializeOrillusion = async () => { // Assuming Orillusion has been properly installed in the project and can be imported // Replace this with the actual initialization logic for Orillusion // ...

  // init engine
  await Engine3D.init({
    canvasConfig: { canvas: canvasRef.current }
  });
  // create new Scene
  let scene = new Scene3D();
  // add atmospheric sky
  scene.addComponent(AtmosphericComponent);

  // init camera3D
  let mainCamera = CameraUtil.createCamera3D(null, scene);
  mainCamera.perspective(60, Engine3D.aspect, 1, 2000.0);
  let hoverCameraController = mainCamera.object3D.addComponent(HoverCameraController);
  hoverCameraController.setCamera(15, -15, 10);

  // create a view with target scene and camera
  let view = new View3D();
  view.scene = scene;
  view.camera = mainCamera;

  // start render
  Engine3D.startRenderView(view);

  // create cube
  let cube = Object3DUtil.GetSingleCube(2, 4, 1, 0.7, 1, 0.5);
  cube.name = 'cube';
  scene.addChild(cube);
};

initializeOrillusion();

// Provide a cleanup function to stop rendering and clean up resources when the component unmounts
return () => {
  // Stop rendering the scene and clean up any listeners or resources here
  // ...
};

}, []);

return (

); };

export default MyOrillusionComponent; 使用上述代码会报错，但在html中直接使用Engine3D.init canvas正常

[orillusion-admin]

这个涉及到引擎框架的更新，我们后续应该会在下一个大版本更新中解决。感谢提出的反馈！

[YangyangU]

+1