Angular 2 and entity script

Help & Support
1

Hi everyone, i’m new on this playcanvas world.
I’ve been able to make work the framework inside an angular 2 application. I’ve a nice cube rotating in a scene.

Now i’m trying to attach a script to the cube, by doing something like this:

var scriptComponent = box.addComponent("script", {
    scripts: [{
        url: './picker_raycast.js'
    }]
});

The picker raycast code was taken from playcanvas examples, so i think it should be working fine.

The problem i have is that nothing happens, no script ‘onSelect’ method is executed.
I’m not sure, but i believe it could be related to the fact that i’m using requirejs framework to load playcanvas and my playcanvas application.

Anyone has developed something with playcanvas inside an angular app that could help me with this?

Thanks!

     Pablo Caviglia
2

I´d like to make a note about this issue.
I´ve decided to take out the angular part from this problem, and i just simply have created an index.html file referencing an existing example provided on playcanvas github.

When i run that code locally (file:///home/pablo/devel/projects/sb/index.html), i can see two red cubes, but when i add console.log lines inside the referenced script ‘first_person_camera.js’ nothing happens.

Any clue?

3

The code in first post of attaching script is legacy. By default application is using new system. To read more about how to create and attach scripts: http://developer.playcanvas.com/en/user-manual/scripting/

4

Hey Max, thx for responding.

I’ve taken a different approach to solve this.
First i’ve decided that the best option would be to manage the playcanvas app totally outside of angular, by embedding an iframe on the place i want to use it. At this times there are lot of resources sharing different ways to use an iframe almost transparently to the user, no borders, no weird effects… just works fine.

Then, as you said, i’ve changed the way to set scripts to entities, the new way worked almost at once.

    var PickerRaycast = pc.createScript('pickerRaycast');

    // initialize code called once per entity
    PickerRaycast.prototype.initialize = function () {
        this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.onSelect, this);
    };

    PickerRaycast.prototype.onSelect = function (e) {

        var from = this.entity.camera.screenToWorld(e.x, e.y, this.entity.camera.nearClip);
        var to = this.entity.camera.screenToWorld(e.x, e.y, this.entity.camera.farClip);

        var result = this.app.systems.rigidbody.raycastFirst(from, to);
        if (result) {
            var pickedEntity = result.entity;
            console.log(pickedEntity.name);
        }
    };

The only thing i had to figure out, and it was really hard to, was to add a collision component to the object i wanted to pickray. Once i figured it out, it started to work flawlessly.

                // add a collision component
                entity.addComponent("collision", {
                    type: "sphere",
                    radius: 0.6
                });

A new question has appeared now, not sure if i should ask it here because it’s a completely different topic… but let´s do it :slight_smile:

I wasn’t able to create a precise raypicking collision, it looks like the collision sphere isn’t correctly aligned. The following picture shows the approximate area where the raypicking is working.

Thx again Max