SceneLoader.ImportMeshreact + babylon

/* eslint-disable import/no-anonymous-default-export */

import React from “react”;

import {

ArcRotateCamera,

Vector3,

HemisphericLight,

Color3,

MeshBuilder,

SceneLoader,

} from “@babylonjs/core”;

import SceneComponent from “./SceneComponent”; // uses above component in same directory

import ‘babylonjs-loaders’;

// import SceneComponent from ‘babylonjs-hook’; // if you install ‘babylonjs-hook’ NPM.

import “./App.css”;

let box;

const onSceneReady = (scene) => {

// This creates and positions a free camera (non-mesh)

var camera = new ArcRotateCamera(

"camera1",

0,

0,

10,

new Vector3(0, 5, -10),

scene

);

// This targets the camera to scene origin

camera.setTarget(Vector3.Zero());

camera.setPosition(new Vector3(0, 0, 20));

const canvas = scene.getEngine().getRenderingCanvas();

// This attaches the camera to the canvas

camera.attachControl(canvas, true);

// This creates a light, aiming 0,1,0 - to the sky (non-mesh)

var light = new HemisphericLight(

"Hemis",

new Vector3(1000, 1000, 1000),

scene

);

// Default intensity is 1. Let’s dim the light a small amount

light.intensity = 0.7;

scene.ambientColor = new Color3(1, 1, 1);

light.diffuse = new Color3(1, 1, 1);

// 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);

let loader = SceneLoader.ImportMesh(

"",

"./buster_drone",

"scene.gltf",

scene,

function (meshes, particleSystems, skeletons) {

  console.log("meshes", meshes);

}

);

console.log(“loader”, loader);

};

/**

  • Will run on every frame render. We are spinning the box on y-axis.

*/

const onRender = (scene) => {

if (box !== undefined) {

var deltaTimeInMillis = scene.getEngine().getDeltaTime();

const rpm = 10;

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

}

};

export default () => (

<SceneComponent

  antialias

  onSceneReady={onSceneReady}

  onRender={onRender}

  id="my-canvas"

/>

);

Install @babylonjs/loaders and import it in your project

1 Like

@nogalo can u share your project

Well, I can create a demo one, but what’s the issue? Can this help you.

imports

image

create component
image

component body and export

And of course, create functions necessary functions (setScene and setCameraBehavior in my example)