Jump to content
Please Use CODE Tags

Need Help manipulating a <div> Transform with 2 Sliders.

EggieIV
By EggieIV
in Programming
 Share
Go to solution Solved by TheNuzziNuzz,

Ok so you have a simple problem occuring here.

 

Basically when you run your function "document.getElementById('map').style.transform='rotate3d(1,0,0,'+ this.value +'deg)'" it replaces the old transform value.

 

So this means if you first move the first slider and rotate the z axis...

When you then move the next slider to rotate the other axis you are also setting the z axis to a value different then the slider.

 

 

The best way I can imagine to solve this problem in vanilla JS is to do as follows: 

<input onchange="updateViewAngle">

<input onchange="updateCetnerRotation">



let ViewAngle = 0

let CenterRotation = 0

let canvasElem = document.getElementById('map')


function updateViewAngle(event) {

ViewAngle = event.value

UpdateCanvas3d()

}

function updateCenterRotation(event) {

CenterRotation = event.value

UpdateCanvas3d()

}



function UpdateCanvas3d() {

canvasElem.style.transform=....

}

 

Now there is a second way to go about this that potentially makes a lot more sense for what you are trying to do. Personally I would not use the rotate3D CSS transform, but instead use rotateX, rotateY, and rotateZ

 

When you use set rotate3d you are effectively setting a rotation around a fixed axis in 3d space every time.

 

Anyway I hope this helps.

 

Posted

I am currently writing a Website, with a Html based 3D canvas.

 

So far so good, now i am facing a Problem with sliders to manipulate a 3D object in space. 

everytime one slider changes the Object reverts to its original Position first and then the manipulation of its Position in space is Computed. 

I tried several ways to bypass this limitation, but i always end up with the same result that multiplies the current rotation with 0, 

is there something i'm missing or is that not possible and i have to write Javascript code to link both sliders to a variable in hard coded css? 

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>PnP_Javascript</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">

  </head>

  <body>

    <main>
      <button style="cursor:pointer; grid-row: 1 / span 2; width: min-content;" class="drawerButton" onclick="toggleNav()">&#9776;</button>
      <div class="title" style="grid-column: 2/span2;  width:100%;">title</div>
      <div class="subtitle" style="grid-column: 2/span2;  width:100%;">Subtitle
      </div>

      <div class="lSidebar">

        <input class="verticalSlider" id="viewingAngle" type="range" min="0" max="90" value="0" data-units="deg" onchange="document.getElementById('map').style.transform='rotate3d(1,0,0,'+ this.value +'deg)'">

        <input class="verticalSlider" id="centerRotation" type="range" min="0" max="360" value="360" data-units="deg" onchange="document.getElementById('map').style.transform='rotate3d(0,0,1,'+ this.value +'deg)'">

      </div>

      <div class="canvas">
        <div class="container" id="map">
          <div class="face north"></div>
          <div class="face east"></div>
          <div class="face south"></div>
          <div class="face west"></div>
          <div class="face image">
            <embed src="https://cdn.pixabay.com/photo/2017/02/20/18/03/cat-2083492_960_720.jpg" width=100% height=100%>
          </div>
        
        </div>
      </div>



      <div class="item5">Right</div>
      <div class="item6" style="grid-column: 1/span3;  width:100%;">Footer</div>

    </main>

  </body>

</html>

 

https://jsfiddle.net/stbdznw1/8/

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Solution

Ok so you have a simple problem occuring here.

 

Basically when you run your function "document.getElementById('map').style.transform='rotate3d(1,0,0,'+ this.value +'deg)'" it replaces the old transform value.

 

So this means if you first move the first slider and rotate the z axis...

When you then move the next slider to rotate the other axis you are also setting the z axis to a value different then the slider.

 

 

The best way I can imagine to solve this problem in vanilla JS is to do as follows: 

<input onchange="updateViewAngle">

<input onchange="updateCetnerRotation">



let ViewAngle = 0

let CenterRotation = 0

let canvasElem = document.getElementById('map')


function updateViewAngle(event) {

ViewAngle = event.value

UpdateCanvas3d()

}

function updateCenterRotation(event) {

CenterRotation = event.value

UpdateCanvas3d()

}



function UpdateCanvas3d() {

canvasElem.style.transform=....

}

 

Now there is a second way to go about this that potentially makes a lot more sense for what you are trying to do. Personally I would not use the rotate3D CSS transform, but instead use rotateX, rotateY, and rotateZ

 

When you use set rotate3d you are effectively setting a rotation around a fixed axis in 3d space every time.

 

Anyway I hope this helps.

 

Computers r fun

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×