Ambiera Forum

Discussions, Help and Support.

Create a new account, Search, or Login:
Name: Password:
Ambiera Forum > CopperCube > Feature requests and bug reports
Parallax scrolling
Author Text

blaxxun
Registered User
Quote
2012-05-15 05:35:07

Hello,

is there a way to realize a parallax scroll effect for the camera per javascript somehow?

I can not find such an Behavier event in the camera Behaviours.


Iam not a JS programmer at all and just starting.

Maybe its possible to add some js code into the main html file to
access the scene camera and to move the camera position while the mouse is hovering over the screen.

I would like to create a full WebGL website with parallax scroll effect.

thanks!


niko
Moderator
Quote
2012-05-15 06:12:13

It's 3D, and so you should get a parallax effect automatically. See for example this game here, which was created using CopperCube: http://www.youtube.com/watch?v=w...
Or maybe I didn't understand you correctly. :)


blaxxun
Registered User
Quote
2012-05-16 05:27:48

Yes, its 3D, maybe i was not explaining it well enough.

As i sayd i wanna build a website in 3D.

When you click on an object then the camera target jumps to this objects
center and the camera turns. That works already.

What i want further is that the camera position changes in relationship while the mouse moves in horiz and vertical.

So there is a automatic parallax scroll effect.

How do i do this XY movement of the camera?

I think first i have to get te mouse state.
Then i have to give this value relative to the camera.

I dont have a clue of scripting... but maybe someone here can give me a hint.


niko
Moderator
Quote
2012-05-16 06:25:37

Ah, I understand. Not entirely, but I think I see now where you are going. :)
I think the difficult part here is to find which 3d position is below a 2D position of the mouse, correct? In copperlicht, there are some functions which might help you with this, namely engine.get3DPositionFrom2DPosition(x, y) and maybe also engine.get2DPositionFrom3DPosition(pos3d) (see here: http://www.ambiera.com/copperlicht/documentation/symbols/CL3D.CopperLicht.html)
By setting the position of the camera into the direction of the desired 3d coordinate, and probably only modifying the x and y coordinate (or x and z in your case maybe?), you should get what you need.


blaxxun
Registered User
Quote
2012-05-17 09:36:41

Hi Nico! Thanks for the information and the hints!
I will move on with my research haha!

greets
Chris


blaxxun
Registered User
Quote
2013-12-07 19:25:59

Hello again.

Since i couldnt figure out on how to program what i want i wanna explain
it again.
Maybe someone can help me and provide some code to realize it.

Imagine a scene with 2 Boxes.

The camera target is in the center of the left box.

As long as you dont move the mouse nothing happens.
WHEN you move the mouse the camera follows the mouse movement
up and down, left and right. The camera target remains on the left box.

Now when you click on the right box the camera target moves to the center of the right box (animated).
The camera itself moves to a new position in front of the right box.

Now again, when you move the mouse the camera follows smooth up and down.
(When the mouse reaches the browserwindow border the camera stops smoothly of course)


So the idea is to have a scene with objects and the camera has fixed positions in front of these objects.
It flys to this positions in front of an object when you click this object.
Additionally the camera follows the mouse cursor up/down left/right while it looks at an object.


andycampbell10
Registered User
Quote
2013-12-07 21:46:31

Not sure if this is exactly the same thing as you mean blaxxun, but I'm also very keen to try and achieve a parallax effect in Coppercube which would be very useful for creating WebGL-based interfaces/etc. I'm sure it should be possible through the scripting system Niko has developed to allow plug-in behaviors.

This is a similar effect I made in HTML5 using jQuery -
http://inanimatealice.com/thespa...

Basically the foreground moves at different speeds to the background giving a sort of 2.5D effect - or a sense of their being 'layers'. And the mouse moves the elements (or the 'camera') smoothly depending on where it is on the screen. But never too far, it is always constrained.

A couple of Flash examples from a while ago -
http://www.dreamingmethods.com/l...
http://www.dreamingmethods.com/t...
http://www.dreamingmethods.com/c...

Being able to do this in a 'proper 3D' environment in CC with a restrained and mouse responsive camera would be awesome.

Andy



blaxxun
Registered User
Quote
2013-12-08 03:53:35

Hey Andy,

Cool stuff!
Yes, thats exactly what iam talking about.

Actually its nothing else than moving the camera on its LOCAL Axis
up/down left/right following the mouse movements.


blaxxun
Registered User
Quote
2013-12-28 22:07:11

Hello,

maybe the developer could reply to this thread?

Would be realy nice to get some info.

For me its the only reason why i dont buy the full version.
Im not a programmer but iam a 3D Artist.

I wanna build my website with Coppercube but i cant bcause of this missing feature.

I guess for the dev (Nico?) it would take 30minutes to implement this feature.


andycampbell10
Registered User
Quote
2013-12-28 23:38:13

Yes I would also very much appreciate this feature!! :)

I can imagine it would work as a plugin with camera movement restricted on X and Y according to mouse position and adjustable in sensitivity perhaps? It would be very awesome. There are a lot of attempts to do this with jQuery etc which are OK but restricted to 2D layers; I have never seen a WebGL version so it would be seriously breaking cool new ground.

Andy


niko
Moderator
Quote
2013-12-29 07:12:18

Sorry, somehow I've overlooked this thread. :)
You can download a parallax behavior script from here: http://www.ambiera.com/coppercub...
I've only tested is with WebGL and the Windows .exe target, but it should work everywhere.


andycampbell10
Registered User
Quote
2014-01-17 18:06:58

Brilliant thank you! I have managed to create a v. simple scene with this, by aligning the camera and two layers -

http://www.dreamingmethods.com/c...

However, the camera seems to "tilt" rather than "move" - is that right? Does the viewpoint "target look" position change rather than the actual camera position in x / y space?

I think the latter may be more effective - would it be easy to change the code in the plugin to do this?

Thank you - this is fantastic :)

Andy


niko
Moderator
Quote
2014-01-19 21:03:10

Yes, only the position is moved, but moving the target additionally should be no problem. Maybe I have time for this next week, but maybe another user could help quicker.


blaxxun
Registered User
Quote
2014-03-11 16:34:00

Helle Nico,

First of all, thanks for building this Parallax Extension.

I tryd it out but then i found out that its not really a Parallax behave.
Its more an limited Cam orbit around the Cam interest.

So there are 2 things wrong.

1) The camera should only move in Screenspace
2) The Interest should move the same way the camera moves
3) The camera should smoothly ease out
4) There should be a way to define how far the camera can travel
or how fast.
5) Maybe a funktion where you can set that the camera always moves
slowly randomly when no user interaction is done.

I hope i dont ask for too much. Its just that it would be GREAT to have it.

Thanks.


gree
Registered User
Quote
2022-11-11 04:19:34

Thanks for this great plugin.
I'd need to flip/invert the movements. Is this somehow possible with an extra snippet?
Further more is it possible to set different values for horizontal and vertical movements?

Many thanks @niko; in case anyone else can answer it I'm more than pleased, thx

Update: I've cloned your script and added/changed:
camPos.z -= moveX * -1;
Line 69 + 78


Create reply:


Posted by: (you are not logged in)


Enter the missing letter in: "Internat?onal" (you are not logged in)


Text:

 

  

Possible Codes


Feature Code
Link [url] www.example.com [/url]
Bold [b]bold text[/b]
Image [img]http://www.example.com/image.jpg[/img]
Quote [quote]quoted text[/quote]
Code [code]source code[/code]

Emoticons


   






Copyright© 2020 Ambiera e.U. all rights reserved.
Privacy Policy | Terms and Conditions | Imprint | Contact