I am working in three.js65. I want drag each particle and push into a bucket shape geomerty like bucket filling with ball. I also achieved drag and push. But my problem is if it is pushed inside the buket it is not visible inside bucket. It is visible form outside only but ball inside the bucket only
Thanks in Advance
Related
I have two animated objects
Soldier and weapon
Animations are already created, but there is a problem, the weapon is not in the hands of a soldier.
How do you move the weapon along with its entire animation? So that I don't have to edit the whole animation frame by frame
It looks more or less like the picture, as you can see the pickaxe is lower than the hand
Set the 3D cursor to objects origin
Now add a new empty to the scene, it should be added at the objects origin
Parent the object to empty
Now move the empty to the desired location and the whole animation will be moved as well
idk how to add new empty to the scene.
I'm trying to do like that:
On. 3D view -> pose mode -> 3d cursor
what next?
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 recently encountered a problem with UI. I opened a new 2D project and created a canvas with a GameObject with a Image component. I then added a sprite by right-clicking Assets > Create > Sprites > Circle. This added a circle sprite to my Assets folder.
The problem is when I choose the Source Image for the Image component as the circle, it still displays as a rectangle.
The circle sprite is imported as Sprite for Texture Type.
This problem also happens with the other shapes, such as triangle.
I am using Unity 5.6.0b9 Personal. Build target is PC, Mac, Linux Standalone.
I am probably missing something very simple. Any help is appreciated!
It doesn't work like that. Circle and all other type of Sprites under the Assets > Create > Sprites Menu are only made to work with SpriteRenderers. This would have worked if you used SpriteRenderer from GameObject--> 2D Object--> Sprite. They do not work with the UI.
For the UI, this has to be done with the Mask component. Just get any round image then use it to cut out circle from your target square image.
Create a UI Image called "TargetSquare" which is the image you want to round.
Duplicate it then name this "MaskCircle" and then resize it to make it smaller than the "TargetSquare" until that circle shape is what you want.
Make the "MaskCircle" object to be the parent of the "TargetSquare" object then use this round Sprite I made as it's source image.
Attach the Mask component to the "MaskCircle" object.
Done. Your "TargetSquare" object will have the shape of the "MaskCircle" object.
If you get jagged edges, select the sprite you used for the "MaskCircle" image and then make sure that Mipmap is disabled.
Maybe it is bug, in unity 5.6.1f1 same story.
Just try to download new version unity 5.6.2f. I dont know, that bug is fixed or not.
Or
Use some image editor, for example photoshop.
P.S. My fail, all ok, it works on SpriteRenderer component. Unity generates white square, and in this sprite properties setting Sprite Mode to Polygon and creates some shape using vertices.
I am trying to create a small container where the user will be able to move the mouse/drag his finger in order to control the renderer DOM element, in another container. The problem is that TrackballControls.js, a controller script included with THREE.js, maps the controls to event.clientX and event.clientY, so when I drag with in the small container I created, I don't see the desired effect. I was wondering what a proper way to map the input from a small area and effect the renderer element as if the user had the entire rendering area to give input?
The reason I need to do this is because I am integrating a CSS3D view into a normal, 2D page, and the mobile experience is awful if I do not disable to touch controls on TrackballControls.js- the user will be scrolling down the page as normal, and when he hits the 3D div, the 3D controls take over and the user can no longer scroll out of that area back to the rest of the page content. So I need a little small area where the user can spin, zoom, and pan my 3D visualization but then be able to scroll on the rest of it to escape.
Thanks!
I need to implement a feature where images can be geotagged. I want to drag and drop images(one or more images can be selected from the list) onto the map. Then the selected images should be geo tagged automatically to the point where they are dropped.
Can someone give me an idea on how to work on this.
Thanks
Yes, you can do this with HTML and Javascript.
I would advice you to use the jquery libary.
What you do is render the map where you want to place an image(for this example new york city)
What you do is use jquery to make the image you want to drop of yourself at the statue of liberty 50% opacity and draggable.
Under the image you have an in the middle of the image as a "pointer" which is not opaque.
People drag the "dot" under the image to the desired location.
When it's released you take the offset x and y, calculate that to the relative time x and y to find the geolocation and then store everything via ajax.
That's kinda the basis you'll have to work on to accomplish this.
It's a fun project though, but a bit timeconsuming.