I recently created a texture using three.js, but I'm looking to adjust the angle of the texture. Refer to the images below for more context. Essentially, I want to tilt the current output slightly downwards so that the green surface is parallel to the ground and more of the sky is visible.
I've experimented with camera settings, as well as the position and rotation of the texture, but haven't achieved the desired outcome.
Current Output https://i.sstatic.net/gHowA.png
Desired Output https://i.sstatic.net/HQuO4.png
You can access my code on jsbin
Code Snippet:
<!-- HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Head elements -->
</head>
<body>
<div id="ThreeJS"></div>
</body>
<script>
// JavaScript code
</script>
</html>
CSS Styles:
/* CSS styles */
html, body {
/* Styling rules */
}
.row {
/* Additional styling */
}
.button {
/* Button styles */
}
Image Source: