I’m trying to implement orbit-camera via the script found on https://github.com/playcanvas/engine/blob/master/extras/camera/orbit-camera.js
I’m not using the editor, I’m writing my own index.html and I’m trying to implement orbit controls but it’s not working. I have included the orbit-camera.js script in the head of the document and in the body I have:
var entity = new pc.Entity();
entity.addComponent(“script”);
entity.script.create(“orbitCamera”);
But for some reason its not working.
I’m doing all the coding and testing on my phone.
Is the entity been added to the scene (ie the Root?)
Is there a camera component on the entity?
I do recommend looking at the Editor example project so you can see how it should be set up and replicate it in an engine only version.
Thanks. I’ve done what you said like so:
entity.addComponent(‘camera’, {
clearColor: new pc.Color(0, 0, 0)
});
app.root.addChild(entity);
But now the entire screen is just the clearColor of the camera component and I can’t see anything. I also have another camera added to the scene, should I remove it?
Have you got anything else in the scene (like a cube) that you can orbit around?
The Orbit Camera script is designed to be on the same entity as the camera.
I really recommend looking at the Editor project linked above.
First of all I would like to apologize for not taking a look at the editor project you have linked. For some reason the editor doesn’t load on my phone’s browser and I do not have access to a laptop right now, but i will definitely have a look later on.
Yes I do have a cube set as the focus entity of the camera. I have made a few changes to the code and now I can see the cube but it still doesn’t orbit. I have hosted it at https://princewael100.000webhostapp.com/playcanvas%20test/index.html
I would really appreciate it if you would have a look and point out where I’m wrong.
There are only three files in the project: index.html, orbit-camera.js and playcanvas-stable.min.js
Thanks for the help so far.
I’m getting the following errors in the console:
TextDecoder not supported - pc.Untar module will not work
Powered by PlayCanvas 1.21.2 34f5547
script ‘orbitCamera’ is not found, awaiting it to be added to registry
If i replace:
camera.addComponent("script");
camera.script.create("orbitCamera", {
attributes: {
focusEntity: cube
}
});
With this:
app.assets.loadFromUrl('orbit-camera.js', 'script', function (err, asset) {
camera.addComponent('script');
camera.script.create("orbitCamera", {
attributes: {
focusEntity: cube
}
});
});
I stop getting error, the camera zooms in on the cube, but I still can’t orbit
Can anyone please help me…
Have you checked the examples from the GitHub repo for the engine and the link to the editor that I posted earlier?
@Gamer_Wael said:
There are only three files in the project: index.html, orbit-camera.js and playcanvas-stable.min.js
I don’t think your setup is good. It may be a good start to setup your scripts with the editor and download your project from there. This will help you to understand how Playcanvas works and fix that kind of problem.
In the exemple given by @yaustar, you will see more scripts related to mouse and touch events (mouse-input.js and touch-input.js) . They send the command to orbit.
1 Like
Oh thanks a lot guys. It had been some time since I used the online editor so I forgot about touch-input and mouse-input. I got it to work now. But now I’m facing a problem. Whenever I’m zooming in and out on my phone the camera tends to pan and the focus shifts and it starts to rotate from a different pivot point. Is there a way to do this other than just resetting the pivot point every time it changes by using an if condition in the update loop? You can check it here:
I made this using the online editor some time ago and now I’m trying to make it using the engine only. This is the engine only version:
http://princewael100.000webhostapp.com/playcanvas%20test/
The pan problem occurs in both of them. And also I can’t get raycast to work on the engine only version like how it works in the editor version. Thanks for the help so far.
If you don’t want to pan the camera, you can remove the code for panning in the touch and mouse input scripts.
In terms of raycasting, are you referring to physics raycast or using pc.Shape raycast method?
1 Like
I’m not sure I understand the difference. Currently I’m using picker_raycast.js to place blocks where the user touches. But it’s not working on the engine only version. This is what im doing:
var PickerRaycast = pc.createScript('pickerRaycast');
//var place = 1;
// 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);
alert("1");
this.app.systems.rigidbody.raycastFirst(from, to, function (result) {
var pickedEntity = result.entity;
alert(pickedEntity);
//console.log(pickedEntity);
//pickedEntity.script.pulse.pulse();
pos = pickedEntity.getLocalPosition();
normal = result.normal;
normal.x = Math.round(normal.x);
normal.y = Math.round(normal.y);
normal.z = Math.round(normal.z);
newpos = new pc.Vec3();
newpos.add(pos).add(normal);
//console.log(normal);
//alert();
if(place === 0)
{
pickedEntity.destroy();
}
});
if(place == 1)
{
// Create a new Entity
var entity = new pc.Entity();
entity.name = "Cube";
// Add a new Model Component and add it to the Entity.
entity.addComponent("model", {
type: 'box',
});
entity.addComponent("collision", {
type: 'box',
});
entity.addComponent("rigidbody", {
type: pc.BODYTYPE_STATIC,
});
entity.setLocalPosition(
newpos.x,
newpos.y,
newpos.z
);
// Add it to the Entity hierarchy
this.app.root.addChild(entity);
}
};
I get the alert(“1”); but I don’t get the alert(pickedEntity);
Here is a simplified version of my script
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);alert("init");
};
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);
alert("start"); //This executes
//There seems to be problem in the line below
var result = this.app.systems.rigidbody.raycastFirst(from, to);
//I tried to replace the above line with this but it still didnt work
/*
this.app.systems.rigidbody.raycastFirst(from, to, function (result) {
alert("raycast is working");
});
*/
alert("result"); //This doesn't execute
if (result) {
var pickedEntity = result.entity;
pickedEntity.translate(3,0,0); //This doesn't execute
}
};
Nevermind figured it out. I hadn’t included ammo.js.