How to import into App.js

Questions
1

How to import into App.js

App.js

   import React from 'react';
import { FreeCamera, Vector3, HemisphericLight, MeshBuilder } from '@babylonjs/core';
import SceneComponent from './SceneComponent';
import './App.css';
import newBox from './newBox';
let box;

const onSceneReady = scene => {
	 <newBox scene={scene} />
	
  // 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);

  // 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 => {
  if (box !== undefined) {
    var deltaTimeInMillis = scene.getEngine().getDeltaTime();

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

function App() {

  return (
    <div className="App">
      <header className="App-header">
        <SceneComponent antialias onSceneReady={onSceneReady} onRender={onRender} id='my-canvas' />
      </header>
    </div>
  );
}

export default App;

newBox.js

import React from 'react';
import {MeshBuilder} from '@babylonjs/core';

 const NewBox = props => {
	 console.log('scene ' + scene);
	 const {scene} = props;
	 
	MeshBuilder.CreateBox("box", {size: 2}, scene);

 }
export default NewBox
2

I’m not sure this is a Babylon.js question anymore. What error are you getting?

3

i don’t know how to do

4

@sebavan @syntheticmagus @bghgary

5

As Gary mentioned, the error and setup would be nice to know cause it sounds impossible to help with so little info ?

6

no error
but the box is not visible

7

@sebavan @bghgary

8

@3dObject it looks like you made a function NewBox in newBox.js, you imported that function into App.js but I’m not sure if NewBox() is ever called :slight_smile:

9

App.js 36th line

10

I’m not sure these lines create a react component that can be instantiated with <NewBox scene={scene}/>:

const NewBox = (props) => {
  const { scene } = props;
  MeshBuilder.CreateBox("box", { size: 2 }, scene);
};

But I know pretty nothing of React…

Note also that you have an error line 5 in newBox.js.

1 Like
11

Adding @brianzinn our babylon react Master :slight_smile:

12

newbox cannot be rendered like that :slight_smile: You shouldn’t be writing JSX inside a javascript callback function. You should only use JSX when you are returning it from either a functional component being rendered or a render method of a React.Component.

Oddly enough this will work (remove the console.log from NewBox, because you are using a variable before it is declared), but I don’t think it’s really what you are trying to accomplish, because then you aren’t building re-usable components - since it’s a functional component, you could do this and it defies the declarative syntax - just showing you what is possible:

import NewBox from './newBox';
...
const onSceneReady = scene => {
    // box is visible if you do this
    NewBox({ scene });
     ....
}

Keep in mind that your functional components are just functions with props and context passed in (when used in jsx).

4 Likes