Greetings,
I’m currently trying to import the example model from story book, which is the avocado and the boom box. My main problem is that any attempt to import a model causes the same error despite many things I have tried. I am able to render shapes and other simple scenes, just not model imports. I have tried a simple standard model as well, and that runs into the same issue. Here is the code I am using, so i’m hoping someone can point me in the right direction, thanks.The error is quite unspecific and not very informative:
index.js:1 The above error occurred in the component:
at ry (https://localhost:3000/static/js/1.chunk.js:293575:13) at ScaledModelWithProgress (https://localhost:3000/static/js/2.chunk.js:571:5)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
Here is the code that this is resulting from:
import React, { Component, createRef } from 'react';
import { Vector3, Color3 } from '@babylonjs/core';
import { Scene, Engine, useBeforeRender, useClick, useHover } from 'react-babylonjs';
import { ActionManager, SetValueAction } from '@babylonjs/core/Actions';
import { ScaledModelWithProgress } from './ScaledModelWithProgress'
import {
Box
} from 'grommet';
import '@babylonjs/loaders';
interface INotificationBoxProps {
};
interface INotificationBoxState {
color: Color3;
avocadoYPos: number;
avocadoScaling: number;
}
const getRandomColor = (function () {
// const Colors = ['#4F86EC', '#D9503F', '#F2BD42', '#58A55C'];
const Colors = [[0.31, 0.53, 0.93, 1], [0.85, 0.31, 0.25, 1], [0.95, 0.74, 0.26, 1], [0.35, 0.65, 0.36, 1]];
let i = 0;
return () => {
i++;
return Colors[i % Colors.length];
}
})();
// class WithUseClick extends Component<INotificationBoxProps, INotificationBoxState>
// {
// private ref = createRef<HTMLDivElement>();
// constructor(props) {
// super(props);
// this.state = {
// color: Color3.FromArray(getRandomColor()),
// avocadoYPos: -1.5,
// avocadoScaling: 3.0
// };
// }
// render() {
// return (<sphere name='sphere1' ref={this.ref}
// diameter={2} segments={32}
// position={new Vector3(0, 1, 0)}>
// <standardMaterial name='mat' diffuseColor={this.state.color} />
// </sphere>);
// }
// }
export class Client3D extends Component<INotificationBoxProps, INotificationBoxState> {
constructor(props) {
super(props);
this.state = {
color: Color3.FromArray(getRandomColor()),
avocadoYPos: -1.5,
avocadoScaling: 3.0
};
}
onModelLoaded = (model, sceneContext) => {
const mesh = model.meshes[1]
mesh.actionManager = new ActionManager(sceneContext.scene)
mesh.actionManager.registerAction(
new SetValueAction(
ActionManager.OnPointerOverTrigger,
mesh.material,
'wireframe',
true
)
)
mesh.actionManager.registerAction(
new SetValueAction(
ActionManager.OnPointerOutTrigger,
mesh.material,
'wireframe',
false
)
)
}
render() {
const baseUrl = 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/';
return (
<Box>
<Engine antialias adaptToDeviceRatio canvasId='babylonJS'>
<Scene>
<arcRotateCamera name='camera1' alpha={Math.PI / 2} beta={Math.PI / 2} radius={9.0} target={Vector3.Zero()} minZ={0.001} />
<hemisphericLight name='light1' intensity={0.7} direction={Vector3.Up()} />
<ScaledModelWithProgress rootUrl={`${baseUrl}BoomBox/glTF/`} sceneFilename='BoomBox.gltf' scaleTo={3}
progressBarColor={Color3.FromInts(255, 165, 0)} center={new Vector3(2.5, 0, 0)}
onModelLoaded={this.onModelLoaded}
/>
{/*<React.Suspense fallback={<box />}>
<Model rootUrl={`${baseUrl}Avocado/glTF/`} sceneFilename='Avocado.gltf' />
</React.Suspense>
*/}
<ScaledModelWithProgress rootUrl={`${baseUrl}Avocado/glTF/`} sceneFilename='Avocado.gltf'
scaleTo={this.state.avocadoScaling}
progressBarColor={Color3.FromInts(255, 165, 0)}
center={new Vector3(-2.5, this.state.avocadoYPos, 0)}
/>
</Scene>
</Engine>
</Box>
);
};
}
Here is the JSX file I copied from the storybook example on models:
import React, { Component } from 'react'
import { Model, Box, StandardMaterial, Mesh, withScene } from 'react-babylonjs'
import { Vector3, Matrix, Color3 } from '@babylonjs/core';
// try with later versions of RHL to get hooks working here:
// const [loadProgress, updateProgress] = useState(0)
export class ScaledModelWithProgress extends Component {
constructor() {
super()
this.state = {
loadProgress: 0
}
}
render() {
return (
<React.Fragment>
<Model
scaleToDimension={this.props.scaleTo}
onLoadProgress={(evt) => {
let modelLoadProgress = evt.lengthComputable
? evt.loaded / evt.total
: evt.loaded / (this.props.estimatedFileSize * 0.085) /* provided fileSize is not for 'view' manifest, a bad guess often, but generally factor ~0.085 smaller */
this.setState({ loadProgress: modelLoadProgress })
}}
onModelLoaded={(model) => {
this.setState({ loadProgress: 1 })
if (this.props.onModelLoaded) {
this.props.onModelLoaded(model, this.props.sceneContext)
}
}}
position={this.props.center}
rootUrl={this.props.rootUrl}
sceneFilename={this.props.sceneFilename}
pluginExtension={this.props.fileExtension}
rotation={this.props.modelRotation}
/>
{(this.state.loadProgress < 1) &&
<Mesh rotation={this.props.progressRotation} position={this.props.center}>
<Box key='progress' name='boxProgress' height={this.props.scaleTo / 15} width={this.props.scaleTo} depth={this.props.scaleTo / 30} scaling={new Vector3(this.state.loadProgress, 1, 1)}
position={new Vector3(this.props.scaleTo / 2, 0, this.props.scaleTo / 60)}
setPivotMatrix={[Matrix.Translation(-this.props.scaleTo, 0, 0)]}
setPreTransformMatrix={[Matrix.Translation(-this.props.scaleTo / 2, 0, 0)]}>
<StandardMaterial diffuseColor={this.props.progressBarColor} specularColor={Color3.Black()} />
</Box>
<Box key='back' name='boxBack' height={this.props.scaleTo / 15} width={this.props.scaleTo} depth={this.props.scaleTo / 30}
position={new Vector3(0, 0, this.props.scaleTo / -60)}
/>
</Mesh>
}
</React.Fragment>
)
}
}
Thanks for your help, its much appreciated!
Simple repo demonstrating the issue i’m running into: