3-d slider position

Questions
1

Hi guys.

I codded this slider https://webdesign-flash.ro/ht/3d-slider/ based on a tutorial that I found on youtube, I am a beginner and everything seems difficult.

I need help positioning the slider on the left no matter how the window is resized, can anybody help me?

Here is the source https://webdesign-flash.ro/ht/3d-slider/module.js

Thank you.

2

I’m somewhat confused by the question. It can be interpreted in different ways. The most probable is: you have a site that shows some content (non-Three.js). There is a 3D slider, that is made in Three.js. You want the slider to be at the left side of the window.

If this is the case, I’d suggest that the <canvas> tag that holds the 3D slider does not occupy the whole window. It can have fixed width and can be attached to the left side of the window with pure CSS.

image
image1756×380 30.1 KB

3

Thank you for your reply.

I do not want to position the canvas, the slider is placed in a group and the group is centered, I want to move the group to the right not the left to be positioned on the right side no matter the window width and height, I don’t know how to set the aspect ratio and potion of the group to do this.

The 3D space is new to me and it is very confusing with units…

Please let me know if you understand what I am trying to do and if you can help me or give me some hints.

4

I’m still uncertain whether left or right. But it doesn’t matter. What part of it you cannot do? You cannot move it? Or you can move it but you cannot calculate how much to move it?

Tonight I will make a few experiments and if they are OK, I will let you know (hoping that meanwhile somebody else will show up and provide a solution).

5

I apologize for the confusion.

I can move it but I can’t calculate the right x position of the group when the viewport is resized, also the aspect ratio would be cool to do it when the viewport is resized to keep visible the center image and not resize the entire slider it makes it to small, just resize the height of the browser, you will understand what I mean.

If you want the full source code let me know but it is all online.

I would like to finish this project add text do some experiments it is a very cool slider and I will share the source for others to get an idea of how to do this.

Thank you!

6

Here is a demo. You can use it to see how things could be done and then do something similar in your application. The demo does two things:

  • object sizes are consistent while you resize the window
  • the 2 red objects are locked at the left and right edges

https://codepen.io/boytchev/full/XWPORjw

Untitled

7

Thank you for your help I will study your code see if I can implement it.

1 Like