React JS - 'BABYLON' is not defined

Questions
1

Hi,

I am new to Babylon JS and React JS, and I am trying to mix em up :slight_smile: Great start… But I have a working scene, and when I try to involve materials I get this error:

‘BABYLON’ is not defined no-undef

What could be wrong?

This is the code:

import React from ‘react’;
import { FreeCamera, Vector3, HemisphericLight, MeshBuilder } from ‘@babylonjs/core’;
import SceneComponent from ‘./SceneComponent’;
import ‘./App.css’;

let box;

const onSceneReady = scene => {

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

// – LIGHT –
// This creates a light, aiming 0,1,0 - to the sky (non-mesh)
var light = new HemisphericLight(“light”, new Vector3(0, 1, 0), scene);

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

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

// – MATERIALS –
var myMaterial = new BABYLON.StandardMaterial(“myMaterial”, scene);

myMaterial.diffuseColor = new BABYLON.Color3(1, 0, 1);
myMaterial.specularColor = new BABYLON.Color3(0.5, 0.6, 0.87);
myMaterial.emissiveColor = new BABYLON.Color3(1, 1, 1);
myMaterial.ambientColor = new BABYLON.Color3(0.23, 0.98, 0.53);

box.material = myMaterial;

// – MESH –
// 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: 10, height: 10}, scene);
}

/**

  • 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 () => (




)
2

you are mixing import (importing from babylon) and using the namespace (BABYLON.) and here you only want to rely on import.

You should basically not have any BABYLON. in the code and only use the objects you imported.

2 Likes
3

Aaa ok, then I just add StandardMaterial and Color3 to the import from @babylonjs/core then and remove BABYLON?
Btw, is this the future or should I go “back” and use the code that I find in every tutorial?

4

this would be easier to integrate in your code already relying on import and you ll be able to optimize your final package size. I would recommend this approach.

1 Like
5

Thank you @sebavan :slight_smile: Then I will try to learn it this way.