i cant pick any image and put somewhere in canvas if i select any picture then i get error like "pick" so please help me out that how can i drag n drop my picture

[Amar]

export class EngineService {

private canvas: HTMLCanvasElement;

private engine: BABYLON.Engine;

private camera1: BABYLON.ArcRotateCamera;

private scene: BABYLON.Scene;

private light: BABYLON.Light;

 

 

 

createScene(elementId: string): void {

this.canvas = <HTMLCanvasElement>document.getElementById(elementId);

this.engine = new BABYLON.Engine(this.canvas, true);

this.scene = new BABYLON.Scene(this.engine);

this.camera1 = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, new BABYLON.Vector3(0, 0, 0), this.scene);

this.camera1.setPosition(new BABYLON.Vector3(20, 200, 400));

 

this.camera1.lowerBetaLimit = 0.1;

this.camera1.upperBetaLimit = (Math.PI / 2) * 0.99;

this.camera1.lowerRadiusLimit = 150;

 

this.scene.clearColor = new BABYLON.Color4(0, 0, 0,0);

 

// Light

var light = new BABYLON.PointLight("omni", new BABYLON.Vector3(0, 50, 0), this.scene);

 

// Ground

var ground = BABYLON.Mesh.CreateGround("ground", 200, 200, 1, this.scene, false);

var groundMaterial = new BABYLON.StandardMaterial("ground", this.scene);

groundMaterial.specularColor = BABYLON.Color3.Black();

ground.material = groundMaterial;

 

// Meshes

var redSphere = BABYLON.Mesh.CreateSphere("red", 32, 20, this.scene);

var redMat = new BABYLON.StandardMaterial("ground", this.scene);

redMat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);

redMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);

redMat.emissiveColor = BABYLON.Color3.Red();

redSphere.material = redMat;

redSphere.position.y = 10;

redSphere.position.x -= 100;

 

var greenBox = BABYLON.Mesh.CreateBox("green", 20, this.scene);

var greenMat = new BABYLON.StandardMaterial("ground", this.scene);

greenMat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);

greenMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);

greenMat.emissiveColor = BABYLON.Color3.Green();

greenBox.material = greenMat;

greenBox.position.z -= 100;

greenBox.position.y = 10;

 

var blueBox = BABYLON.Mesh.CreateBox("blue", 20, this.scene);

var blueMat = new BABYLON.StandardMaterial("ground", this.scene);

blueMat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);

blueMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);

blueMat.emissiveColor = BABYLON.Color3.Blue();

blueBox.material = blueMat;

blueBox.position.x += 100;

blueBox.position.y = 10;

 

var purpleDonut = BABYLON.Mesh.CreateTorus("red", 30, 10, 32, this.scene);

var purpleMat = new BABYLON.StandardMaterial("ground", this.scene);

purpleMat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);

purpleMat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);

purpleMat.emissiveColor = BABYLON.Color3.Purple();

purpleDonut.material = purpleMat;

purpleDonut.position.y = 10;

purpleDonut.position.z += 100;

 

// Events

this.canvas = this.engine.getRenderingCanvas();

var startingPoint;

var currentMesh;

 

var getGroundPosition = function () {

// Use a predicate to get position on the ground

var pickinfo = this.scene.pick(this.scene.pointerX, this.scene.pointerY, function (mesh) { return mesh == ground; });

if (pickinfo.hit) {

return pickinfo.pickedPoint;

}

 

return null;

}

 

var onPointerDown = function (evt) {

if (evt.button !== 0) {

return;

}

 

// check if we are under a mesh

var pickInfo = this.scene.pick(this.scene.pointerX, this.scene.pointerY, function (mesh) { return mesh !== ground; });

if (pickInfo.hit) {

currentMesh = pickInfo.pickedMesh;

startingPoint = getGroundPosition();

 

if (startingPoint) {

setTimeout(function () {

this.camera1.detachControl(this.canvas);

}, 0);

}

}

}

 

var onPointerUp = function () {

if (startingPoint) {

this.camera1.attachControl(this.canvas, true);

startingPoint = null;

return;

}

}

 

var onPointerMove = function (evt) {

if (!startingPoint) {

return;

}

 

var current = getGroundPosition();

 

if (!current) {

return;

}

 

var diff = current.subtract(startingPoint);

currentMesh.position.addInPlace(diff);

 

startingPoint = current;

 

}

 

this.canvas.addEventListener("pointerdown", onPointerDown, false);

this.canvas.addEventListener("pointerup", onPointerUp, false);

this.canvas.addEventListener("pointermove", onPointerMove, false);

 

this.scene.onDispose = function () {

this.canvas.removeEventListener("pointerdown", onPointerDown);

this.canvas.removeEventListener("pointerup", onPointerUp);

this.canvas.removeEventListener("pointermove", onPointerMove);

}

 

 

};

 

 

 

ERROR TypeError: Cannot read property 'pick' of undefined
    at HTMLCanvasElement.onPointerDown (engine.service.ts:102)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3811)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:496)
    at invokeTask (zone.js:1540)
    at HTMLCanvasElement.globalZoneAwareCallback (zone.js:1577)

[ssaket]

Hello and Welcome !
It would be helpful if you can create a playground for the same, you can try -

• https://playground.babylonjs.com/ts.html (for typescript)
• https://playground.babylonjs.com/( for javascript)

Just copy-pasting the code without any indentation makes reading really difficult. Coming back to the error, it's mostly because the scene is undefined  

4 hours ago, Amar said:

ERROR TypeError: Cannot read property 'pick' of undefined

 

[Sebavan]

and mostly because this in the context of an event listener is not the this you think

try either arrow functions or bind:

this.canvas.addEventListener("pointerdown", (evt) => { this.onPointerDown(evt); }, false);

or

this.canvas.addEventListener("pointerdown", onPointerDown.bind(this), false);

[Amar]

thank you for your response "Sebavan" but still is not working,

i am getting error to using your code

 

core.js:1673 ERROR TypeError: Cannot read property 'scene' of undefined
    at onPointerDown (engine.service.ts:108)
    at HTMLCanvasElement.<anonymous> (engine.service.ts:147)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3811)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:496)
    at invokeTask (zone.js:1540)
    at HTMLCanvasElement.globalZoneAwareCallback (zone.js:1577)

[Sebavan]

Yup it is usually what happens debugging on screenshots of code.

Could you create a repro in the pg. The issue is not related to babylon here. I guess it is purely javascript.

[Amar]

yes, its pure Javascript then how i solve...??? please

[Sebavan]

We need a repro somewhere, please.