I am trying to use directional rotation plugins together with pixi.js plugins.
However, it doesn't seem to be working. If you undo the comments in the codepen: https://codepen.io/asiankingofwhales/pen/RyNKBR?editors=0010, you could see that I tried three different ways:
1 directly adding "_cw" doesn't work
2. using directional rotation plugin without pixi.js plugin result in crazy rotating
3. combining directional rotation plugin with pixi plugin doesn't work at all. no rotations.
Can anyone help?
Or if this is not possible yet, can anyone shed some lights on how to do directional rotations with pixi.js?
This is the simplified versions of a project I am working on: https://codepen.io/asiankingofwhales/pen/JvoWYY?editors=0010. Basically, I have a constantly rotating object, then at one point, I decide to rotate it to a certain point. However, I want all the rotations to be clockwise, which isn't possible at this point.
I tried accessing the current rotations values, and then calculate the difference between the current and the destination values, then using the "=+" to do clockwise rotation. However, the value I am accessing always seems to be outdated.
Because if the rectangle is constantly rotating, I might be getting a rotation value now, but by the time I used it to calculate differences, it's already moving to a bigger rotational angle. Or am i wrong?
Any other other solutions to this problems?
The right answer has been found:
https://greensock.com/forums/topic/18213-directional-rotations-do-not-work-with-pixi-plugins/?tab=comments#comment-83923
Related
Im trying to create an effect where I have multiple images/meshes on the same sine wave. I can distort all separately, but of course they are not in sync.
In the vertex shader I have this line for the simple distortion:
pos.z += sin(pos.y);
My Idea would be to make the sin wave independent from the pos.y value and replace it with something like the current position y in the height of all of my images.
My other Idea would be to have only one mesh and paste every image on it, but I am not sure if it is a good practice or if that would work at all.
I would be greatful for any suggestion on how to implement this.
Thanks!
Yes, this is possible. See this example, which shows 4 adjacent grids in sync. You have to adjust certain values to put them all in sync. At present, I had been able to do so only in directions of 45 degree increments. But you can use multiple waves of varying magnitudes and frequency.
The example was created using three.js code to perform the animation, but I have been able to replicate some of this using a shader.
Let me know if you still need help.
I have problems with a multitouch library, in this case Interact.js, which e.g. generates a pinch / rotate for a target although one of the two pointer events is outside the target when the gesture is started. That doesn't do me any good.
I wonder if it makes sense to rely on a library or to create the 2 gestures, drag and rotate, myself.
In order not to start all over, there is an example for this, i.e. to determine the mathematics of the rotation from the movement of 2 points, I have managed the relevant pointers so far.
Many thanks in advance.
Version and info
THREE.ObjectLoader2: 2.4.1
THREE.LoaderSupport.MeshBuilder: 1.2.1
THREE.LoaderSupport.WorkerSupport: 2.2.0
THREE.WebGLRenderer: 93
THREE.REVISION: 93
The problem
When I raycast an object in my scene, I found that it worked perfectly down to the pixel, until I moved the object. In my program I expload the scene, so I move all the objects, and child objects away from the center of the scene.
To easily visualise the issue instead of raycasting a single point at a mouse click, I opted to raycast the entire screen, this is what I get (Figure 1)
(Figure 1)
The reason for the gaps is because it took to long to raycast every pixel, so instead I raycasted every fourth. The reason for the gap in the middle is because I zoomed away from the original position.
Now, see what happens when I expload the object (Figure 2),
(Figure 2)
As you can see, there is almost a circle. Why is this?
What I've tried
I've tried many things across the internet, and came here when I could find no more.
I've tried a range of different models, some work differently to others, strangely enough. The lamborghini-aventador which was created in Blender works the strangest.
To see if it was a problem with the exploading code, I moved the object to the right. This is where things get interesting (Figure 3).
(Figure 3)
It looks as if my outlining I put on the object (the outlines are an EdgesGeometry) is behind, the actual object is in the middle, and the raycasts are further.
What I speculate
I suspect the issue is to do with scaling. So I tried removing all scaling I did in the code, however I got the same result, unfortunately.
Apologies if this is some noobie mistake, though I do hope it is :)
The code
For those who are adventurous enough to delve into my terrible code base, here it is (the majority of the code is inside demo.js):
github
Testing it
Press G to shoot the raycasts (will freeze for a bit), press X to expload, press S to unexpload. Standard orbit controls.
What I've found
Here are some of the links I have already found and tried on this issue:
https://threejs.org/docs/#api/core/Raycaster
Three.js Raycaster not detecting scene mesh
https://github.com/mrdoob/three.js/issues/1325 (Updating the matrix)
http://barkofthebyte.azurewebsites.net/post/2014/05/05/three-js-projecting-mouse-clicks-to-a-3d-scene-how-to-do-it-and-how-it-works (Followed step by step)
... and many more ...
Any ideas?
I think that your model might not have proper bounding boxes/spheres generated.
The circular shape could result from the rays passing the bounding sphere check of a bounding sphere that is too small.
You mention resizing/processing your geometries in some way... After you do that, try calling geometry.computeBoundingBox() and geometry.computeBoundingSphere() to rebuild boxes and spheres, and see if that helps?
edit: Apparently this problem was due to bounding boxes and spheres not being recomputed...
the fix was to:
scene.traverse( (o)=>if(o.geometry){o.geometry.computeBoundingBox();o.geometry.computeBoundingSphere();} );
So I have an airplane model facing a default location(Z axis).
By clicking a button the airplane should slowly turn towards a vector with a certain rotation speed.. something similar with model.lookAt(farAwayMesh.x, farAwayMesh.y, farAwayMesh.z);
but to be animated.
I've done this before in 2d but honestly I have no idea how to do this in 3d.(Not planning to use Tween.js)
I hope that anyone who encountered the same issue could support me, already spent some good hours trying.
3D orientation interpolation is done with quaternions, refer to http://threejs.org/docs/#Reference/Math/Quaternion.slerp, read 3D Math primer for graphics and game development to learn how quaternions work
I'm building some sort of planetary system in three.js and I spent couple of hours looking for a decent solution to get an outer glow on one planet - a sphere object with a texture.
I came across this example http://stemkoski.github.io/Three.js/Selective-Glow.html which kind of does the trick, but the thing is - this form of glow also affects the main 3D object resulting in color change (as seen there).
Another nice glow example can be found here http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html but again it glows the entire region, not only "outer" thing.
I've been reading some discussion thread about "overrideMaterial" property on GitHub but this seems experimental, unused and undocumented... not even sure if this could solve my problem.
Please share your ideas, thanks!
I've worked a bit on separating out the part of the WebGL Globe code (linked to above) that produces the atmospheric effect. A preliminary working version is here:
http://stemkoski.github.io/Three.js/Atmosphere.html
To the best of my understanding, there are a few interesting things going on in the original code to create the atmospheric effect. First, the glowing texture is placed on another sphere -- let's call it the Atmo Sphere :) -- that surrounds the sphere with the image of earth on it. The Atmosphere material is flipped so that the front side does not render, only the back side, thus it does not obscure the earth sphere even though it surrounds it. Second, the gradient lighting effect is achieved by using a fragment shader rather than a texture. However, the atmosphere will change its appearance if you zoom in and out; this was not evident in the WebGL Globe experiment because zooming was disabled.
[updated April 30th]
Next, similar to the source code from
http://stemkoski.github.io/Three.js/Selective-Glow.html
the sphere with the gradient lighting texture (and another black-textured sphere) are placed in a second scene, and then the results from that scene are composed with the original scene using an additive blender. And just so you can experiment with the parameters used to create the glow effect, I have included a couple of sliders so that you can change the values and see the different glow effects that result.
I hope this helps you get started. Good luck!
[updated June 11]
I have a new example which achieves the same effect in a much simpler way, rather than using post-processing and additively blending two scenes, I just changed some of the parameters in the customized material. (It seems obvious in retrospect.) For an updated example, check out:
http://stemkoski.github.io/Three.js/Shader-Halo.html
Still haven't figured out the pan/zoom issues though.
[Updated July 24]
I figured out the pan/zoom issues. It requires using a shader; for details about the complexities, see the related question Three.js - shader code for halo effect, normals need transformation and for the final working example, see:
http://stemkoski.github.io/Three.js/Shader-Glow.html.
I'm pretty happy with the final result, so I will not be updating this answer any more :)
In the example you are referring to, I used a blue glow with additive blending -- if you used a white color instead maybe that would produce the effect you want.