Develop Reference

Resize THREE.ParametricGeometry to bounding box dimensions

My problem is the following:
I have two intersecting surfaces created with THREE.ParametricGeometry. Like this:
I need to draw the intersection of these two surfaces. Using the Wolfram|Alpha API I get the intersection function and render it. Like this:
But, as you can see, the intersection mesh is much bigger than the two surfaces.
So I though that I could compute the intersection of the surfaces bound box (this intersection can be seen in the image above) and 'limit', so to speak, the intersection mesh to this box's dimensions.
I've tried setting the intersection mesh's scale property to the bounding box's dimensions (the difference between the box's max and min); but this only makes the intersection mesh even bigger.
Any though of how I can accomplish this?
The intersection mesh is created like this (ThreeJS r81):
// 'intersections' is an array of mathematical functions in string format.
intersections.forEach(function (value) {
var rangeX = bbox.getSize().x - (bbox.getSize().x * -1);
var rangeY = bbox.getSize().y - (bbox.getSize().y * -1);
var zFunc = math.compile(value); // The parsing is done with MathJS
// 'bbox' is the intersected bounding box.
var meshFunction = function (x, y) {
x = rangeX * x + (bbox.getSize().x * -1);
y = rangeY * y + (bbox.getSize().y * -1);
var scope = {x: x, y: y};
var z = zFunc.eval(scope);
if (!isNaN(z))
return new THREE.Vector3(x, y, z);
else
return new THREE.Vector3();
};
var geometry = new THREE.ParametricGeometry(meshFunction, segments, segments,
true);
var material = new THREE.MeshBasicMaterial({
color: defaults.intersectionColor,
side: THREE.DoubleSide
});
var mesh = new THREE.Mesh(geometry, material);
intersectionMeshes.push(mesh);
// 'intersectionMeshes' is returned and then added to the scene.
});

I think that scaling the intersection mesh wouldn't work as the intersection would become incorrect.
Let's try to do this with Three.js clipping :
Set renderer.localClippingEnabled to true ;
Compute the bounding box of the surfaces ;
For every 6 sides of the bounding box, compute a plane with the normal pointing inside the box.
(e.g. right-side : new THREE.Plane(new THREE.Vector3(-1,0,0), -bbox.max.x);)
You now have an array of clipping planes ;
Create a new THREE.Material with material.clippingPlanes being the array of clipping planes ;
Use this material for the intersection mesh.
Note that with local clipping, the intersection mesh and the surface meshes should share the same world transformation. (putting all these meshes into a THREE.Group would be reasonable.)

Three.js part of video as texture

I'm trying to use part of a video as a texture in a Three.js mesh.
Video is here, http://video-processing.s3.amazonaws.com/example.MP4 it's a fisheye lens and I want to only use the part with actual content, i.e. the circle in the middle.
I want to somehow mask, crop or position and stretch the video on the mesh so that only this part shows and the black part is ignored.
Video code
var video = document.createElement( 'video' );
video.loop = true;
video.crossOrigin = 'anonymous';
video.preload = 'auto';
video.src = "http://video-processing.s3.amazonaws.com/example.MP4";
video.play();
var texture = new THREE.VideoTexture( video );
texture.minFilter = THREE.NearestFilter;
texture.magFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;
var material = new THREE.MeshBasicMaterial( { map : texture } );
The video is then projected onto a 220 degree sphere, to give the VR impression.
var geometry = new THREE.SphereGeometry( 200,100,100, 0, 220 * Math.PI / 180, 0, Math.PI);
Here is a code pen
http://codepen.io/bknill/pen/vXBWGv
Can anyone let me know how I'm best to do this?

You can use texture.repeat to scale the texture
http://threejs.org/docs/#Reference/Textures/Texture
for example, to scale 2x on both axis
texture.repeat.set(0.5, 0.5);

