Could anyone help with a quick description of how to move the Three.js transform controls programmatically. I would like to test changing values dynamically and also set bounds when moving manually.
i.e http://threejs.org/examples/misc_controls_transform.html
Instead of "move the Transform Controls" you can move the object. The TransformControls will update itself.
In the example:
controller = scene.children[4];
box = controller.object;
box.translateX(20);
// ... Other transformations
render(); //You have to rerender the scene
To set bounds, you have to check the conditions after moving, adding an EventListener.
t.addEventListener('change', functionCheckBounds)
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).
Hi I am trying to navigate between scenes. And when i navigate between scenes, i am not able to set/update rotation of the changed scene. i am storing rotation of scenes and then navigate between. Please help struggling from many days
Link to my code on Glitch https://glitch.com/~thin-newsstand
Working explained.
1. Save camera button saves the rotation into select along with the scene and
custom data attribute name data-r
2. If you inspect select dropdown options, you will notice.
3. When select option is changed, it will change sky image from select option and also change rotation.
4. I have used aframe-viewable-component.js to restrict top/bottom movement of skybox.
It sounds like you want to save and restore camera rotation, when a new panorama is loaded.
Since you are using the look-controls component on the camera, you will need to do this using that component. It might be best to modify that component, and create your own custom variation. You can download the original here:
https://github.com/aframevr/aframe/blob/master/src/components/look-controls.js
The component does have a built in function for saving and restoring position and rotation
saveCameraPose: function ()
restoreCameraPose: function ()
as it is written, the component can only save one entry
this.savedPose.position.copy(el.object3D.position);
this.savedPose.rotation.copy(el.object3D.rotation);
Depending on what you want, you may have to save the position/rotation to new variable that are associated with each pano, so that when a new pano is selected, that same entry for camera pos/rot is also loaded and camera restored. It would probably be best to do this with an array. Psuedo code looks something like:
Make an array (containing objects: {camPos, camRot}). named savedCamPR.
When new pano is selected get the index of current pano. named curPanoID
Save the look-controls pos/rot to savedCamPR[curPanoID], ie the array using the index of current pano.
Get the index of the new pao.
if there is a saved entry in the in savedCamPR, use that to restore the camera.
If you have trouble figuring it out, let us know, and I can probably make an online example that saves and restored camera positions for multiple panos.
I am using Unity 5 and I started to make a menu scene. When I made the canvas, all of values under the Rect Transform component are locked and it says "some values driven by Canvas." The only thing I can change is the z position when using the gizmo in the editor. I can't reset the position or anything. Why is this happening?
This means that the canvas's canvas component has it's render mode set to Screen space - overlay. This forces it to be the size of the screen. Change it to World Space and it will allow you to resize it and move it around.
Changing the Render mode is not an ideal solution; neither is Overlay mode the reason why this is happening at all. World Space is just a render mode that changes the way your whole UI behaves and would mean a whole different set up and a whole lot more work just to get a child UI object to move independently.
Here is the description of what World Space is for from the Unity site:
In this render mode, the Canvas will behave as any other object in the
scene. The size of the Canvas can be set manually using its Rect
Transform, and UI elements will render in front of or behind other
objects in the scene based on 3D placement. This is useful for UIs
that are meant to be a part of the world. This is also known as a
“diegetic interface”.
The Rect Transform usually gets locked because it is a child of another Canvas Object which controls its Transforms. The way to fix this is to overwrite it by adding a “Layout Element” component to it. From there you can configure it to work the way you like and it can have transforms independent of the Parent UI Object.
For full details, see this Unity support page: https://support.unity3d.com/hc/en-us/articles/115000179163-How-to-overwrite-Width-and-Height-values-that-are-driven-by-a-Layout-Group-in-runtime-
Canvas is depend on game tab in your window panel.
Adjust panel by use of close tab or resize panel or doc game panel.
It will help you make default 800 X 600 canvas.
I just wanted to know how do you transition a UnityEngine.UI from one position to another smoothly?
My current code is this:
GameObject rank1;
GameObject rankSlot1;
rank1 = GameObject.Find("Rank1");
rankSlot1 = GameObject.Find("RankSlot1");
rank1.transform.position = new Vector3(Mathf.Lerp (rank1.transform.position.x, rankSlot1.transform.position.x, 0.1f), rankSlot1.transform.position.y, 0);
But it seems like the Mathf.Lerp doesn't work :/
Thanks!
EDIT: All these gameobjects do have Rect Transform as they are a children of Canvas
It depends where do you use Lerp ? Are you calling it once ? or in Update(). Calling in update with correct parameters should work.
Beside Lerp, you can use Animator component with position curves to move from one point to another.
There is another option to use LeanTween plugin, it is a free plugin on asset store.
LeanTween.move(gameObject, yourFinalPosition, duration);
If using an animator you get access to the animation curves so you can get really nice controlled animations
Tricky part is if you are wanting to use 'apply root motion' (have the animations start where they are instead of fixed positions) you need to apply it to something that is considered ROOT:
- create an empty gameobject - with a normal transform
- parent the canvas with text to this new gameobject
- apply the animations to the gameobject transform ( not the UI rectTransform)
- on the animation in the inspector you should now be able to click on the 'generate root motion curves' and also select the 'apply root motion' check box for the Animator
hope this helps,, took a few hours to get working :) I used this to float up enemy damage text displays
I want to have two overlapping objects in a scene but I want to define which object should be drawn first. I have a sample of the code here: http://jsfiddle.net/sg02e5sm/1/
I'm using renderOrder = 1 for the second object to make it appear always on top of the first object (as long as they have the same Z value), but it's not working.
renderOrder does not make something appear "on top". It controls the order in which objects are rendered.
If you want your 2nd plane to be "on top", you can add
mesh.material.depthTest = false;
for the 2nd plane.
Alternatively, you can implement two render passes, as described in this SO answer.
three.js r.142