React Babylon Loader OBJ File

Question

I am try to integrate React with babylong to load an obj file, I use the example from the page, but I don't understand how to use the loader on babylon. I had this code implementation:

import React from "react";
import { FreeCamera, Vector3, HemisphericLight, MeshBuilder, SceneLoader } from "@babylonjs/core";
import SceneComponent from 'babylonjs-hook'; // if you install 'babylonjs-hook' NPM.

let box: any;
interface Viewer3DProps {
    item: any
}

const onSceneReadyPrevious = (item: any) => {
return (scene: any) => {
    // This creates and positions a free camera (non-mesh)
    var camera = new FreeCamera("camera1", new Vector3(0, 5, -10), scene);
  
    // This targets the camera to scene origin
    camera.setTarget(Vector3.Zero());

    const canvas = scene.getEngine().getRenderingCanvas();
  
    // This attaches the camera to the canvas
    camera.attachControl(canvas, true);

    SceneLoader.Load("", item, scene.getEngine(), function (scene) {});
  
    // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
    //var light = new HemisphericLight("light", new Vector3(0, 1, 0), scene);
  
    // Default intensity is 1. Let's dim the light a small amount
    //light.intensity = 0.7;
  
    // Our built-in 'box' shape.
    //box = MeshBuilder.CreateBox("box", { size: 2 }, scene);
  
    // Move the box upward 1/2 its height
    //box.position.y = 1;
  
    // Our built-in 'ground' shape.
    // MeshBuilder.CreateGround("ground", { width: 6, height: 6 }, scene);
  };
}

/**
 * Will run on every frame render.  We are spinning the box on y-axis.
 */
const onRender = (scene: any) => {
  if (box !== undefined) {
    var deltaTimeInMillis = scene.getEngine().getDeltaTime();

    const rpm = 10;
    box.rotation.y += (rpm / 60) * Math.PI * 2 * (deltaTimeInMillis / 1000);
  }
};

export default (props: Viewer3DProps) => {
    const { item } = props
    return (
        <div>
            <SceneComponent antialias onSceneReady={onSceneReadyPrevious(item)} onRender={onRender} id="my-canvas" />
        </div>
    )
}

Any advise to how implements it the file is an object:

lastModified: 1634048626000
lastModifiedDate: Tue Oct 12 2021 10:23:46 GMT-0400 (Bolivia Time)
[[Prototype]]: Object
name: "spine-merged-mesh.obj"
size: 6516261
type: ""
uid: "rc-upload-1634699607864-3"
webkitRelativePath: ""

The item is a file option that I add into the SceneLoader from React

React Babylon Loader OBJ File

0 Answers0