Picker not working

michaeltrim · September 16, 2016

So I have the following setup inside my SceneLoader - pickResult.hit is always false? Any suggestions on where to look?

newScene.onPointerDown = function(evt, pickResult){

console.log(evt);
console.log(pickResult);

if(pickResult.hit){
console.log('hit');
}

}

Dad72 · September 16, 2016

Can you reproduce an example on the playground:

For example here it works: http://www.babylonjs-playground.com/#1FB2UX#1

michaeltrim · September 16, 2016

Thats the example I worked from - I can't really put the model online but here is the JavaScript

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Babylon test</title>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0">
    <script src="babylon.2.5.latest.js"></script>
    <script src="http://www.catuhe.com/msdn/handjs/hand.minified-1.2.1.js"></script>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
        }

        #renderCanvas {
            /*width: 800px;
            height: 426px;*/
            width: 100%;
            height: 100%;
           /*  width: 1920px;
            height: 1080px;*/
        }
    </style>
</head>
<body>
    <canvas id="renderCanvas"></canvas>

    <script>
    if (BABYLON.Engine.isSupported()) {


        var canvas = document.getElementById("renderCanvas");
        var engine = new BABYLON.Engine(canvas, true);
        
        //override retina display for performance
        engine.setHardwareScalingLevel(1);
        console.log(engine.getHardwareScalingLevel());


        var dir = "binary/";
        var file = "1.babylon";

        engine.loadingUIBackgroundColor = "#f8f7f5";
        engine.loadingUIText = "Please wait";
        

        BABYLON.SceneLoader.Load(dir, file, engine, function (newScene) {
            // Wait for textures and shaders to be ready
            
            engine.hideLoadingUI();

            newScene.executeWhenReady(function () {
 
                var skyColor = new BABYLON.Color3( 223 / 255, 228 / 255, 239/255);
                var specColor = new BABYLON.Color3( 27 / 255, 33 / 255, 58/255);

                newScene.clearColor = skyColor;

                var light0 = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 1, 0), newScene);
                light0.diffuse = new BABYLON.Color3(1, 1, 1);
                light0.specular = specColor;

                //adjust intensity of light in the babylon model               
                newScene.lights[0].intensity = 3 //;

                var camera = new BABYLON.ArcRotateCamera("Camera", 3 * Math.PI / 2, 1, 500, BABYLON.Vector3.Zero(), newScene);

                newScene.onPointerDown =  function(evt, pickResult){

                    console.log(evt);
                    console.log(pickResult);

                    if(pickResult.hit){
                        console.log('hit');
                    }

                }

                newScene.activeCamera.maxZ = 750;

                var makeTextPlane = function(text, color, size) {
                    var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", 50, newScene, true);
                    dynamicTexture.hasAlpha = true;
                    dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color , "transparent", true);
                    
                    var plane = BABYLON.Mesh.CreatePlane("TextPlane", size, newScene, true);
                    plane.material = new BABYLON.StandardMaterial("TextPlaneMaterial", newScene);
                    plane.material.backFaceCulling = false;
                    plane.material.specularColor = new BABYLON.Color3(0, 0, 0);
                    plane.material.diffuseTexture = dynamicTexture;
                    return plane;
                };

 
                var yahPlane = newScene.getMeshByName('pPlane7');

                newScene.getMeshByName('Bush3').material.backFaceCulling = false;
                newScene.getMeshByName('pasted__Bush1').material.backFaceCulling = false;
                newScene.getMeshByName('pasted__WindowUV1').material.backFaceCulling = false;
                newScene.getMeshByName('pasted__windowUV2').material.backFaceCulling = false;
                newScene.getMeshByName('RoofCobbleStone').material.backFaceCulling = false;

                var mesh1 = newScene.getMeshByName('pasted__WindowUV1');
                var mesh2 = newScene.getMeshByName('pasted__windowUV2')
                var mesh3 = newScene.getMeshByName('pasted__window4');

                mesh1.material.specularColor = specColor;
                mesh2.material.specularColor = specColor;
                mesh3.material.specularColor = specColor;

                mesh1.specularPower = 30;
                mesh2.specularPower = 30;
                mesh3.specularPower = 30;

                // /*-*/
                var yahRotate = new BABYLON.Animation("yahRotateAnim", "rotation.y", 25, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
                 var keyFramesYahRotate = [
                    {frame: 0, value: 0},
                    {frame: 1800, value: 180}
                ];
                yahRotate.setKeys(keyFramesYahRotate);
                yahPlane.animations.push(yahRotate);

                newScene.beginAnimation(yahPlane, 0, 1800, true);  


                var canvas2D = new BABYLON.ScreenSpaceCanvas2D(newScene, {
                    id: "ScreenCanvas"
                });


                var rectBGColor = new BABYLON.Color4(1,1,1,.8);
                var rectFill = new BABYLON.SolidColorBrush2D(rectBGColor, true);
                var textColor = new BABYLON.Color4(236/255, 104/255, 17/255, 1);

                var rectWidth = 300;
                var rectHeight = 75;
                var rectYOffset = 75;

                var yahRect = new BABYLON.Group2D({
                    parent: canvas2D, id: "yahRect", width: rectWidth, height: rectHeight, trackNode: yahPlane, origin: BABYLON.Vector2.Zero(),
                    children: [
                        new BABYLON.Rectangle2D({
                            id: "yahLabelRect", 
                            width: rectWidth, height: rectHeight, 
                            x: -(rectWidth/2), y: rectYOffset, origin: BABYLON.Vector2.Zero(), 
                            fill: rectFill, roundRadius: 10,
                            children: [
                                 new BABYLON.Text2D("You are in main reception", 
                                                    { marginAlignment: "h: center, v:center", 
                                                      fontName: "bold 12pt Arial",
                                                      defaultFontColor: textColor })
                            ]
                        })
                    ]
                })


                camera.setTarget(yahPlane);

                newScene.activeCamera = camera;
                newScene.activeCamera.attachControl(canvas);

                newScene.activeCamera.attachControl(canvas2D);

                newScene.beforeRender = function () {
                    
                    camera.alpha += .005;
                }

                // Once the scene is loaded, just register a render loop to render it
                engine.runRenderLoop(function() {
                    
                    newScene.render();
                });
            });
        }, function (progress) {
            // To do: give progress feedback to user
            //console.log(progress);
        });



        
    }
