Away3D Forum How to position movieclips on sphere?

Marius, Newbie
Posted: 01 November 2011 05:33 PM Total Posts: 7

Hi,
i have this problem:

There is a sphere, camera (Hovercamera3d) is inside sphere. Now I want to add some movieclips. I don’t know how to do is better - to position movieclips exactly on the sphere wall’s or position them in 2D.

If positioning on walls, then I need to ensure that movie clips are always facing the camera. If positioning in 2d, then i need to convert 3d points to 2d.

Any help is appreciated.
Thanks.

Jens Chr Brynildsen, Administrator
Posted: 29 November 2011 12:36 PM Total Posts: 70 [ # 1 ]

This is fairly simple to do:
1. Make a container and add it to the scene at the default 0,0,0 position
2. Make a plane, add it to the container
3. Move the plane backwards along the Z axis - towards the sphere
4. Rotate the container to the correct angle to position the plane

Easy?

J

Marius, Newbie
Posted: 29 November 2011 12:45 PM Total Posts: 7 [ # 2 ]

Thank you Jens.
But I have other problem, not to putting hotspot to scene.
Because my sphere is with video material, I want hotspot to be on specific place. I could choose it by mouse. Because video changes with time, I had to click many times to get positions sequence.
The question is - how to convert these positions to hotspot positions? And these hotspots should move with my video (because video changes by time) or when I rotate the sphere

Thanks.

Jens Chr Brynildsen, Administrator
Posted: 29 November 2011 10:22 PM Total Posts: 70 [ # 3 ]

Right. What I would do is to use what I suggested above, but to combine it with what you suggest. Track the angle/time of these positions on the sphere by outputting a trace or something like that.

The moving of the hotspots could be done easily by embedding cuepoints in the video that contain the data collected above so that you can tween between them. Every time a cuepoint occurs, you’ll just tween the hotspot to that angle.

Wouldn’t that work?

J

Marius, Newbie
Posted: 30 November 2011 07:49 AM Total Posts: 7 [ # 4 ]

I agree with you, but…
Maybe I have expressed myself not correctly, but I don’t understand different part of algorithm.

Let’s say that I’ve clicked exact place of sphere with mouse, where I want hotspot so appear. From MouseEvent3D event I get x,y,z (of scene I guess) or u,v of material. Now here comes that part I don’t understand. If I set x,y,z to MovieClipSprite (HotSpot) it doesn’t work

Jens Chr Brynildsen, Administrator
Posted: 06 December 2011 12:13 PM Total Posts: 70 [ # 5 ]

This took a little time, but here’s the solution. I had to get some help from Fabrice to get this right so big thanks to him!

Anyway - the basic idea here is that based on the 3D position of the mouse click, we can get a 3D Vector that indicates the direction:


var vec:Vector3D = new Vector3D(e.sceneX, e.sceneY, e.sceneZ);

This contains the exact position we clicked the sphere surrounding the panorama.


vec.normalize();

By normalizing that vector (removing the position info, but keeping the direction along XYZ) we get a vector that we can just multiply to achieve the positioning you want. We can’t put the hotSpot onto the sphere, but if we just move it a little towards us and do some trickery with pushfront/pushback, it’ll work. So if the sphere has a 1000 unit radius, we’ll use 900 for the hotspot:

var distance:int = 900;
hotSpot.x = vec.x * distance;
hotSpot.y = vec.y * distance;
hotSpot.z = vec.z * distance; 

This is half way there. The next you need is to rotate the hotSpot so that it always faces the camera:

hotSpot.lookAt(origo);
hotSpot.rotationX -= 90; 

So all you need to do is to save clicks on the video together with the timing, and you can then play this back again with some tweening between positions. That will give you hotspots that move with the video.

You can see a full example here

J

Marius, Newbie
Posted: 06 December 2011 12:18 PM Total Posts: 7 [ # 6 ]

Awesome, thank you guys - Jens and Fabrice.
I’m going to implement the code to see if it works for me.

Very grateful
M.

Jens Chr Brynildsen, Administrator
Posted: 06 December 2011 01:02 PM Total Posts: 70 [ # 7 ]

Forgot to post - here’s a compiled version:
http://www.flashgamer.com/a/setHotSpot.html

Click to set the hotspot
ClickAndDrag to navigate

Marius, Newbie
Posted: 06 December 2011 01:18 PM Total Posts: 7 [ # 8 ]

Yes, I’ve already tried on my computer. Works perfect

Thanks.

Marius

Marius, Newbie
Posted: 09 December 2011 01:19 PM Total Posts: 7 [ # 9 ]

I tried to play with hotspots in my project, everything is fine with polygons. But when I try to use MovieClipSprite, the position is incorrect. Normalized vector does not do the same job as for polygon. Is there any other way to position movieclipsprite than setting x,y,z ? I have to use movieclipsprite, because my hotspots will be movieclips with interaction

Marius, Newbie
Posted: 12 December 2011 08:46 AM Total Posts: 7 [ # 10 ]

I think it’s due to MovieClipSprite align property. It seems that MovieClipSprite is always aligned to top left corner. I tried different align properties, but it is always aligned to the same top left corner. And by the way, I do not find info about available align keywords. Trying to figure it out

Fab4ce, Jr. Member
Posted: 09 October 2012 09:06 PM Total Posts: 44 [ # 11 ]

this was working in 4.0 dev branch

var vec:Vector3D = new Vector3D(e.sceneX, e.sceneY, e.sceneZ);

but in 4.0 final gold there is no sceneX property of MouseEvent
So i tried to write it this way:

var hotSpot = new Sprite3D(hotspotMaterial, 500, 500);
var vec:Vector3D = new Vector3D();
  vec = e.scenePosition;
   vec.normalize();
   var distance:int = 4500;   
   scene.addChild(hotSpot);
   // move the hotSpot based on the direction-info in the normalized vector
            hotSpot.x = vec.x * distance;
            hotSpot.y = vec.y * distance;
            hotSpot.z = vec.z * distance; 

But it´s not working the same. The positioning of the hotspot seems to happen behind the camera.
What could be the reason? What are the changes for the MouseEvent in this case?

ANDI, Newbie
Posted: 13 July 2013 12:48 PM Total Posts: 4 [ # 12 ]

Hi where can I find the hotspotMaterial Class or methode in away3d version 4 ?

How to position movieclips on sphere? Software: Away3D 3.x

Marius, Newbie Posted: 01 November 2011 05:33 PM Total Posts: 7 Hi, i have this problem: There is a sphere, camera (Hovercamera3d) is inside sphere. Now I want to add some movieclips. I don’t know how to do is better - to position movieclips exactly on the sphere wall’s or position them in 2D. If positioning on walls, then I need to ensure that movie clips are always facing the camera. If positioning in 2d, then i need to convert 3d points to 2d. Any help is appreciated. Thanks.
Jens Chr Brynildsen, Administrator Posted: 29 November 2011 12:36 PM Total Posts: 70 [ # 1 ] This is fairly simple to do: 1. Make a container and add it to the scene at the default 0,0,0 position 2. Make a plane, add it to the container 3. Move the plane backwards along the Z axis - towards the sphere 4. Rotate the container to the correct angle to position the plane Easy? J
Marius, Newbie Posted: 29 November 2011 12:45 PM Total Posts: 7 [ # 2 ] Thank you Jens. But I have other problem, not to putting hotspot to scene. Because my sphere is with video material, I want hotspot to be on specific place. I could choose it by mouse. Because video changes with time, I had to click many times to get positions sequence. The question is - how to convert these positions to hotspot positions? And these hotspots should move with my video (because video changes by time) or when I rotate the sphere Thanks.
Jens Chr Brynildsen, Administrator Posted: 29 November 2011 10:22 PM Total Posts: 70 [ # 3 ] Right. What I would do is to use what I suggested above, but to combine it with what you suggest. Track the angle/time of these positions on the sphere by outputting a trace or something like that. The moving of the hotspots could be done easily by embedding cuepoints in the video that contain the data collected above so that you can tween between them. Every time a cuepoint occurs, you’ll just tween the hotspot to that angle. Wouldn’t that work? J
Marius, Newbie Posted: 30 November 2011 07:49 AM Total Posts: 7 [ # 4 ] I agree with you, but… Maybe I have expressed myself not correctly, but I don’t understand different part of algorithm. Let’s say that I’ve clicked exact place of sphere with mouse, where I want hotspot so appear. From MouseEvent3D event I get x,y,z (of scene I guess) or u,v of material. Now here comes that part I don’t understand. If I set x,y,z to MovieClipSprite (HotSpot) it doesn’t work
Jens Chr Brynildsen, Administrator Posted: 06 December 2011 12:13 PM Total Posts: 70 [ # 5 ] This took a little time, but here’s the solution. I had to get some help from Fabrice to get this right so big thanks to him! Anyway - the basic idea here is that based on the 3D position of the mouse click, we can get a 3D Vector that indicates the direction: `var vec:Vector3D = new Vector3D(e.sceneX, e.sceneY, e.sceneZ);` This contains the exact position we clicked the sphere surrounding the panorama. `vec.normalize();` By normalizing that vector (removing the position info, but keeping the direction along XYZ) we get a vector that we can just multiply to achieve the positioning you want. We can’t put the hotSpot onto the sphere, but if we just move it a little towards us and do some trickery with pushfront/pushback, it’ll work. So if the sphere has a 1000 unit radius, we’ll use 900 for the hotspot: `var distance:int = 900; hotSpot.x = vec.x * distance; hotSpot.y = vec.y * distance; hotSpot.z = vec.z * distance;` This is half way there. The next you need is to rotate the hotSpot so that it always faces the camera: `hotSpot.lookAt(origo); hotSpot.rotationX -= 90;` So all you need to do is to save clicks on the video together with the timing, and you can then play this back again with some tweening between positions. That will give you hotspots that move with the video. You can see a full example here J
Marius, Newbie Posted: 06 December 2011 12:18 PM Total Posts: 7 [ # 6 ] Awesome, thank you guys - Jens and Fabrice. I’m going to implement the code to see if it works for me. Very grateful M.
Jens Chr Brynildsen, Administrator Posted: 06 December 2011 01:02 PM Total Posts: 70 [ # 7 ] Forgot to post - here’s a compiled version: http://www.flashgamer.com/a/setHotSpot.html Click to set the hotspot ClickAndDrag to navigate
Marius, Newbie Posted: 06 December 2011 01:18 PM Total Posts: 7 [ # 8 ] Yes, I’ve already tried on my computer. Works perfect Thanks. Marius
Marius, Newbie Posted: 09 December 2011 01:19 PM Total Posts: 7 [ # 9 ] I tried to play with hotspots in my project, everything is fine with polygons. But when I try to use MovieClipSprite, the position is incorrect. Normalized vector does not do the same job as for polygon. Is there any other way to position movieclipsprite than setting x,y,z ? I have to use movieclipsprite, because my hotspots will be movieclips with interaction
Marius, Newbie Posted: 12 December 2011 08:46 AM Total Posts: 7 [ # 10 ] I think it’s due to MovieClipSprite align property. It seems that MovieClipSprite is always aligned to top left corner. I tried different align properties, but it is always aligned to the same top left corner. And by the way, I do not find info about available align keywords. Trying to figure it out
Fab4ce, Jr. Member Posted: 09 October 2012 09:06 PM Total Posts: 44 [ # 11 ] this was working in 4.0 dev branch var vec:Vector3D = new Vector3D(e.sceneX, e.sceneY, e.sceneZ); but in 4.0 final gold there is no sceneX property of MouseEvent So i tried to write it this way: `var hotSpot = new Sprite3D(hotspotMaterial, 500, 500); var vec:Vector3D = new Vector3D(); vec = e.scenePosition; vec.normalize(); var distance:int = 4500; scene.addChild(hotSpot); // move the hotSpot based on the direction-info in the normalized vector hotSpot.x = vec.x * distance; hotSpot.y = vec.y * distance; hotSpot.z = vec.z * distance;` But it´s not working the same. The positioning of the hotspot seems to happen behind the camera. What could be the reason? What are the changes for the MouseEvent in this case?
ANDI, Newbie Posted: 13 July 2013 12:48 PM Total Posts: 4 [ # 12 ] Hi where can I find the hotspotMaterial Class or methode in away3d version 4 ?

How to position movieclips on sphere?

Login

Away3D Forum

Member Login