We Keep Coding

Three.js screen to world position calculation based on browser window size

I'm confused about converting screen position to world position in three.js. I've looked at several answers to questions on Stackoverflow but can't make sense of the formulas and/or extract them from raycasting or mouse testing in the examples (neither of which I'm doing). I simply want to position a plane in world position according to the width of the scene/window. For example the bottom right corner of the window minus the width and height of the plane so it's on screen and visible. Something like this:
//geometry and material of the plane
var geometry = new THREE.PlaneGeometry(50, 50);
var material = new THREE.MeshPhongMaterial( { color: 0xff0000 } );
//create plane
plane = new THREE.Mesh( geometry, material);
position = new THREE.Vector3();
position.x = ( window.innerWidth / 2 ) - asquare.geometry.parameters.width;
position.y = - ( window.innerHeight / 2 ) - asquare.geometry.parameters.height;
position.z = 0;
plane.position.set( position.x, position.y, position.z );
It's in the right direction but too far, I guess it's the difference between the camera and planes z position that is the issue. If my camera is at z 500 and the plane is at z 0 how do I adjust the x and y accordingly?

Click to place camera near an object in Three js

My I am trying to do a click to zoom feature with Three.js, I have a canvas and an object loaded in the canvas.On click I am trying to place the camera near the point of intersection(Actually like zooming that point).
Here is what I have done, but doesn't work as I wanted, on click camera positions changes but kind of works partially sometimes camera is placed near the point of intersection, some times not.
onmousedown = function (event) {
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
event.preventDefault();
mouse.x = (event.clientX / self.renderer.domElement.clientWidth) * 2 - 1;
mouse.y = -(event.clientY / self.renderer.domElement.clientHeight) * 2 + 1;
raycaster.setFromCamera(mouse, self.camera);
var objects = [];
for (var i = 0; i < self.scene.children.length; i++) {
if (self.scene.children[i] instanceof THREE.Group) {
objects.push(self.scene.children[i]);
}
}
console.log(objects);
var intersects = raycaster.intersectObjects( objects,true );
console.log(intersects.length);
if (intersects.length > 0) {
self.camera.up = new THREE.Vector3(0, 0, 1);
self.camera.lookAt(new THREE.Vector3(0, 0, 0));
self.camera.position.z = intersects[0].point.z * .9;
self.camera.position.x = intersects[0].point.x * .9;
self.camera.position.y = intersects[0].point.y * .9;
}
};
Here self is a global viewer object which holds camera, canvas, different objects etc.
0.9 is just a number used to place camera just near the point of intersection.
camera used is PerspectiveCamera and controls is TrackballControls
new THREE.PerspectiveCamera(90, this.width / this.height, 1, 1000);
The objects loaded are from .obj or .dae files ,I expect this to work like click on any point on the object and place the camera near that point. But camera is moving but sometimes not near the point I clicked.
Does intersects[0] gives the nearest intersection point? or nearest in the direction of camera ?
What is my mistake here ?
I am new to three js , just started learning it.If something or some logic is wrong help me with that.

The position is a bit complicated to calculate; you have to find the segment between camera and intersection and than place the camera at specific distance from intersection along the segment looking to the intersection point.
try this:
var length=[the desiderated distance camera-intersection]
var dir = camera.position.clone().sub(intersects[0].point).normalize().multiplyScalar(length);
camera.position = intersects[0].point.clone().add(dir);
camera.lookAt(intersects[0].point);

I have created a fiddle: http://jsfiddle.net/h5my29aL/
It's not so difficult. Think of your object as a planet, and your camera as a satellite. You need to position the camera somewhere in an orbit near your object. Three contains a distanceTo function that makes it simple. The example uses a sphere, but it will work with an arbitrary mesh. It measures the distance from the center point to the desired vector3. In your case the vector3 is likely the face position returned by a picker ray. But anyhow, the lookAt is set to the mesh, and then a distance from the vertex is calculated so that the camera is always the same altitude regardless of a vertex's or face's distance from the object center.
var point = THREE.GeometryUtils.randomPointsInGeometry( geometry, 1 );
var altitude = 100;
var rad = mesh.position.distanceTo( point[0] );
var coeff = 1+ altitude/rad;
camera.position.x = point[0].x * coeff;
camera.position.y = point[0].y * coeff;
camera.position.z = point[0].z * coeff;
camera.lookAt(mesh.position);

