i want to show a mesh (like gunshot) in front of my perspective camera(with first person controls) i wrote this code in the render function of my page:
var pos = camera.position;
var rot = camera.rotation;
shot.rotation.x = rot.x;
shot.rotation.y = rot.y;
shot.rotation.z = rot.z;
shot.position.x = pos.x;
shot.position.y= pos.y;
shot.position.z = pos.z + 500;
if i just change the position of my camera its good, but if i change the camera's rotation i don't see the shot in front of that.
how can i do this?
It would seem that you need to make the "shot" a child of the camera. It's not clear from your example whether you're doing that already, but this should make the shot move around with the camera properly.
Related
I am trying to animate a figure and adding a health bar over it. I created the figure from a sprite (new PIXI.sprite()) and the health bar from a graphics object (new PIXI.Graphics()).
I am able to move the sprite by setting its X,Y coordinates, but when I do the same with the Graphics object it is always displaced, it looks like its origin is the current position of the sprite. See the following picture. The health bar should be above the figure.
var app = new PIXI.Application(windowWidth, windowHeight, {backgroundColor: 0x1099bb});
var prey = new PIXI.Sprite(texturePath);
var healthBar = new PIXI.Graphics();
healthBar.beginFill(0x00BB00);
healthBar.lineStyle(1, 0x000000);
healthBar.drawRect(prey.x - spriteLength, prey.y - spriteLength, spriteLength, 5);
prey.energyBar = healthBar;
app.stage.addChild(prey);
app.stage.addChild(healthBar);
prey.energyBar.position.set(prey.x,prey.y);
How can I set the position of the health bar to be right above the figure?
A better way to do this would be to have the healthbar as a child of the prey Sprite itself. As an example (bits you've already solved missed out)
var prey = new PIXI.Sprite( texturePath );
var heathbar = new PIXI.Graphics();
healthbar.y = -100;
prey.addChild( healthbar );
app.stage.addChild( prey );
Now, that the health bar is a child of your prey Sprite, when you move the prey Sprite around, the healthbar will move with it (which I presume is what you would want in your situation).
Setting the initial coords of the health bar to (0,0) fixed the issue.
healthBar.drawRect(0, 0, spriteLength, 5);
I'm new in THREE.js.
I'm trying to get 3D coordinates of point on mouse click on the object (not simple objects: Box, Sphere,..) in Canvas.
In detail, I'm working with 3D objects viewer - I have camera (THREE.PerspectiveCamera), mouse controls (rotate, zoom, move), add/remove objects (my own object, loaded using loaders for THREE.js) in scene,.. And I want to add a function, which gets 3D coordinates for clicked point in 3D.
Exactly, I want coordinates of the end point of a ray - begining from mouse click on the camera_near_window and ending to the object's point, I've clicked on..
I tried a lot of ways to do it:
Getting coordinates of point on z=0 plane -- It works fine, but it is on z=0 plane and it is not that I need, cause I have OrbitControls..
THREE.js example - clickable objects -- It uses CanvasRenderer (not WebGLRenderer) and works for a little objects (but works for my project): browser crashes when I load many objects (CanvasRenderer needs 5x more memory then WebGLRenderer).
"How to get object in WebGL 3d space from a mouse click coordinate" - I tried this one too, but raycaster.intersectObjects found nothing, intersects was an empty array (maybe it works for only simple objects like box, sphere,..).
Can anyone show me the demo code which gets 3D point coords for clicked point of clicking object in 3D, please..?
So, as I think this question is useful for someone, I'll answer it myself (I'll write my resolve):
var renderer, canvas, canvasPosition, camera, scene, rayCaster, mousePosition;
function init() {
renderer = new THREE.WebGLRenderer({ antialias: false });
canvas = renderer.domElement;
canvasPosition = $(canvas).position();
camera = new THREE.PerspectiveCamera(20, $(canvas).width() / $(canvas).height(), 0.01, 1e10);
scene = new THREE.Scene();
rayCaster = new THREE.Raycaster();
mousePosition = new THREE.Vector2();
scene.add(camera);
var myObjects = new THREE.Object3D();
// myObjects.add( your object );
// myObjects.add( your object );
// myObjects.add( your object );
myObjects.name = 'MyObj_s';
scene.add(myObjects);
};
function getClicked3DPoint(evt) {
evt.preventDefault();
mousePosition.x = ((evt.clientX - canvasPosition.left) / canvas.width) * 2 - 1;
mousePosition.y = -((evt.clientY - canvasPosition.top) / canvas.height) * 2 + 1;
rayCaster.setFromCamera(mousePosition, camera);
var intersects = rayCaster.intersectObjects(scene.getObjectByName('MyObj_s').children, true);
if (intersects.length > 0)
return intersects[0].point;
};
I have a sphere model along with html text labels overlayed onto it at fixed positions. How can I hide them when they are behind the object when i am rotating my sphere using orbit controls?
Anyone knows about any references on stackoverflow or any examples which can solve my issue?
See this example how you could do it: http://jsfiddle.net/L0rdzbej/194/
I have put the relevant code in the updateLabelVisibility()-function, it looks like this:
var meshPosition = mesh.getWorldPosition();
var eye = camera.position.clone().sub( meshPosition );
var dot = eye.clone().normalize().dot( meshPosition.normalize() );
//IS TRUE WHEN THE MESH IS OCCLUDED BY THE SPHERE = dot value below 0.0
var ocluded = dot < -0.2;
if ( ocluded ) {
// HIDE LABEL IF CAMERA CANT SEE IT (I.E. WHEN IT IS BEHIND THE GLOBE)
label.style.visibility = "hidden";
}
else {
// DISPLAY LABEL IF MESH IS VISIBLE TO THE CAMERA
label.style.visibility = "visible";
}
Where mesh is the marker where your label is attached to. The dot is basically telling you how far around the sphere it is, within a certain distance of 90 degree. Simply said by values below zero the label is longer visible by going further around the back.
To be fair I based this off some code from: https://zeitgeist-globe.appspot.com/
am having an option to switch Orbit control to FirstPerson control, but while switch my model is disappearing from the scene
my code is below
controls = new THREE.FirstPersonControls( camera );
controls.movementSpeed = 70;
controls.lookSpeed = 0.04;
controls.noFly = true;
controls.lookVertical = false;
i need that switch from one control to another the object should be fixed on the position at present
Unlike OrbitControl, in the FirstPersonControl the camera points to an artbitrary directions. So use camControl.lon and camControl.lat to control the initial direction of camera.
camControl = new THREE.FirstPersonControls(camera);
camControl.lookSpeed = 0.1;
camControl.movementSpeed = 4;
camControl.noFly = true;
camControl.lookVertical = true;
camControl.lon = -90;
camControl.lat = 0;
Also make sure your mouse is not over the window as the scene is moving because as another poster pointed out, as soon as the mouse is on the cavas FirstPersonControl will start rotating the camera.
As of three.js R101, it's possible to use FirstPersonControls.lookAt(). FirstPersonControls.lat and FirstPersonControls.lon have been removed.
Besides, when creating FirstPersonControls the initial orientation of the camera is now respected.
I have text on the screen that always faces the user and remains upright with the following code (this is working):
object.lookAt(camera.position);
object.rotation.x = camera.rotation.x;
object.rotation.y = camera.rotation.y;
object.rotation.z = camera.rotation.z;
Now, after a button has rotated the scene by 90 degrees about the y-axis,
target = new THREE.Vector3(camera.position.z, camera.position.y, -camera.position.x);
object.lookAt(target);
So the text is facing the user as desired, but I can't figure out how to calculate the object rotation to keep the text vertical as I rotate the scene around with trackball controls:
object.rotation.x = ??
object.rotation.y = ??
object.rotation.z = ??
Suggestions? Thanks!
The easiest solution is to use THREE.OrbitControls instead.
Then, in your render loop:
object.quaternion.copy( camera.quaternion );
three.js r.69