How to get scene points outside of onScenePointerDown

SandraKSathish · January 17, 2023, 11:16am

Scene onScenePointerDown={this.clickEventHandler}

clickEventHandler = (e, scene) => {
let { pickedPoint } = scene.pick(scene.pointerX, scene.pointerY);
console.log(pickedPoint);
}

Here we are able to console the respective scene points, but the issue is we cannot fetch this corresponding value outside of this ‘clickEventHandler’ function even if we are assigned the value to a global variable.

And also if there is any flag value that is in true, are also getting as false inside this ‘clickEventHandler’ function. (cannot generate the actual flag value(if it is true)).

Takemura · January 17, 2023, 12:44pm

Here is a github repo, where you can see how it is accessed:

github.com

seacloud9/react-babylon-storybook/blob/0c2a1ecb02962b81d95940b677e032cbaa6b19f7/src/stories/babylonjs/basic/dragNdrop.stories.js#L8


      
          import React /* , { useState } */ from 'react'
          import { storiesOf } from '@storybook/react'
          import { Engine, Scene, Sphere, StandardMaterial, ArcRotateCamera, PointLight, Ground, Box, Torus } from 'react-babylonjs'
          import { Vector3, Color3 } from 'babylonjs'
          import '../../style.css'
          
          
// start copy from https://www.babylonjs.com/demos/dragndrop/dragdrop.js
          var startingPoint
          var currentMesh
          
          
var getGroundPosition = function (evt, scene) {
            // Use a predicate to get position on the ground
            var pickinfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh) { return mesh.name === 'ground' })
            if (pickinfo.hit) {
              return pickinfo.pickedPoint
            }
          
          
  return null

github.com

seacloud9/react-babylon-storybook/blob/0c2a1ecb02962b81d95940b677e032cbaa6b19f7/src/stories/babylonjs/basic/dragNdrop.stories.js#L32


      
            const evt = pointerInfo.event
          
          
  if (evt.button !== 0) {
              return
            }
          
          
  // check if we are under a mesh
            var pickInfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh) { return mesh.name !== 'ground' })
            if (pickInfo.hit) {
              currentMesh = pickInfo.pickedMesh
              startingPoint = getGroundPosition(evt, scene)
          
          
    const canvas = scene.getEngine().getRenderingCanvas()
          
          
    if (startingPoint) { // we need to disconnect camera from canvas
                setTimeout(function () {
                  scene.activeCamera.detachControl(canvas)
                }, 0)
              }
            }
          }

github.com

seacloud9/react-babylon-storybook/blob/0c2a1ecb02962b81d95940b677e032cbaa6b19f7/src/stories/babylonjs/basic/dragNdrop.stories.js#L76


      
            var diff = current.subtract(startingPoint)
            currentMesh.position.addInPlace(diff)
          
          
  startingPoint = current
          }
          // end copy
          
          
export default storiesOf('Babylon Basic', module)
            .add('Drag and Drop', () => (
              <Engine antialias engineOptions={{ preserveDrawingBuffer: true, stencil: true }} canvasId='babylonJS'>
                <Scene clearColor={new Color3(0, 0, 0)} onScenePointerDown={onPointerDown} onScenePointerUp={onPointerUp} onScenePointerMove={onPointerMove}>
                  <PointLight name='omni' position={new Vector3(0, 50, 0)} />
          
          
        <ArcRotateCamera name='camera' alpha={0} beta={0} radius={10} target={Vector3.Zero()} setPosition={[new Vector3(20, 200, 400)]}
                    lowerBetaLimit={0.1} upperBetaLimit={(Math.PI / 2) * 0.99} lowerRadiusLimit={150}
                  />
          
          
        <Ground name='ground' width={1000} height={1000} subdivisions={1}>
                    <StandardMaterial name='groundMat' specularColor={Color3.Black()} />
                  </Ground>

If your global variable is an class attribute you might have to additionally bind this?

Scene onScenePointerDown={this.clickEventHandler.bind(this)}