# Bizarre problem with picking meshes

**URL:** <https://forum.babylonjs.com/t/bizarre-problem-with-picking-meshes/41204>\
**Category:** Questions\
**Tags:** scene\
**Created:** [May 28, 2023, 8:50pm UTC](https://forum.babylonjs.com/t/bizarre-problem-with-picking-meshes/41204 "2023-05-28T20:50:54Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Quetzakubica](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/quetzakubica/32/32568_2.png) [@Quetzakubica](https://forum.babylonjs.com/u/Quetzakubica)\
**Post date:** [May 28, 2023, 8:50pm UTC](https://forum.babylonjs.com/t/bizarre-problem-with-picking-meshes/41204/1 "2023-05-28T20:50:54Z")

</div>

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:

```typescript
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:

```typescript
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](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/e/9edce881476923d4c4abdedf2ee00e27139aa635.jpeg)

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.

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

```

and then suddenly it works!

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/2/82bd589d4f709312a388c28d011dc80f4bc3f3c0.jpeg)

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…

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [May 28, 2023, 9:35pm UTC](https://forum.babylonjs.com/t/bizarre-problem-with-picking-meshes/41204/2 "2023-05-28T21:35:34Z")

</div>

Adding @RaananW.

---

<div class="post-metadata">

**Author:** ![MarianG](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mariang/32/138_2.png) [@MarianG](https://forum.babylonjs.com/u/MarianG)\
**Post date:** [May 29, 2023, 7:05am UTC](https://forum.babylonjs.com/t/bizarre-problem-with-picking-meshes/41204/3 "2023-05-29T07:05:08Z")

</div>

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

> **[Babylon.js ES6 support with Tree Shaking | Babylon.js Documentation](https://doc.babylonjs.com/setup/frameworkPackages/es6Support#faq)**
>
> Learn about tree shaking and package management in Babylon.js.