Bizarre problem with picking meshes

Questions
1

Hello, I have a bizarre problem with picking meshes.
This is my code roughly (can’t make playground because it’s using react and it might have an impact):

This is main component that creates canvas and initializes Babylon engine on it:

import { Engine } from "@babylonjs/core/Engines/engine"
import React, { useEffect, useRef } from "react"
import { Scene } from "@babylonjs/core"

type Props = {
    width: number
    height: number
    onLoad: (engine: Engine) => void
}

export function BabylonCanvas(props: Props) {
    const canvasRef = useRef<HTMLCanvasElement | null>(null)

    useEffect(() => {
        const canvas = canvasRef.current
        if (canvas === null) {
            throw new Error("Canvas does not exist")
        }
        const engine = new Engine(canvas, true)
        //new Scene(engine)

        props.onLoad(engine)
    }, [])

    return <canvas ref={canvasRef} width={props.width} height={props.height}></canvas>
}

and this is function that prepares environment that is called in onLoad property:

import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera"
import { Engine } from "@babylonjs/core/Engines/engine"
import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight"
import { Vector3 } from "@babylonjs/core/Maths/math.vector"
import { DefaultRenderingPipeline } from "@babylonjs/core/PostProcesses/RenderPipeline"
import { Scene } from "@babylonjs/core/scene"

export type Babylon = {
    scene: Scene
    engine: Engine
}

export function setupBabylon(engine: Engine): Babylon {
    const scene = new Scene(engine)

    const cameraSettings = { alfa: -Math.PI / 2, beta: (Math.PI * 2) / 6, radius: 10, target: new Vector3(0, 0, 0) }
    const camera = new ArcRotateCamera("ArcRotateCamera", cameraSettings.alfa, cameraSettings.beta, cameraSettings.radius, cameraSettings.target, scene)
    camera.attachControl(null, true)

    new HemisphericLight("light", new Vector3(0, 20, 0), scene)

    new DefaultRenderingPipeline("pipeline", false, scene, scene.cameras)

    engine.runRenderLoop(function () {
        scene.render()
    })
    window.addEventListener("resize", function () {
        engine.resize()
    })

    scene.onPointerMove = (ev, pickInfo) => {
        console.log("move", pickInfo)
    }

    return {
        scene,
        engine,
    }
}

Also there is some rendering done after setup, you will see in screenshots below.

As you can see I have console.log in onPointerMove and in this state it’s always returning hit: false, screenshot below:

image
image1920×1043 199 KB

BUT just one small change is enough to fix this and I have no idea why it fixes it, I came to that solution after long hours of debugging. Basically you need to create Scene just after the Engine is created.

        const engine = new Engine(canvas, true)
        new Scene(engine)

and then suddenly it works!

image
image1920×1015 211 KB

So now I have two scenes created and only to the second one meshes are added.

Does anyone have any idea what is going on here?

UPDATE: I did some further debugging and it looks that what has impact is not when I create Scene but from what I import it, so when I import it from "@babylonjs/core/scene" then it does not work, but when it’s imported from "@babylonjs/core" then it works…

2

Adding @RaananW.

1 Like
3

I think you have to
import "@babylonjs/core/Culling/ray";
for picking

4 Likes