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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.