Is there any way to mirror FBX animation in Three.js?
I already have boxer animations and now I need to made a mirrored clone of each to realize both sides stands.
I know that I can do it in Blender or another program but I wanna reduce my app size.
Oh, I forgot to post an answer :) So the answer to my question is to apply scale matrix.
For example, if you want to mirror model by X-axis, you need to multiply its position by scale matrix with coefficients (-1, 1, 1). Also you need to multiply position along X-axis and rotation around Y-axis by negative one to prevent side transformation.
Here's some THREE.js code:
this.model.position.x *= -1.0;
this.model.rotation.y *= -1.0;
this.model.applyMatrix4(new Matrix4().makeScale(-1.0, 1.0, 1.0));
Related
I have a 2D camera defined by Direct2D 3x2 matrix like this :
ViewMatrix = ScaleMatrix * TranslationMatrix;
But when trying to do hit testing, I get at a point where I need to know my X,Y camera coordinate. I tried to keep track of hit in a vector but without success, scaling with offset center complicate a lot the work..
So I guess it should be possible to find my camera coordinate from these two matrix right ? But how ?
Thank a lot for help.
In rgl, you can set up camera direction with rgl.viewpoint. It accepts theta, phi: polar coordinates. They specify the position of the camera looking at the origin. However, there is yet another one degree of freedom: angle of rotation of the camera along "eye" vector. I.e. one can imagine two vectors associated with camera: "eye" vector and "up" vector; theta and phi allow one to adjust "eye" vector, but I want then to adjust "up" vector after it. Is it possible to do it?
I guess that it can be possible to do it with userMatrix parameter («4x4 matrix specifying user point of view»), but I found no information how to use it.
The ?par3d help topic documents the rendering process in the "Rendering" section. It's often tricky to accomplish what you're asking for, but in this case it's not too hard:
par3d(userMatrix = rotationMatrix(20*pi/180, 0,0,1)
%*% par3d("userMatrix"))
will rotate by 20 degrees around the user's z-axis, i.e. line of sight.
I was wondering if there is a way to copy the rotational information of a sprite into a plane. It seems that for the sprite the rotation is set within the material and it is just one value. I tried copying the matrix of the sprite into that of the plane but had no luck.
Sprite rotation is defined in WebGL as you can read in SpritePlugin.js. Thus, if you wish to copy the rotation of an existing sprite in your scene, the easiest way may be to use quaternion. They allow better defining than x/y/z-angle defined ones (Euler rotations) as they ask for the rotation axis and the angle value. In your context, at each camera movement you modify a quaternion. You set it with quaternion.setFromAxisAngle(axis,angle). Then apply it to the plane with plane.setRotationFromQuaternion(quaternion).
Math side :
The axis would be the cross product between the vectors lastCameraPosition-sprite.position and actualCameraPosition-sprite.position,
the angle, the one between those vectors, got with the acos of their dot product divided by the product of their lengths.
For more about those maths, functions getMouseProjectionOnBall and rotateCamera in TrackBallControls are of great interest.
Hope it helped !
Good evening,
I was using EaselJS and now I'm trying to figure out how to use ThreeJS.
In EaselJS, you can set the rotation point of an element on the canvas before rotating it, .but it seems impossible to do the same thing in ThreeJS.
So, how can I draw a Sphere very 30deg to form a circle, like a clock.
A sphere at 12, at 1 o'clock, 2 o'clock, 3 o'clock...
I can rotate my sphere (which is useless) and position it, but I don't know how to calculate the coordinates.
Can't wait to hear back from one of you,
Jay
You need to translate then rotate each sphere.
so translate each circle by the radius of the clock,
circle.translateZ(10);
then rotate it into place by rotating around the clock center. In this case around the y axis,
circle.rotateOnAxis(new THREE.Vector3(0.0, 1.0, 0.0), THREE.Math.degToRad(30*i));
Do that for each circle.
Both libraries are based on a hierarchy scene with matrix rotations and translations. But one is 3D. Also the API is kinda different.
I am trying to vary the opacity of particles as a function of their distance from a plane.
This issue describes my problem, and the answer a year ago was essentially "you can't". Opacity is apparently a parameter of a material, not an element, and hence individual particle opacity is not possible.
Has anything changed, is there any way I could achieve this? If individual particle colouring is possible, I imagine this isn't out of reach.
Cheers
EDIT - This answer shows how to set per-point opacity using a custom ShaderMaterial. See https://stackoverflow.com/a/67892506/1461008 for an approach using PointsMaterial.
ParticleSystem has been renamed to PointCloud and then to Points.
Yes, you can create a Point Cloud and vary the alpha value of each particle's color dynamically.
In three.js, you can do this by setting the Point Cloud's material to be a ShaderMaterial having an attribute equal to the desired alpha value for each particle.
If ShaderMaterials, vertex shaders and fragment shaders are new to you, here is a really simple Fiddle that implements a Point Cloud with dynamic alphas: https://jsfiddle.net/9Lvrnpwc/.
EDIT: Updated fiddle
three.js r.148
Not sure why, but proposed solution didn't work for me. I used somewhat tricky shading to make points round and blurry at edges. So the corners of points were supposed to be transparent, but they appeared black: http://jsfiddle.net/5kz64ero/1/
Relevant part of my fragment shader:
// Distance from 0.0 to 0.5 from the center of the point
float d = distance(gl_PointCoord, vec2(0.5, 0.5));
// Applying sigmoid to smoothen the edge
float opacity = 1.0 / (1.0 + exp(16.0 * (d - 0.25)));
gl_FragColor = vec4(opacity * vColor, opacity);
I figured that traditionally this is solved by depth-sorting (with farthest points coming first), and I found some evidence that some older implementations of ParticleSystem in Three contained sortParticles attribute. But it's not there anymore. And in my case sorting would really involve redoing that every time camera position changes. Instead I set depthWrite: false and it seems to solve the issue.
The result: http://jsfiddle.net/5kz64ero/6/