Sign in to follow this  
Amar

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

Recommended Posts

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);
}
 
 
};
bug.thumb.png.3f85b5f846be9e720343766dbb9b6b64.png
 
 
 
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)

Share this post


Link to post
Share on other sites

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

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

 

Share this post


Link to post
Share on other sites

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);

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.