How can I combine two lookAt without creating a roll.
The individual lookAt are fine with the up vector (no roll) but if I try to multiply two lookAt matrix, it does not work anymore.
Thanks
Related
I am creating a scene with several thousand cubes, each of which can be translated, scaled and rotated.
Initially, I tried creating a cube geometry, applying the transformations, creating a mesh with my material and adding it to the scene. That worked but was very slow because of all the draw calls.
So now, for all the cubes, I create a THREE.BoxGeometry(1,1,1), and merge it with a single THREE.Geometry() each time before finally creating a material and a single mesh and adding it to my scene.
The performance is drastically improved but I don't know how to apply a translation (XYZ), scale (XYZ) and rotation (quaternion) to each box before merging it. Can someone point me at the right syntax?
Secondly, if I merge my geometry like this, is there still a way to pick out a single box with a raycaster? Typically I've used the object name on the mesh but that's not relevant anymore.
Thank you.
I'm using Three.js to create a spiral galaxy I've gone down the InstancedBufferGeometry so I can render lots of stars with great performance.
For now, I'm using a plane as my object, the trouble I have is that when I orbit around the galaxy these planes don't look at the camera.
I have tried using the lookat function however that doesn't seem to work.
Does anyone know how to get InstancedBufferGeometry to look at the camera.
Many thanks in advance.
The lookAt method belongs to THREE.Object3D, and it makes the entire object rotate towards a point, not each of its geometry's instances. If you're using InstancedBufferGeometry, you could perform these calculations in the vertexShader, but can be computationally expensive, given the quantity of planes you're rendering.
If you're using InstancedBufferGeometry for planes only, I recommend you use THREE.Points instead, which is made to automatically generate planes that always look towards the camera, as demonstrated in these examples:
https://threejs.org/examples/?q=point#webgl_points_sprites
https://threejs.org/examples/?q=point#webgl_custom_attributes_points
All you'd need to worry about is their positions, and the rotations will always "billboard" towards the camera without the need of manually calculating rotations.
I'm making a 3d dice game and came to one issue I can't wrap my head around so I'm turning to you for help.
In the scene/world (using threejs with cannonjs) I have a plane and one die, which I'm throwing on the plane (screenshots here pre-roll http://prntscr.com/l9rat5, result http://prntscr.com/l9rdeb). All works fine, until I want to throw some specific value on a die like 1 for example.
Since I'm using loaded models instead of texture images for faces of the cube, I cannot handle this just by changing faces of the cube in threejs (since model has 100s of them). Therefore I was hoping I can achieve this by somehow changing the initial quaternion of the body (kind of pre-rotate it) so the die falls on a specific side. The die mesh is just following the body position and quaternion.
I have these questions:
Is this even possible to do? Maybe when I change quaternion pre throw it will result always in different final quaternion, which I can not determine? If it is not possible to do with quaternions, any tips?
If it is possible, how do I figure out by which quaternion do I need to multiply my initial one to get desired result value 1? I have available the final quaternion and I know which values are on each face from emulated throw so I was trying to play with quaternion inverse but no luck.
If I just rotate the initial body so that face 1 rotates to the result face (eg. 6) it works in some cases (i throw 1 when emulated result was 6), but when the throw gets more complicated (more rotations) it is not working of course since I'm not counting on all possible rotations.
If it is not clear what I mean let me know pls.
Thanks a lot
m
First of all, make sure that you use fixed step simulation. You do this by passing 3 arguments to world.step() instead of one. This will make sure that your simulation will behave the same every time, regardless of frame rate.
Also make sure that your initial position, velocity and force of the die is the same every throw.
If you construct the quaternion using the built in cannon functions, like .setFromAxisAngle(), all should be good... Use .setFromAxisAngle() with even 90-degree angles around different axis. Why bother using quaternion inverse?
If you want an alternative way of rotating the die, put the mesh below an empty parent mesh in your scene. During simulation, copy the cannon.js output to the parent mesh. Then rotate the child die mesh to get the desired initial (and end) rotation.
For the note, I solved it by rotating just the geometry (not mesh) in threejs and not touching the quaternion of the body at all.
I have some project for child http://kinosura.kiev.ua/sova/ and i need to check faceIndex of all cubes in screen.
Now i use intersections array from mouse, but is working only when user pointer at the cube.
How to make ray or rays from camera to all object to check faceIndex ?
I try to make four rays to cubes but if i set cube.position as origin of like this:
raycaster.setFromCamera( cube1.positoin , camera )
I get empty array of intersections.
I also try to set static 2d vector as origin (get coordinate from mouse) but i have relative renderer size and this coordinate all time change... its not work(
Thanks for answer anyway.
I suggest that you try another approach It appears that your cubes do not cover one another, relative to the camera view. So use the surface normals, and compare them to the view direction to determine if they are facing the camera or facing away from the camera by a simple one-per-polygon dot product.
When you are creating your geometry, before adding it a THREE.Mesh call .generateFaceNormals() on it.
Instead of ray casting, iterate through all faces, grab the surface normal of the face, transform relative to the view (inverse transpose of the object's matrix), then dot(). might sound complicated, at first, but it's actually just a couple of steps and much faster than doing a lot of raycasts (which will probably include this anyway!)
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 !