I've came somewhat close to what I want with an example from Three js.
Three JS webgl_decals
this is what I have done.
function zoomCam(event) {
var point_mouse = new THREE.Vector2(),
var point_x = null;
var point_y = null;
if (event.changedTouches) {
point_x = event.changedTouches[ 0 ].pageX;
point_y = event.changedTouches[ 0 ].pageY;
} else {
point_x = event.clientX;
point_y = event.clientY;
}
point_mouse.x = (point_x / window.innerWidth) * 2 - 1;
point_mouse.y = -(point_y / window.innerHeight) * 2 + 1;
if (sceneObjects.length > 0) {
var raycaster = new THREE.Raycaster();
raycaster.setFromCamera(point_mouse, camera);
var intersects = raycaster.intersectObjects(sceneObjects, true);
if (intersects.length > 0) {
var p = intersects[ 0 ].point;
var n = intersects[ 0 ].face.normal.clone();
n.multiplyScalar(10);
n.add(intersects[ 0 ].point);
camera.position.copy(n);
camera.lookAt(p);
}
}
There might be some minor issues as I formatted/changed the code for answering here. Check the code before implementing.

Three.js 2D X, Y coords to 3D X, Y, Z coords always in front of camera

I've looked at this question:
Mouse / Canvas X, Y to Three.js World X, Y, Z
and have implemented it in my code, the problem is that I can't seem to get it to work as others have stated.
I need to place an object in front of the camera via X and Y screen coords, not necessarily from the mouse.
This object will be at a specified distance in front of the camera, either from a pre-defined maximum distance or a calculated object distance.
Note: My Camera can be at any position in my scene and facing any direction
Here is my code:
this.reticlePos.x = 500;
this.reticlePos.y = 300;
this.reticlePos.z = 0.5;
this.projector.unprojectVector(this.reticlePos, this.camera);
//check for collisions, if collisions set distance to collision distance
var distance = this.RETICLE_RADIUS;
var direction = new THREE.Vector3( 0, 0, -1 );
direction.applyQuaternion( this.camera.quaternion );
this.rayCaster.set(this.camera.position, direction);
var collisionResults = this.rayCaster.intersectObjects(this.sceneController.obstacles);
if( collisionResults.length !== 0 ) {
// console.log('Ray collides with mesh. Distance :' + collisionResults[0].distance);
distance = collisionResults[0].distance - 20;
}
// set the reticle position
var dir = this.reticlePos.clone().sub( this.camera.position ).normalize();
var pos = this.camera.position.clone().add( dir.multiplyScalar( distance ) );
this.reticleMesh.position.copy( pos );
As you can see is is very similar to the linked question, yet I cannot see the object in front of my camera.
Any insight into this would be greatly appreciated.

I figured out the answer myself for anyone that checks this question later on.
To get my screen coordinates I needed to convert some input data from a gyroscope, and didn't realize that I still needed to do the following to my calculated screen coordinates:
this.reticlePos.x = ( this.reticlePos.x / window.innerWidth ) * 2 - 1;
this.reticlePos.y = - ( this.reticlePos.y / window.innerHeight ) * 2 + 1;
After doing this, everything works as expected.

Three.js Javascript object transformation issue

I'm trying to scale height(y) of a cube as well as raising its y position simultaneously so that its base remains on the same x-z plane even after scaling. The rendering works fine but it is not working as expected. The object position increases rapidly in Y and then it starts disappearing. Can anyone help me out?
I've added an eventListener: mouseMove and its listener function to do the above transformations:
var fHeight = 5, yShift;
function onDocumentMouseMove(event) {
var mouseVector = new THREE.Vector3(2*(event.clientX/window.innerWidth) - 1, 1 - 2*(event.clientY/window.innerHeight));
var projector = new THREE.Projector();
var raycaster = projector.pickingRay(mouseVector.clone(), camera);
var intersects = raycaster.intersectObjects( Object.children );
if(intersects.length > 0) {
intersects[0].object.scale.y += 0.1;
fHeight = fHeight*intersects[0].object.scale.y;
yShift = fHeight/2 - intersects[0].object.position.y - 2.5;
intersects[0].object.position.y = intersects[0].object.position.y + yShift;
}
}

You can place the vertices of your cube so its base sticks to its y=0 plane.
Then object.scale.y will directly modify the cube height only, without displacing the base, and you will not have to reposition the object.
Hope it helps

Can I have the ray collision position (X,Y) in targeted face relative coordinate?

I'm trying to find the ray collision coordinate relative to the face targeted...
code:
var fMouseX = (iX / oCanvas.width) * 2 - 1;
var fMouseY = -(iY / oCanvas.height) * 2 + 1;
//I Use OrthographicCamera
var vecOrigin = new THREE.Vector3( fMouseX, fMouseY, - 1 );
var vecTarget = new THREE.Vector3( fMouseX, fMouseY, 1 );
oProjector.unprojectVector( vecOrigin, this.__oCamera );
oProjector.unprojectVector( vecTarget, this.__oCamera );
vecTarget.subSelf( vecOrigin ).normalize();
var oRay = new THREE.Ray(vecOrigin, vecTarget);
intersects = oRay.intersectObjects([ oCylinderMesh ]);
With intersects[ 0 ].point, I can have the mouse position in 'screen coordinate', but how can I have it in Cylinder coordinate ?
PS: mesh are not rotate, but camera can change position...
Really nice framework ;)

Here is my solution, just get the Cylinder absolute coordinate (position relative to screen), then, itersects[0].point sub the Cylinder absolute coordinate.
The following code may help:
var relativeTo = function(element, ancestor) {
var offset = element.position.clone();
if (element.parent == ancestor) {
return offset;
}
return offset.addSelf(relativeTo(element.parent, ancestor));
}