</script>
</body>
</html>

adam · September 16, 2016

Try loading your scene like this:

adam · September 16, 2016

You could also try using jQuery PEP instead of Hand.js.

https://github.com/jquery/PEP

michaeltrim · September 16, 2016

@adam Thanks, have tried both those things (can see the benefit of both) but makes no difference to picker.

{hit: false, distance: 0, pickedPoint: null, pickedMesh: null, bu: 0…}

adam · September 16, 2016

Does it work if you comment out this line?

newScene.activeCamera.attachControl(canvas2D);

michaeltrim · September 16, 2016

Yes I tried that already, made no difference.

What I did notice is if I output:

console.log(evt);
console.log(pickResult);

In the playground example the output evt in chrome dev tools is an Event

Event {isTrusted: false, view: Window, detail: 3, screenX: 1250, screenY: 302…}_target: canvas#renderCanvasaltKey: falsebubbles: truebutton: 0buttons: 1cancelBubble: falsecancelable: trueclientX: 1118clientY: 182composed: falsectrlKey: falsecurrentTarget: nulldefaultPrevented: falsedetail: 3eventPhase: 0height: 0hwTimestamp: 0isPrimary: trueisTrusted: falsemetaKey: falsepageX: 1118pageY: 182path: Array[7]pointerId: 1pointerType: "mouse"pressure: 0.5preventDefault: ()relatedTarget: nullreturnValue: truescreenX: 1250screenY: 302shiftKey: falsesrcElement: canvas#renderCanvastarget: canvas#renderCanvastiltX: 0tiltY: 0timeStamp: 102841.68000000001type: "pointerdown"view: Windowwidth: 0x: 1118y: 182__proto__: Event
VM78:24 t {hit: true, distance: 29.17956961734487, pickedPoint: i, pickedMesh: r, bu: 0.000004900262683614159…}

where as in my app it is a MouseEvent

MouseEvent {isTrusted: false, isPrimary: true, pressure: 0.5, rotation: 0, hwTimestamp: 0…}POINTER_TYPE_MOUSE: "mouse"POINTER_TYPE_PEN: "pen"POINTER_TYPE_TOUCH: "touch"altKey: falsebubbles: truebutton: 0buttons: 0cancelBubble: falsecancelable: trueclientX: 506clientY: 210composed: falsectrlKey: falsecurrentTarget: nulldefaultPrevented: falsedetail: 1eventPhase: 0fromElement: nullheight: 0hwTimestamp: 0isPrimary: trueisTrusted: falselayerX: 506layerY: 210metaKey: falsemovementX: 0movementY: 0offsetX: 506offsetY: 210pageX: 506pageY: 210path: Array[5]pointerId: 1pointerType: "mouse"pressure: 0.5preventDefault: ()relatedTarget: nullreturnValue: truerotation: 0screenX: 638screenY: 330shiftKey: falsesourceCapabilities: nullsrcElement: canvas#renderCanvasstopPropagation: ()target: canvas#renderCanvastiltX: 0tiltY: 0timeStamp: 11321.95toElement: canvas#renderCanvastype: "pointerdown"view: Windowwhich: 1width: 0x: 506y: 210__proto__: MouseEvent
default.htm:72 t {hit: false, distance: 0, pickedPoint: null, pickedMesh: null, bu: 0…}

adam · September 16, 2016

The playground is using a FreeCamera and yours is using ArcRotateCamera. They deal with mouse/pointer events differently.

You should try showing the debug layer and then viewing the bounding box to make sure it is over the mesh.

https://doc.babylonjs.com/tutorials/Using_the_Debug_Layer

NasimiAsl · September 16, 2016

maybe your face is filped test that with box or something?

michaeltrim · September 16, 2016

@adam yes definitely within bounds

@NasimiAsl not sure I understand but thank you

Going to convert to FreeCamera (I do need to use an ArcRotate, but at least it may give me an in)

adam · September 16, 2016

You might have better luck using an actionManager.

http://doc.babylonjs.com/tutorials/How_to_use_Actions

http://www.babylonjs-playground.com/?17

GameMonetize · September 16, 2016

can you confirm that your meshes are mesh.isPickable = true?

Dad72 · September 16, 2016

This is what seems to me, your meshes are picked = false by default I think.

Try add:

mesh1.isPickable = true;
mesh2.isPickable = true;
mesh3.isPickable = true;

Picker not working

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members