I'm trying to update make my camera far clip plane to sit on Vector3(0,0,0) no matter how close or far the camera gets, I've managed to find a way of updating the far clip plane dynamically but I can't get this plane to face my camera.
Thanks, C.
var matrix = new THREE.Matrix4();
matrix.extractRotation(camera.matrix);
var direction = new THREE.Vector3();
direction.subVectors( new THREE.Vector3(0,0,0), camera.position );
direction.normalize();
var N = new THREE.Vector3(0, 1, 0);
N.applyMatrix4(matrix);
var planePos = new THREE.Vector3(0,0,0);
var clipPlane = new THREE.Plane();
clipPlane.setFromNormalAndCoplanarPoint(N, planePos);
clipPlane.applyMatrix4(camera.matrixWorldInverse);
clipPlane = new THREE.Vector4(clipPlane.normal.x, clipPlane.normal.y, clipPlane.normal.z, clipPlane.constant);
var q = new THREE.Vector4();
var projectionMatrix = camera.projectionMatrix;
q.x = (sgn(clipPlane.x) + projectionMatrix.elements[8]) / projectionMatrix.elements[0];
q.y = (sgn(clipPlane.y) + projectionMatrix.elements[9]) / projectionMatrix.elements[5];
q.z = -1.0;
q.w = (1.0 + projectionMatrix.elements[10]) / camera.projectionMatrix.elements[14];
// Calculate the scaled plane vector
var c = new THREE.Vector4();
c = clipPlane.multiplyScalar(2000.0 ); //clipPlane.multiplyScalar(2.0 / clipPlane.dot(q)); /// clipPlane.dot(q)
// Replace the third row of the projection matrix
projectionMatrix.elements[2] = c.x;
projectionMatrix.elements[6] = c.y;
projectionMatrix.elements[10] = c.z + 1.0;
projectionMatrix.elements[14] = c.w;
If you want to reset the far plane parameter for a camera, you can use this pattern
camera.far = new_value;
camera.updateProjectionMatrix();
In your particular case, you can do this:
camera.far = camera.position.length();
camera.updateProjectionMatrix();
three.js r.72
Related
I'd like to get an Bitmaps (or other Container) global bounds, i.e. the bounds of the Container on the stage after rotation, scale, position etc have been applied.
I have the following situation
var stage = new createjs.Stage("canvas");
var parent = new createjs.Container();
parent.x = 50;
parent.rotation = 90;
stage.addChild(parent);
var image = new Image();
image.src = "https://s.imgur.com/images/access/access-logo.png";
image.onload = handleImageLoad;
function handleImageLoad(event) {
var image = event.target;
var child = new createjs.Bitmap(image);
parent.addChild(child);
stage.update();
console.assert(child.getTransformedBounds().width === 65);
console.assert(child.getTransformedBounds().width === 187);
}
See: https://jsfiddle.net/2kr23/48/
The image is 187 wide and 65 high, but after rotating it 90 degrees, I expect it to be 187 high and 65 wide.
EaselJS doesn't currently have a way to get the global bounds of a nested object, however there are a couple of ways you could approach this.
In your specific case, you could simply get the bounds of the parent:
parent.getTransformedBounds().width
https://jsfiddle.net/2kr23/51/
A more general approach would be to use localToGlobal() to find the position of the 4 corners in the global coordinate space, then use the min & max extents to get the transformed bounds.
Something like:
function getGlobalBounds(child) {
var tl = child.localToGlobal(0, 0);
var tr = child.localToGlobal(child.image.width, 0);
var br = child.localToGlobal(child.image.width, child.image.height);
var bl = child.localToGlobal(0, child.image.height);
var minX = Math.min(tl.x, tr.x, br.x, bl.x);
var maxX = Math.max(tl.x, tr.x, br.x, bl.x);
var minY = Math.min(tl.y, tr.y, br.y, bl.y);
var maxY = Math.max(tl.y, tr.y, br.y, bl.y);
return new createjs.Rectangle(minX, minY, maxX-minX, maxY-minY);
}
https://jsfiddle.net/2kr23/58/
I'm learning Raphael and I wonder how to call the same function from both events, mousedown and mouse up, in order to draw two dots with every click.
You can test the code here: jsfiddle
var w = window.innerWidth;
var h = window.innerHeight;
var paper = Raphael(0, 0, w, h);
var canvas = paper.rect(0, 0, w, h,12);
canvas.attr('fill', 'lightgrey');
canvas.mouseup(function (event, a, b) {
// get bounding rect of the paper
var bnds = event.target.getBoundingClientRect();
var targetBox = this.getBBox();
// adjust mouse x/y
var mx = event.clientX - bnds.left;
var my = event.clientY - bnds.top;
// divide x/y by the bounding w/h to get location %s and apply factor by actual paper w/h
var fx = mx/bnds.width * canvas.attrs.width + targetBox.x;
var fy = my/bnds.height * canvas.attrs.height + targetBox.y;
// cleanup output
fx = Number(fx).toPrecision(3);
fy = Number(fy).toPrecision(3);
paper.circle(fx, fy, 1).attr("fill","black", "stroke-width",0);
});
I'm pretty new to RaphaelJS, and I did never need to call a function from two mouse events with javascript. So, I'm confused. Any help will be appreciated.
You can just create a new function, which takes in the event parameter, like this...
canvas.mouseup( eventDraw );
canvas.mousedown( eventDraw );
function eventDraw( event ) {
//... do stuff
};
jsfiddle
I'm trying to add a label to the aggregate total for a stacked bar chart above each bar. I used this example (http://dimplejs.org/advanced_examples_viewer.html?id=advanced_bar_labels) to add the totals for each section of the bar, but I'm not sure how to add the total above. I've also been able to add total labels above each bar for a single series (not stacked). I just can't get it to work with a stacked bar chart.
My current workaround is plotting an additional null series line, but making the line and markers transparent so you can still see the total value in the tooltip. However, I'd really like to just have the totals displayed above each bar.
Here's the code:
var svg = dimple.newSvg("#chartContainer", 590, 400);
var myChart = new dimple.chart(svg, data);
myChart.setBounds(80, 30, 510, 305);
var x = myChart.addCategoryAxis("x", "Month");
x.addOrderRule(Date);
var y = myChart.addMeasureAxis("y", "Calls");
y.showGridlines = true;
y.tickFormat = ',6g';
y.overrideMin = 0;
y.overrideMax = 800000;
var s = myChart.addSeries("Metric", dimple.plot.bar);
s.afterDraw = function (shape, data) {
var s = d3.select(shape),
rect = {
x: parseFloat(s.attr("x")),
y: parseFloat(s.attr("y")),
width: parseFloat(s.attr("width")),
height: parseFloat(s.attr("height"))
};
if (rect.height >= 1) {
svg.append("text")
.attr("x", rect.x + rect.width / 2)
.attr("y", rect.y + rect.height / 2 + 3.5)
.style("text-anchor", "middle")
.style("font-size", "9px")
.style("font-family", "sans-serif")
.style("opacity", 0.8)
.text(d3.format(",.1f")(data.yValue / 1000) + "k");
}
};
myChart.addLegend(60, 10, 510, 20, "right");
myChart.draw();
Here is the JSFiddle: http://jsfiddle.net/timothymartin76/fusaqyhk/16/
I appreciate any assistance on this.
Thanks!
You can add them after drawing by calculating the bar totals and deriving the y position from that:
// Iterate every value on the x axis
x.shapes.selectAll("text").each(function (d) {
// There is a dummy empty string value on the end which we want to ignore
if (d && d.length) {
// Get the total y value
var total = d3.sum(data, function (t) { return (t.Month === d ? t.Calls : 0); });
// Add the text for the label
var label = svg.append("text");
// Set the x position
// x._scale(d) is the tick position of each element
// (myChart._widthPixels() / x._max) / 2 is half of the space allocated to each element
label.attr("x", x._scale(d) + (myChart._widthPixels() / x._max) / 2)
// Vertically center the text on the point
label.attr("dy", "0.35em")
// Style the text - this can be better done with label.attr("class", "my-label-class")
label.style("text-anchor", "middle")
.style("font-size", "9px")
.style("font-family", "sans-serif")
.style("opacity", 0.8)
// Set the text itself in thousands
label.text(d3.format(",.1f")(total / 1000) + "k");
// Once the style and the text is set we can set the y position
// y._scale(total) gives the y position of the total (and therefore the top of the top segment)
// label.node().getBBox().height gives the height of the text to leave a gap above the bar
label.attr("y", y._scale(total) - label.node().getBBox().height)
}
});
Here is your updated fiddle: http://jsfiddle.net/fusaqyhk/17/
I am doing a very simple stuff, my goal is to move one skeleton based on the position of the other skeleton, for this i am based myself on a HipCenter position.
(This algoritm could be wrong, this question is about a exception ocurring in the foreach loop)
Here is my actual code:
public static Skeleton MoveTo(this Skeleton skOrigin, Skeleton skDestiny)
{
Skeleton skReturn = skOrigin; // just making a copy
// find the factor to move, based on the HipCenter.
float whatToMultiplyX = skOrigin.Joints[JointType.HipCenter].Position.X / skDestiny.Joints[JointType.HipCenter].Position.X;
float whatToMultiplyY = skOrigin.Joints[JointType.HipCenter].Position.Y / skDestiny.Joints[JointType.HipCenter].Position.Y;
float whatToMultiplyZ = skOrigin.Joints[JointType.HipCenter].Position.Z / skDestiny.Joints[JointType.HipCenter].Position.Z;
SkeletonPoint movedPosition = new SkeletonPoint();
Joint movedJoint = new Joint();
foreach (JointType item in Enum.GetValues(typeof(JointType)))
{
// Updating the position
movedPosition.X = skOrigin.Joints[item].Position.X * whatToMultiplyX;
movedPosition.Y = skOrigin.Joints[item].Position.Y * whatToMultiplyY;
movedPosition.Z = skOrigin.Joints[item].Position.Z * whatToMultiplyZ;
// Setting the updated position to the skeleton that will be returned.
movedJoint.Position = movedPosition;
skReturn.Joints[item] = movedJoint;
}
return skReturn;
}
Using F10 to debug everything works fine ultin the second pass in te foreach loop.
When i am passing for the second time in the foreach i get a exception on this line
skReturn.Joints[item] = movedJoint;
The exception says:
JointType index value must match Joint.JointType
But the value is actualy the Spine.
Whats wrong?
Solved, here is the solution
Joint newJoint = new Joint(); // declare a new Joint
// Iterate in the 20 Joints
foreach (JointType item in Enum.GetValues(typeof(JointType)))
{
newJoint = skToBeMoved.Joints[item];
// applying the new values to the joint
SkeletonPoint pos = new SkeletonPoint()
{
X = (float)(newJoint.Position.X + (someNumber)),
Y = (float)(newJoint.Position.Y + (someNumber)),
Z = (float)(newJoint.Position.Z + (someNumber))
};
newJoint.Position = pos;
skToBeChanged.Joints[item] = newJoint;
}
This will work.
I'm trying to draw a line using ray casting. Basically I want to set up some lines coming from my "player" object out in all directions.
(like so: https://gamedev.stackexchange.com/questions/35013/how-to-handle-3d-collisions-using-raycasting-with-a-reflection-vector)
I want this so I can then use I can see my collision detection visually.
I know I can use different ways to do collision detection, but i'm using this way as a learning detection.
My issue is the code below draws a line but it seems to randomly change length and not always point at the same angle.
var ray = new THREE.Ray( player.model.objects.position, new THREE.Vector3(1, 1, 1));
var geometry = new THREE.Geometry();
// my issue is here. I don't think this is the right way use a ray to workout the second vector?
// EDIT: Realized this should be set at player position and outwards.
//var newx = 300 * ray.direction.x;
//var newz = 300 * ray.direction.z;
// EDIT CODE UPDATE
var newx = (player.model.objects.position.x) + (60 * ray.direction.x);
var newz = (player.model.objects.position.z) + (60 * ray.direction.z);
// THREE.Vector3 {x: 1310.1526178356803, y: 0, z: 1290.8237947033065}
console.log(player.model.objects.position);
geometry.vertices.push( player.model.objects.position);
geometry.vertices.push( new THREE.Vector3(newx, player.model.objects.position.y, newz));
var line = new THREE.Line(geometry, material);
scene.add(line);
Any help appreciated.
I was trying to do the same thing after seeing that model.. Since I tried to do it the same way and couldn't figure it out, I'll offer an alternative.
var line;
function update() {
// Z- DIRECTION
raycaster.ray.direction.set(0, 0, -1);
var geometry = new THREE.Geometry();
intersections = raycaster.intersectObjects( objects );
if ( intersections.length > 0 ) {
var geometry = new THREE.Geometry();
// POSITION OF MESH TO SHOOT RAYS OUT OF
geometry.vertices.push( obj.position );
geometry.vertices.push( intersections[0].point );
scene.remove(line);
line = new THREE.Line(geometry, new THREE.LineBasicMaterial({color: 0x990000}));
scene.add(line);
}
}
So now you have a line shooting out of your mesh into whatever the closest intersect is.
https://dl.dropbox.com/u/42766757/guy.png