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)).
Here is a github repo, where you can see how it is accessed:
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
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)
}
}
}
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)}
4 Likes