I am facing model rendering issue while load model dynamically

Questions
1

While rendering the model using reactjs with npm @Babylonjs/core packages. My model is lacking and taking more time to load and sometimes my model color is going white. Also, I am getting some warnings like:
**
page-flip.browser.js:1 [Violation] Added non-passive event listener to a scroll-blocking ‘touchstart’ event. Consider marking event handler as ‘passive’ to make the page more responsive. See Chrome Platform Status
**
My Code is :

import React from 'react'
import { Scene, Engine, Vector3, HemisphericLight, SceneLoader, ArcRotateCamera, Color4, ValidatedNativeDataStream } from "@babylonjs/core"
import { useEffect } from 'react'
import "@babylonjs/loaders"
import './canvas.css'
import { useRef } from 'react'
const Canvas = ({ poppet }) => {
    let isLoadOne = false;
    const canvas=useRef({})
    canvas.current=document.querySelector('canvas');
    let engine = new Engine(canvas.current, true);
    useEffect(() => {
        (async () => {
            let scene = new Scene(engine)
            try {
                scene = await createScene(canvas.current, scene, poppet)

                if (!isLoadOne) {
                    isLoadOne = true;
                    await engine.runRenderLoop(async () => {
                        await scene.render();
                    })
                }
            } catch (e) {
                console.log(e)
            }
        })()
    }, [poppet])

    const createScene = async (canvas, scene, fileName = "barrel.glb") => {
        const camera = new ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2, -2, new Vector3(0, 0.5, 0), scene, true)
        camera.attachControl(canvas, true);
        camera.detachControl();
        const hemiLight = new HemisphericLight("light1", new Vector3(0, 1, 0), scene);
        hemiLight.intensity = 4
        await SceneLoader.ImportMeshAsync(null, "./models/", fileName, scene)

        scene.clearColor = new Color4(0, 0, 0, 0)

        return scene
    }
    return (
        <canvas></canvas>
    )
}

export default Canvas

I am a beginner. Please help me out with this issue.
Thank you

Screenshot (31)

image
image413×549 44.3 KB

2

I know little about react, but a couple of suggestions:

First, posting wise, this forum is uses mark up language, so you can sandwich your multi-line code samples with a before line of 3 back quotes followed with the language name, and a after line of 3 back quotes. Things will be much more readable.

Also, it might be better to delay adding the render loop until everything is ready using

scene.executeWhenReady(() => {
     engine.runRenderLoop(() => {
           scene.render();
       });   
});

You can then toss all the await stuff. It does not work as you intend.

Finally, if you are going to import the entire file, using SceneLoader.Append() you can avoid need less checking of “whether something is being requested?” You want everything.

I believe GLB is always loading PBR materials, so you may also wish to move away from lights to environment textures, but you did not ask about that.

1 Like
3

This is more of a React question than a babylon question but I’ll do my best to point you in the right direction.

Writing variables outside of a useEffect or useState will lead to things being reset every draw. This will lead to some weird stuff happening, like useEffects running each render rather than just once.

I’ve written a quick React viewer to help you get to grips with how it all works.

2 Likes
4

Thank you for your suggestion @JCPalmer.

5

Thank you @link2twenty , I tried with your reference viewer. And finally, it is working as per my needs.

1 Like