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