I'm using THREE.CSS3DRenderer and THREE.TrackballControls which calls render on change. I'd like to change the HTML elements (approximately 200) when the camera moves but if I do it on each render call, the number of calculations would be really high.
Ideally I'd like to discard small movements (not visible to the human eye) and only apply my calculations when needed.
E.g if camera.x = 0.015529912611241384 and then its moved, I only run my function if the difference between the old and new position is 0.0001
Any ideas on how to accomplish that?
Thanks
Instead of calling the function that changes the html function directly, raise a flag called change_html_elements.
Have another function that is running every x milliseconds, call the function that updates the html elements and resets the flag to false.
Related
I am trying to play an animation when a scene is instanced. It is a simple animation that translates y from -5 to 5. The animation plays but it plays at x = 0 and z = 0. I understand this is because the translation values for the respective co-ordinates in the animation are set to 0. I have a spatial node on my player scene that can grab transform info and pass it on to my animated scene, but I do not know how to dynamically change the x and z values of the key frames in script.
This answer contains three solutions to the problem...
Target a sub-property
If I understand correctly you want to animate only the y coordinate, and leave the other coordinates unchanged. That is, you don't want to animate the translation vector. You want to animate the y or the translation, a sub-property. This is possible out of the box, but the UI won't offer it to you.
Start by creating a track from the animation editor. You click on "Add Track", select "Property Track", and then on the object you want, and select translation. Now, while the track is empty (no key frame inserted yet), modify the track name to :y at the end.
The track would have been create with a name such as SpatialNodeName:translation, you are going to change it to SpatialNodeName:translation:y.
Afterwards, when you add key frames, they will be for translation.y. Note: doing SpatialNodeName:transform:origin:y or even SpatialNodeName:global_transform:origin:y also works. Similarly, you can imagine how do it for only rotation or scaling, and so on.
Create custom properties and animate them
I'll also mention that another option is using a Tween node (which are easier to create from code).
And also that both Tween and AnimationPlayer can animate any property. Thus, if you need to animate something that is not available, consider adding a property (see setget).
For example:
export var y:float setget set_y, get_y
func set_y(new_value:float) -> void:
transform.origin.y = new_value
func get_y() -> float:
return transform.origin.y
Then you can add a track for the custom property, and animate it like any other.
By the way, also notice the AnimationPlayer can also have "Call Method" tracks.
Modify the animation
Manipulating an animation from code is also possible. I've seen an example elsewhere. You can call get_animation on the AnimationPlayer to get the animation. Then on the returned animation you can call track_get_key_value and track_set_key_value. However, this rarely what you want to do in practice (unless you are making a Godot addon that creates or modifies animations or something like that).
I want to know when is the first time all the object are rendered? Is there any callback function option?
It seems that there is only a callback function available for image loading.
I want to hide something after all the objects are rendered. Could anyone tell me when my function to do this hiding should be called?
The render works all the time, but I don't know when is the first time all the objects in my scene are rendered.
As the image is ajax loaded,i should have a flag on the loadTexture callback funtion.That may be the key.
THREE.ImageUtils.loadTexture(this.scenedata.urls[i],THREE.UVMapping,function(){
self.isLoaded=true;
})
in the update()
if(this.isLoaded) this.hideLoadingbar()
It works better,just after image loaded and before everything is rendered.
Images sometimes take some time to load, but everything else will be in place when the first animation frame is executed. So in your animation code, just check if this is the first time it is called, and hide your object at that point.
I am working in d3.js, making a chart object. My chart has an update() method that refreshes the data, using a transition to animate the change. Because I have several different objects to animate within one chart, I wanted to store the transition as a member of the Chart's prototype, then use transition.each wrapped around my transitions to allow all the transitions to inherit the settings of the outer one. I am using setTimeout to schedule updates to the chart over time, so it becomes an animation.
The chart is supposed to show the distribution of means of a skew population, as more and more means are taken. Here's a working version, where the transition is not saved as a member of the chart prototype: http://jsfiddle.net/pmwxcpz7/
Now, I try to modify the above code to store the transition during the constructor of the Chart. When I fetch the saved transition object and call transition.each() in the chart's update method, it works for the first several hundred calls, then stops working. Here's the above code, with the creation of the transition moved to the constructor: http://jsfiddle.net/whtfny15/1/
When I run the second version of the code, the chart stops animating part of the way through, and the console shows many errors saying
TypeError: t.__transition__[e] is undefined (d3.v3.min.js:5)
I have reduced the code to the minimum needed to generate the error here: http://jsfiddle.net/bw1e2vLo/1/ (note that the error shows in the console, but this script doesn't produce any visual output.)
When I run the code (in Firefox), watching the console, I get 200 errors, all of which say
TypeError: t.__transition__[e] is undefined (d3.v3.min.js:5)
I'm not sure what's going on. I would like to be able to save the transition object into my chart's prototype, so I can reuse the delay and duration settings for future animations.
Thanks for the help!
It's not a good idea to store D3 transitions because they are stateful -- what happens when you operate on them depends on whether they are scheduled, running, or finished. If they are finished you can't in fact do a lot with them at all, as you've discovered. In general, you should only ever manipulate a transition when creating it.
The D3 way to do multiple transitions is to re-select the elements to operate on and initialise a new transition. You can store the parameters (delay and duration) in separate variables if you want to reuse them. If you're using a custom function for the transition itself, you can also save that separately and "assign" it to the transition using .attrTween().
I thought I would add that I opened an issue for this question on the d3 GitHub, and Mr. Bostock suggested using transition.call() to apply the settings in a callback right before using the transition.
The code would look something like this:
function myTransitionSettings(transition) {
transition
.duration(100)
.delay(0);
}
// Then later…
d3.transition().call(myTransitionSettings)…
The callback has access to the current transition object, so it can apply the same settings to each new transition that invokes it.
The expected behaviour of the chart is to change and show a different series, when a different option gets selected from the drop down. While changing, it does not animate, even though i have included the "animate" element in the options. Following is my code:
jsfiddle.net/7C53q/
I had this same problem. Finally, I tried re-using the same chart object for the second draw() call, and it worked. It makes sense, when you think about it: how's it supposed to know what the original data was, unless you pass in the chart object drawn with it (or something else containing the original data)?
If you look in the animate example, they create one chart object, then do the draw() in two separate functions, without re-creating the chart object. Please don't ask me why they don't mention this little fact.
Although I am using opengl es 1.1,but I want to try to work with my own matrix stuff,
I built a fps camera matrix function called : fpsmatrixupdate();
then I call it like this:
fpsmatrixupdate(); //this function generated a matrix called mat
drawbox(min,max)
everything works great,until I am trying to draw another box:
fpsmatrixupdate(); //this function generated a matrix called mat
drawbox(min,max);
glLoadIdentity(); // I tried to call this before drawbox2 but box2 doesn't show
drawbox2(min,max);
questions: why this works?
fpsmatrixupdate(); //this function generated a matrix called mat
drawbox(min,max);
glLoadMatrixf(mat); // mat is fps camera update function generated matrix,
drawbox2(min,max);
if I want to draw 200 boxes with different location, do I have to call glLoadMatrixf(mat) 200 times? if I don't call glLoadMatrixf(mat) to reset matrix ,the second box's transform is based on first box..
if anybody want to see the code, they are almost 99% copied from this demo:
http://www.codesampler.com/oglsrc/oglsrc_5.htm#ogl_fps_controls
Yes, if you want to base your objects' placement on a per-object transformation, you've to do a glLoadMatrix each time. It makes sense to calculate the transformation matrices once and store them in each object's scene data for easy access.