In short, you need to update the UV-Map of the sphere so that the relevant area of your texture is assigned to the corresponding vertices of the sphere.
The UV-coordinates for each vertex define the coordinates within the texture that is assigned to that vertex (in a range [0..1], so coordinates (0, 0) are the top left corner and (1,1) the bottom right corner of your video). This example should give you an Idea what this is about.
Those UV-coordinates are stored in your geometry as geometry.faceVertexUvs[0] such that every vertex of every face has a THREE.Vector2 value for the UV-coordinate. This is a two-dimensional array, the first index is the face-index and the second one the vertex-index for the face (see example).
As for generating the UV-map there are at least two ways to do this. The probably easier way (ymmv, but I'd always go this route) would be to create the UV-map using 3D-editing software like blender and export the resulting object using the three.js exporter-plugin.
The other way is to compute the values by hand. I would suggest you first try to simply use an orthographic projection of the sphere. So basically, if you have a unit-sphere at the origin, simply drop the z-coordinate of the vertices and use u = x/2 + 0.5 and v = y/2 + 0.5 as UV-coordinates.
In JS that would be something like this:
// create the geometry (note that for simplicity, we're
// a) using a unit-sphere and
// b) use an exact half-sphere)
const geometry = new THREE.SphereGeometry(1, 18, 18, Math.PI, Math.PI)
const uvs = geometry.faceVertexUvs[0];
const vertices = geometry.vertices;
// compute the UV from the vertices of the sphere. You will probably need
// something a bit more elaborate than this for the 220degree FOV, also maybe
// some lens-distorion, but it will boild down to something like this:
for(let i = 0; i<geometry.faces.length; i++) {
const face = geometry.faces[i];
const faceVertices = [vertices[face.a], vertices[face.b], vertices[face.c]];
for(let j = 0; j<3; j++) {
const vertex = faceVertices[j];
uvs[i][j].set(vertex.x/2 + 0.5, vertex.y/2 + 0.5);
}
}
geometry.uvsNeedUpdate = true;
(if you need more information in either direction, drop a comment and i will elaborate)

how to render alphabets in 2D using threejs

I'm making a 2d game, where blocks are falling down ( tetris style). I need to render alphabets on these blocks. This is how I am creating blocks:
var geometry = new THREE.BoxGeometry( this.BLOCK_WIDTH, this.BLOCK_WIDTH, 4 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
this.blocks = [];
for (var i = 0; i < rows * columns; i++) {
cube = new THREE.Mesh( geometry, material );
cube.visible = false;
cube.letter = letterGenerator.getNextLetter();
this.blocks[i] = cube;
scene.add( this.blocks[i] );
};
As you can see, all blocks will look exactly alike except for the fact, that they will have a different alphabet associated with them. In my update(), I move the block, left/right or down. When I do so, block position will be updated and obviously the alphabet should be rendered accordingly.
How should I go about rendering alphabets on these blocks ?
EDIT: I am using WebGLRenderer.

You can get the screen position of each block (your "cube" variable above) that you want to paint text on and use HTML to paint text at that screen location over each block. Using HTML to make a text sprite like this is discussed here:
https://github.com/mrdoob/three.js/issues/1321
You can get the screen position for your "cube" above like so:
var container = document.getElementById("idcanvas");
var containerWidth = container.clientWidth;
var containerHeight = container.clientHeight;
var widthHalf = containerWidth / 2, heightHalf = containerHeight / 2;
var locvector = new THREE.Vector3();
locvector.setFromMatrixPosition(cube.matrixWorld);
locvector.project(your_camera); //returns center of mesh
var xpos = locvector.x = (locvector.x * widthHalf) + widthHalf; //convert to screen coordinates
var ypos = locvector.y = -(locvector.y * heightHalf) + heightHalf;
You'll have to update the HTML for cube movement.
Another approach is to create specific textures with the text you want and apply each texture as a material to the appropriate cube.

Strange behaviour of shadowing in ThreeJS

so I have a threeJS scene, and I have some spheres (multimaterial) added. I have also a directional light added :
this.light = new THREE.DirectionalLight( 0xFFFFFF, 1 );
this.light.position.set( 2, 10, 2 );
this.light.castShadow = true;
this.light.shadowMapSoft = true;
this.light.shadowCameraVisible = true;
this.light.shadowCameraNear = 1;
this.light.shadowCameraFar = 10;
this.light.shadowBias = 0.0009;
this.light.shadowDarkness = 0.3;
this.light.shadowMapWidth = 1024;
this.light.shadowMapHeight = 1024;
this.light.shadowCameraLeft = -8;
this.light.shadowCameraRight = 8;
this.light.shadowCameraTop = 8;
this.light.shadowCameraBottom = -8;
So when the user adds or removes spheres, a function which executes "reforms" the shadow camera frustum like this :
this.light.position.set( posV.x, posV.y, posV.z);
this.light.shadowCamera.far = l2*3;
this.light.shadowCamera.left = -l2;
this.light.shadowCamera.right = l2;
this.light.shadowCamera.bottom = -l2;
this.light.shadowCamera.top = l2;
this.light.shadowCamera.updateProjectionMatrix();
and a possible result of the above code is this :
an other aspect of the exact situation of above :
I have set the camera's frustum visibility to on, so there it is. The problem is the shadowing that is generated for no reason (pointed out by the red arrows). No other objects are in the scene at that moment and the spheres are fully inside the camera frustum.
Problems in shadowing like these are common after updating the spheres (add/remove), does anybody have any idea about it?
I use three.js r72 ,
thanks!

Based on your comments, what you are seeing is self-shadowing artifacts.
You need to adjust the shadowBias ( now called shadow.bias ) parameter.
Varying the shadow bias results in a trade-off between "peter-panning" (too much positive bias) and self-shadowing artifacts (too much negative bias).
three.js r.73

How to find the rotation of an object relative to the camera

I'm having trouble figuring out the angle of an object relative to the camera, I'm trying to code a spaceship with a camera following it. I have the camera following the ship but the rotation of the camera sometimes is a little off, here's my camera code:
var focalpoint = new THREE.Vector3(
actor.position.x,
actor.position.y,
actor.position.z + 14
);
//move camera closer to the object if it gets too far away
var calculatedDistance = distance(camera.position, actor.position);
var cameraTolerance = calculatedDistance - this.cameradistance.min;
var closingvelocity = cameraTolerance * 0.02;
if(calculatedDistance > this.cameradistance.max)cameravelocity.z = -closingvelocity;
if(calculatedDistance < this.cameradistance.min)cameravelocity.z = closingvelocity;
//slow down the camera
if(calculatedDistance < this.cameradistance.max && calculatedDistance > this.cameradistance.min){
cameravelocity.z = 0;
}
camera.translateX( cameravelocity.x );
camera.translateY( cameravelocity.y );
camera.translateZ( cameravelocity.z );
camera.lookAt(focalpoint);
camera.rotation.z = 0;
Now I need to limit the rotation of the spaceship (actor) so it doesn't start flying towards the camera, and to fix the camera flipping over problem. So I need to figure out how to find the rotation of the actor relative to the camera, I have absolutely no idea where to start calculating or even how.

found the answer, by inversing the target's rotation, then multiplying like so:
var rotationOffset = actor.quaternion.clone().inverse();
var rotation = camera.quaternion.clone().multiply( rotationOffset );