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
// ...
};
// 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 // ...
}, []);
return (
); };
export default MyOrillusionComponent; 使用上述代码会报错,但在html中直接使用Engine3D.init canvas正常